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中的_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.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; }
}

您是否可以通过提琴手或任何网络分析仪或调试器来检查客户端与服务器之间的通信？

Answer 2

我正在使用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;
        }

使用EF实现数据表。无结果显示，无错误

2 个答案: