Question

如何在不使用局部视图的情况下在模态弹出窗口中显示数据表。听到的是我的indax.cshtml

<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork">Branch Network</button>


<div class="modal fade" id="itemModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel"> Branch Network</h4>
        </div>
        <div class="modal-body no-padding">
            <div style="width:100%; margin:0 auto;">
                <table id="branchTable">
                    <thead>
                        <tr>
                            <th>BranchName</th>
                            <th>Address</th>
                            <th>Manager Name</th>
                            <th>Mobile</th>
                            <th>Telephone</th>
                            <th>fax</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <style>
                tr.even {
                    background-color: #F5F5F5 !important;
                }
            </style>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

听说我使用/ Branch / GetBranchNetwork来获取数据。

@section Scripts{    
<script>        
    $(document).ready(function () {
        $('#branchTable').DataTable({
            "processing": true, // for show progress bar
            "ajax": {
                cache: false,
                url: "/Branch/GetBranchNetwork",
                type: "POST",
                datatype: "json",
            },
            "columns": [
                { "data": "branchName", "width": "5%", },
                { "data": "address"},
                { "data": "managerName"},
                { "data": "mobile"},
                { "data": "telephone"},
                { "data": "fax"},
            ]
        });
    });
</script>

}

弹出式模态部分

<script>
$('.btn-BranchNetwork').on('click', function () {
    var url = '/Branch/BranchNetwork';
    $.get(url, function (data) {
        //debugger;
        $('#ItemModelContent').html(data);
        $('#itemModel').modal('show');
    });
});

方法

[HttpPost]
    public ActionResult GetBranchNetwork()
    {
        WebPortalEntities db = new WebPortalEntities();
        var jsonData = new
        {
            data = from a in db.tbl_branchNetwork.ToList() select a
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }




public ActionResult BranchNetwork()
    {
        return PartialView("_BranchNetwork");
    }

_BranchNetwork.cshtml是我的部分视图，没有内容。我想不要将部分view.load数据调用到模态对话框

Answer 1

所以......只需将Modal放在父页面上，并在其中定义表格。不需要模态。但是当父页面填充时，表格将填充。

将您的按钮html更改为

<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork" 
 data-toggle="modal" data-target="#itemModel">Branch Network</button>

asp.net mvc modal popup with datatable

1 个答案: