从 MVC Action 方法向 ajax 数据表提供 json Asp.net

Question

我正在使用Ajax Datatable，我想用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，因此也没有数据表，因为我在 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

一种可能的方法是在 razor 视图/部分/视图中定义您的"常规"表标记 - id 你的表，即 id="DataTables-Employee"。 控制器代码看起来不错，但使用 ActionResult 返回包含模型数据的视图。 这使您可以通过在视图中使用 razor 语法来控制数据，我发现这比复杂的 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>

知道把它做成一个数据表

    $('#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..."
      }
    });​

引导程序样式的结果示例：