Question

我使用MVC和Datables.js来显示数据。它运行正常，我的问题是点击行我将EmployeeID传递给不同的EmployeeWorkDetails Action，这包括不同的EmployeeWorkDetails视图。

现在我需要在不同的视图中绑定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, },
                   ],
               });
    });

Answer 1

这是您将员工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>

DataTables在多个视图中与MVC绑定

1 个答案: