Реализация DataTables с использованием EF. Результаты не отображаются, ошибок нет

Question

Я пытаюсь следовать этому руководству о том, как использовать плагин DataTables: https://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part?fid=1609174&df=90&mpp=25&sort=Position&spc=Relaxed&tid=4604201, но с использованием EF.

Я установил через менеджер пакетов "Mvc.JQuery.DataTables".

Это мой Контроллер (база данных создана из сгенерированного edmx из Базы данных, jQueryDataTableParamModel - копия из учебника):

public class TablesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    // AjaxHandler
    public ActionResult AjaxHandler(jQueryDataTableParamModel param)
    {
        var result = from p in db.Tables
                     select p;

        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = db.Tables.Count(),
            iTotalDisplayRecords = db.Tables.Count(),
            aaData = result
        },
        JsonRequestBehavior.AllowGet);
    }
}

Это мой класс модели:

public partial class Table
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public string Date { get; set; }
    public Nullable<decimal> DateValue { get; set; }
    public Nullable<int> cs_Table { get; set; }

    public virtual Surname Surname1 { get; set; }
    public virtual Date Date1 { get; set; }
    public virtual Name Name1 { get; set; }
}

Это мой вид:

@model IEnumerable<EFModel.Table>

@{
    ViewBag.Title = "Index";
}

 <h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="myDataTable">
    <thead>
    <tr>
        <th>
             @Html.DisplayNameFor(model => model.Id)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Date)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateValue)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.cs_Table)
        </th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

А это мой index.js с функцией для обработки таблиц:

$(document).ready(function () {

    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "Tables/AjaxHandler",
        "bProcessing": true,
        "aoColumns": [
            {
                "sName": "ID",
                "bSearchable": false,
                "bSortable": false,
                "fnRender": function (oObj) {
                    return '<a href=\"Details/' +
                        oObj.aData[0] + '\">View</a>';
                }
            },
            { "sName": "Name" },
            { "sName": "Surname" },
            { "sName": "Date" },
            { "sName": "DateValue" }
            { "sName": "cs_Tables"}
        ]
    });
});

Я импортирую необходимые файлы для DataTables для работы в Head in _Layout.cshtml:

<script src="~/Scripts/jquery-3.3.1.min.js"
        type="text/javascript"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"
        type="text/javascript"></script>
<script src="~/Scripts/DataTables/index.js"
        type="text/javascript"></script> 

Из того, что я прочитал, должно быть достаточно для отображения записей в моемпросмотр Index но ничего не получается.Я поставил точку останова на методе AjaxHandler, но он не идет туда.

Answer 1

Я использую 1.10 Jquery Datatables и для шаблонов я использую Underscore JS .

Вот мой код для загрузки со стороны сервера.

Поместите этот шаблони таблица в вашем HTML-код.

<table class="table table-bordered table-condensed" id="tblAccounts"></table>

<script type="text/template" id="tmpl_Grid">
    <td><%= Id %></td>
    <td><%= Amount %></td>
    <td><%= Date %></td>
    <td><%= Type %></td>        
</script>

Затем этот метод для JS для загрузки данных со стороны сервера.

function  Load() {
            var tmpl = _.template($('#tmpl_Grid').html());
            $('#tblAccounts').DataTable({
                "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
                "paging": true,
                "info": true,
                "ordering": true,
                "search": true,
                "processing": true,
                "serverSide": true,
                "destroy": true,
                "ajax": {
                    "url": "/Accounts/LoadList",
                    "type": "POST",
                    "data": function (d) {
                        d.startDate = $("#txtStartDate").val();
                        d.endDate = $("#txtEndDate").val();
                        d.head = $("#drpAccountHeads").val();
                        var accounts = $("#drpAccountTypes").val();
                        d.accounts = accounts == null ? [] : accounts;
                        d.phase = $("#drpPhases option:selected").val();
                    }
                },
                "columns": [
                    { "data": null, "title": "ID", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "AMOUNT", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "DATE", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "TYPE", "className": "", "orderable": false, "searchable": false }
                ],
                "order": [[0, "asc"]],
                "rowCallback": function (row, data) {
                    $(row).html(tmpl(data));
                },
                "initComplete": function (settings, json) {

                }
            });
        }

Вот код для контроллера.

[HttpPost]
        public async Task<JsonResult> LoadList()
        {
           var search = Request.Form["search[value]"] + "";

            var totalCount = 0;
            var fList = _context.Expenses.Include(x => x.AccountType).AsQueryable();
            if (!string.IsNullOrEmpty(search))
            {
                fList = fList.Where(x => x.Description.ToLower().Trim().Contains(search.ToLower().Trim()));
            }

            var list = await fList.OrderByDescending(x => x.Id).Skip(start).Take(length).Select(x => new
            {
                x.Id,
                x.Amount,
                Date = x.Date != null ? x.Date.Value.ToString("dd-MMM-yyyy") : "",
                Type = x.AccountTypeId != null ? x.AccountType.Name : "",
                x.Description,
                x.BillAmount,
                x.Payment,
                x.AccountTypeId
            }).ToListAsync();

            if (list.Any())
            {
                totalCount = fList.Count();
            }

            var result = JObject.FromObject(new
            {
                draw,
                recordsFiltered = totalCount,
                recordsTotal = totalCount,
                data = list
            });
            return result;
        }

Answer 2

Я использую таблицы данных 1.10.18, и мой класс возврата:

public class DataTableProcessingResult {
    public int draw { get; set; }
    public int recordsTotal { get; set; }
    public int recordsFiltered { get; set; }
    public object data { get; set; }
    public string error { get; set; }
}

Так можете ли вы проверить fiddler или любым сетевым анализатором или дебаггером связь между вашим клиентом и сервером?