2017-06-05 25 views
0

我使用MVC和Datables.js來顯示數據。它工作正常,我的問題是點擊行我將EmployeeID傳遞給不同的EmployeeWorkDetails Action,這包括不同的EmployeeWorkDetails視圖。DataTables在多個視圖中綁定MVC

現在我需要在不同視圖中綁定Datatables中的EmployeeWorkDetails,我該如何實現?

索引視圖

<table id="EmployeeTable" style="display:none"> 
    <thead> 
     <tr> 
      <th>Select</th> 
      <th>EmployeeID</th> 
      <th>EmployeeName</th> 

</table> 

function LoadData() { 
    $.ajax({ 
     "url": "@Url.Action("Home", "EmployeeList")", 
     method: 'post', 
     dataType: 'json', 
     success: function (data) { 
      $('#EmployeeTable').DataTable(
      { 
       data: data,select: true, 
       columns: [ 
        // using anchor tag 
        { "data": "EmployeeID", "render": function (data) { 
         return '<a class="btn btn-primary" href="/Home/EmployeeWorkDetails/' + data + '"></a>';}, "autoWidth": true,}, 
        { "data": "EmployeeID", "autoWidth": true,}, 
        { "data": "EmployeeName", "autoWidth": true, visible: false },}, 
       ] 
      ,});}}) } 

控制器

public class HomeController : Controller 
{ 
    public ActionResult index(int id) 
    { 
     return View(); 
    } 
    [HttpGet] 
    public JsonResult EmployeeList() 
    { 
     var data = EmployeeList.GetEmployeeData(); 
     return Json(data, JsonRequestBehavior.AllowGet); 
    } 

    [HttpGet] 
    public ActionResult EmployeeWorkDetails(int id) 
    { 
     var workDetails= emp.EmployeeWorkDetails(int id) 
     return View(workDetails); 
    } 
} 
    This is View of EmployeeWorkDetails 
    @model IEnumerable<WorkEmployee.Models.workDetails> 
     // Is it possible to pass workDetails in datatables Data 
    $(document).ready(function() { 
     oTable = $('#EmployeTable').DataTable(
       { 
        searching: true, 
        ordering: true, 
        select: true, 
        data: @workDetails, 
        columns: [ 
          { "data": "EmployeeId", "autoWidth": true, }, 
          { "data": "EmployeeName", "autoWidth": true, }, 
        ], 
       }); 
    }); 
+0

可以請你讓我知道,如果答案幫助? – kblau

+0

感謝您的幫助,我需要在視圖中綁定EmployeeworkDetails以及如何使用Datatables來顯示var的所有列表返回workDetails = emp.EmployeeWorkDetails(int id) return View(workDetails); –

回答

0

這是你如何通過員工ID控制器:

控制器:

//Create an edmx to your table 
public class HomeController : Controller 
{ 
    [HttpGet] 
    public ActionResult EmployeeWorkDetails(int id) 
    { 
     //var workDetails= emp.EmployeeWorkDetails(int id) 

     //put a breakpoint here to see id passed 

     return View("Index2001"); 
    } 


    public ActionResult Index2001() 
    { 
     IList<EmployeeList> empList; 
     using (BreazEntities24 entity = new BreazEntities24()) 
     { 
      empList = entity.EmployeeLists.ToList(); 
     } 
     return View(empList); 
    } 

查看:

@model IEnumerable<Testy20161006.Models.EmployeeList> 
@using Testy20161006.Models 
@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index2001</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" /> 

    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#EmployeeTable").DataTable({ 
       "order": [[1, "desc"]], 
       "pagingType": "full", 
       "deferRender": true, 
       "columns": [ 
       { 
        "data": "EmployeeID", "render": function (data, type, row) { 
         return '<a class="btn btn-primary" href="/Home/EmployeeWorkDetails/' + data + '">click</a>' 
        }, "autoWidth": true, 
       }, 
       { "data": "EmployeeID", "autoWidth": true, }, 
       { "data": "EmployeeName", "autoWidth": true, visible: true } 
       ] 
      }); 
     }) 
    </script> 
</head> 
<body> 
    <div> 
     <table id="EmployeeTable" class="display table table-striped table-bordered"> 
      <thead> 
       <tr> 
        <th>Select</th> 
        <th>EmployeeID</th> 
        <th>EmployeeName</th> 
      </thead> 
      <tbody> 
       @foreach (EmployeeList emp in Model) 
       { 
        <tr> 
         <td>@emp.EmployeeID</td> 
         <td>@emp.EmployeeID</td> 
         <td>@emp.EmployeeName</td> 
        </tr> 
       } 
      </tbody> 

     </table> 
    </div> 
</body> 
</html> 
+0

感謝您的時間 –

+0

我已經更新了代碼,我需要綁定數據表中的workDetails數據 –