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，因此也没有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为您的表格，即id =“DataTables-Employee”。您的控制器代码看起来很好，但使用ActionResult返回带有模型数据的View。这使您可以在视图中使用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>

//知道让它成为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 Action方法从json中提取ajax数据表

2 个答案: