使用来自 Asp.net MVC Action 方法的 json 提供 ajax 数据表

Question

我正在使用 Ajax 数据表，我想为表提供 Json 数据，这些数据是从 MVC Action 方法返回的。这是我迄今为止尝试过的，

我的控制器操作方法

public ActionResult Index()
{
    _dbcontext = new dbContext();
    List<Employee> employees = new List<Employee>();
    var query = (from e in _dbcontext.Employees select new { e.FirstName, e.LastName, e.Username, e.Password }).ToList();
    return Json(query,JsonRequestBehavior.AllowGet);
}

这是我在索引页面上的 Javascript

</script>
    $(document).ready(function () {
        $('#example').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "Home/Index",
                "dataType": "jsonp"
            }
        });
    });
</script>

但是在页面加载时只能看到普通的 Json 数据，没有数据表，我认为它甚至没有在索引页面上呈现 Html，因此也没有 Datatable，因为我在 chrome 调试器中看不到任何东西。

此外，Html 和脚本引用都可以，因为当我从具有数据数组的 .txt 文件中提供数据表时，我可以看到结果。

我不知道这样做的正确方法是什么，如果有人对此有解决方案，请帮忙，谢谢。

Answer 1

我认为你需要做的只是以下

</script>
    $(document).ready(function () {
        $('#example').dataTable({
            "ajax": "/Home/Index",
             "columns": [
                        { "data": "FirstName" },
                        { "data": "LastName" },
                        { "data": "Username" },
                        { "data": "Password" },
                        ]
        });
    });
</script>

不需要处理和服务器端，当您有大量数据并希望在服务器端完成分页和排序时使用它们，而您的代码中不是这种情况

Answer 2

一种可能的方法是在剃刀视图/部分/视图中定义您的“常规”表标记 - 标识您的表，即 id="DataTables-Employee"。您的控制器代码看起来不错，但使用 ActionResult 返回带有模型数据的视图。这使您可以在视图中使用剃刀语法来控制数据，我发现这比复杂的 JSON 结果容易得多。 （另外，我喜欢使用 AutoMapper 将我的模型数据投影到 - 试一试！）

注意：这只是执行此操作的几种方法之一。服务器端处理在处理大型数据集时会有所帮助，但请尝试使用客户端。我使用 ajax，但将您的模型结果展平。您很可能需要定义列并将它们映射到 JSON。如果要发布表格结果，请添加表单标签。我为此使用 ajax 并在发送之前序列化我的表单。我希望这有帮助！

    public ActionResult Index()
    {
        _dbcontext = new dbContext();

        List<Employee> employees = new List<Employee>();

        var query = (from e in _dbcontext.Employees 
            select new {e.FirstName, e.LastName, e.Username, e.Password};

        //I would recommend using AutoMapper and project your model to this
         return View(query.ToArray());
    }

假设您正在使用索引视图：

    @model dynamic

    ... //typical HTML table
    <table class="display compact table table-striped table-hover dataTables_sizing table-condensed" id="dataTables-Employee">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>User Name</th>
                <th class="no-sort">Actions</th>
            </tr>
        </thead>
        @foreach (var emp in Model)
        {
            <tr>
                <td>@emp.FirstName</td>
                <td>@emp.LastName</td>
                <td>@UserName</td>
                <td style="width: 100px;">
                    <i class="fa fa-search"></i>
                    @Ajax.ActionLink("View", "Index", new { id = @app.EmployeeId }, 
                                    new AjaxOptions
                                   {
                                     dateTargetId = "resultSection",
                                     HttpMethod = "GET",
                                InsertionMode = InsertionMode.Replace
                            })
                </td>
            </tr>
        }

    </table>

//知道把它做成DataTable

    $('#dataTables-Employee').DataTable({
      scrollY: '330px',
      scrollCollapse: true,
      paging: true,
      scrollX: false,
      "columnDefs": [{
        "orderable": false,
        "targets": 2
      }, {
        className: "dt-center",
        "targets": [3]
      }],
      "aria": {
        "sortAscending": ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
      },
      "options": {
        "emptyTable": "No records to display..."
      }
    });​

Example of results with Bootstrap styles: