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

Question

How to Display a Datatable in Modal Popup with out using partial view. hear is the my 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 -->

hear i'm using /Branch/GetBranchNetwork for getting Data.

@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>

}

popup Modal section

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

Method

[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 is my Partial view and no content there. i want to without calling partial view.load data to modal dialog

Answer 1

So... just put the Modal on the parent page with the table defined in it. No need for modal. BUT the table will populate when the parent page populates.

change your button html to

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