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

Question

我正在使用 Ajax 数据table，我想为 table 提供 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 数据而没有数据 table，我认为它甚至没有在索引页面上呈现 Html 因此两者都没有Datatable 因为我在 chrome 调试器中看不到任何东西。

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

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

Answer 1

我想你需要做的就是下面这些

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

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

Answer 2

一种可能的方法是在剃刀 view/partial/ 视图中定义您的 "regular" table 标记 - id 您的 table，即 id="DataTables-Employee".您的控制器代码看起来很好，但是带有 ActionResult return 带有模型数据的视图。这使您可以通过在视图中使用剃刀语法来控制数据，我发现这比复杂的 JSON 结果容易得多。（此外，我喜欢使用 AutoMapper 将我的模型数据投影到 - 试试吧！）

注意：这只是执行此操作的几种方法之一。服务器端处理在处理庞大的数据集时很有帮助，但不妨试试客户端。我使用 ajax 但将模型结果展平。您很可能需要定义您的列并将它们映射到您的 JSON。如果您想要 post 您的 table 结果，请添加表单标签。我为此使用 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:

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

Feed ajax datatable with json from Asp.net MVC Action method

ajax

asp.net-mvc

json