Question

我单击“确定”，并在控制台错误：enter image description here

我是编程新手，需要帮助。我需要使用json从多个数据结构中形成一个数据表。在这一点上，我坚持这个错误。帮助请理解

控制器中的函数是json。

[HttpGet]
            public JsonResult Lowx()
            {
                var query = db.Infos.
                    Include(x => x.Profile).
                    Include(x => x.Cars).
                    ToList();

                return Json(new { data = query });
            }

表和Ajax

 <table class= "table" id="example" >
            <thead>
                <tr >
                    <th>first name</th>
                    <th>last name</th>
                    <th>middle name</th>
                    <th>birthday</th>
                    <th>carname</th>
                    <th>carnumber</th>
                </tr>
            </thead>
            <tbody></tbody>

        </table>

        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function (data) {
             $("#example").DataTable({
      ajax: {
          url: '@Url.Action("Lowx")',
          type: 'GET',

          dataSrc: ""

      },
      columns: [
        { data: "FirstName", name: "FirstName" },
        { data: "LastName", name: "LastName" },
        { data: "MiddleName", name: "MiddleName" },
        { data: "BirthDate", name: "BirthDate" },
        { data: "CarName", name: "CarName" },
        { data: "CarNumber", name: "CarNumber" }
      ]
    });

控制台：无法加载资源：服务器响应状态为500（内部服务器错误）。

Alfred和ALL的屏幕快照） enter image description here enter image description here

屏幕截图复制粘贴 enter image description here

Answer 1

请声明数据表，如下所示：

$('#example').DataTable({
    "ajax": {
        "url": '@Url.Action("Lowx")',
        "dataSrc": ""
    },
    "columns": [
        { "FirstName", "data.Profile.FirstName" },
        { "LastName", "data.Profile.LastName" },
        { "MiddleName", "data.Profile.MiddleName" },
        { "BirthDate", "data.Profile.BirthDate" },
        { "CarName", "data.Cars.CarName" },
        { "CarNumber", "data.Cars.CarNumber" }
    ]
});

在Chrome中，查看Network标签以查看Ajax调用是否正确形成。在Visual Studio中，在Lowx()的开头放置一个Breakppoint，以查看是否到达代码。请分享您的发现。

Answer 2

尝试将此示例复制粘贴到视图文件中。正常工作后，更改URL即可解析您自己的数据，并且应该可以正常工作。请注意，该操作是POST，而不是GET。

[HttpPost]
public JsonResult Lowx()
{
    var query = db.Infos.Include(x => x.Profile).Include(x => x.Cars).ToList();
    return Json(new { data = query });
}

http://jsfiddle.net/bababalcksheep/ntcwust8/

$(document).ready(function () {
    var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
    var table = $('#example').DataTable({
        'processing': true,
        'serverSide': true,
        'ajax': {
        'type': 'POST',
        'url': url,
        'data': function (d) {
            return JSON.stringify( d );
        }
     }
  });
  $('#reload').click(function (e) {
      table.ajax.reload();
  });
  $('.toggleCols').click(function (e) {
      e.preventDefault();
      var column = table.column( $(this).attr('data-column') );
      column.visible( ! column.visible() );
  });    
});

错误Ajax错误数据表警告：表ID -example

2 个答案: