asp.net 带数据表的 mvc 模式弹出窗口

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

所以...只需将模式放在父页面上，其中定义了 table。不需要模态。但是 table 将在父页面填充时填充。

将按钮 html 更改为

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

asp.net 带数据表的 mvc 模式弹出窗口

asp.net mvc modal popup with datatable

c#

asp.net-mvc

partial-views

asp.net-mvc-partialview