2017-03-03 82 views
2

如何使用局部視圖顯示模式彈出窗口中的數據表。 聽到的是我的indax.cshtmlasp.net mvc模式彈出與數據表

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

聽說我要使用/分公司/ 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數據調用到模態對話框

+2

你有什麼對這裏使用的局部視圖? –

回答

0

所以...只需將Modal放置在父頁面上,其中定義了表格。不需要模態。 但是該表將在父頁面填充時填充。

您的按鈕的HTML改爲

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