ASP.NET Core 3.1中的数据表服务器端处理代码

问题描述

通过AJAX调用，我对数据表不熟悉。我需要实现数千条记录的服务器端处理。我正在学习教程，但是在某些地方与服务器端处理相混淆。

尝试从数据源渲染数据时出现错误。让我发布所有相关代码，并希望您能帮助我确定错误之处。由于我是 Datatables 和Ajax的新手，所以我将不胜感激，提供了示例，文本答案以及代码或链接到教程的更多答案，这些教程或教程链接了 ASP.NET CORE 3.1中的服务器端处理。 。

感谢您的宝贵时间和帮助。

NB。我从一个教程中获取了实现和配置，并尝试对其进行自定义。

下面是HTML表及其模型：

@model IEnumerable<StudentApplications>
<table id="custom-datatable" class="mb-5 display table table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ApplicationId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Firstname)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Surname)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.ApplicationFor)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.SubmissionDate)
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ApplicationId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Firstname)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Surname)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.ApplicationFor)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.SubmissionDate)
                        </th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>

以下是将HTML表初始化为数据表和某些配置的javascript文件：

$(document).ready(function () {
    $('#custom-datatable').DataTable({

        // Design Assets
        stateSave: true,autoWidth: true,// ServerSide Setups
        processing: true,serverSide: true,// Paging Setups
        paging: true,// Searching Setups
        searching: { regex: true },// Ajax Filter
        ajax: {
            url: "/myapplications/data",type: "POST",contentType: "application/json",dataType: "json",data: function (d) {
                return JSON.stringify(d);
            }
        },// Columns Setups
        columns: [
            { data: "ApplicationId" },{ data: "Firstname" },{ data: "Surname" },{ data: "ApplicationFor" },{ data: "SubmissionDate" }

            //// For Student.Id
            //{ "data": "applicationId","name": "ApplicationId" },//// For Student.Firstname
            //{ "data": "firstname","name": "Firstname" },//// For Student.Surname
            //{ "data": "surname","name": "Surname" },//// For Student.ApplicationFor
            //{ "data": "applicationFor","name": "ApplicationFor" },//// For Student.SubmissionDate
            //{ "data": "submissionDate","name": "SubmissionDate" }
        ],// Column Definitions
        columnDefs: [
            { targets: "no-sort",orderable: false },{ targets: "no-search",searchable: false },{
                targets: "trim",render: function (data,type,full,meta) {
                    if (type === "display") {
                        data = strtrunc(data,10);
                    }

                    return data;
                }
            },{ targets: "date-type",type: "date-eu" },{
                targets: 10,data: null,orderable: false
            },]
    });

});

以下是获取数据的方法：

// loading datatable
        [HttpPost]
        [Route("myapplications/data")]
        public async Task<IActionResult> Data([FromBody] DtParameters dtParameters)
        { 
            searchBy = dtParameters.Search?.Value;

            // if we have an empty search then just order the results by Id ascending
            var orderCriteria = "ApplicationId";
            var orderAscendingDirection = true;

            if (dtParameters.Order != null)
            {
                // in this example we just default sort on the 1st column
                orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data;
                orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc";
            }

            var result = context.AspNetStudentApplications.AsQueryable();

            if (!string.IsNullOrEmpty(searchBy))
            {
                result = result.Where(r => r.ApplicationId != null && r.ApplicationId.ToUpper().Contains(searchBy.ToUpper()) ||
                                           r.Firstname != null && r.Firstname.ToUpper().Contains(searchBy.ToUpper()) ||
                                           r.Surname != null && r.Surname.ToUpper().Contains(searchBy.ToUpper()) ||
                                           r.ApplicationFor != null && r.ApplicationFor.ToUpper().Contains(searchBy.ToUpper()) ||
                                           r.SubmissionDate != null && r.SubmissionDate.ToUpper().Contains(searchBy.ToUpper()));
            }

            result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria,DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria,DtOrderDir.Desc);

            // now just get the count of items (without the skip and take) - eg how many could be returned with filtering
            var filteredResultsCount = await result.CountAsync();
            var totalResultsCount = await context.AspNetStudentApplications.CountAsync();

            return Json(new DtResult<StudentApplications>
            {
                Draw = dtParameters.Draw,RecordsTotal = totalResultsCount,RecordsFiltered = filteredResultsCount,Data = await result
                    .Skip(dtParameters.Start)
                    .Take(dtParameters.Length)
                    .ToListAsync()
            });
        }

以下是DtParameters类和与数据表相关的其他类：

/// <summary>
/// A full result,as understood by jQuery DataTables.
/// </summary>
/// <typeparam name="T">The data type of each row.</typeparam>
public class DtResult<T>
{
    /// <summary>
    /// The draw counter that this object is a response to - from the draw parameter sent as part of the data request.
    /// Note that it is strongly recommended for security reasons that you cast this parameter to an integer,rather than simply echoing back to the client what it sent in the draw parameter,in order to prevent Cross Site Scripting (XSS) attacks.
    /// </summary>
    [JsonProperty("draw")]
    public int Draw { get; set; }

    /// <summary>
    /// Total records,before filtering (i.e. the total number of records in the database)
    /// </summary>
    [JsonProperty("recordsTotal")]
    public int RecordsTotal { get; set; }

    /// <summary>
    /// Total records,after filtering (i.e. the total number of records after filtering has been applied - not just the number of records being returned for this page of data).
    /// </summary>
    [JsonProperty("recordsFiltered")]
    public int RecordsFiltered { get; set; }

    /// <summary>
    /// The data to be displayed in the table.
    /// This is an array of data source objects,one for each row,which will be used by DataTables.
    /// Note that this parameter's name can be changed using the ajax option's dataSrc property.
    /// </summary>
    [JsonProperty("data")]
    public IEnumerable<T> Data { get; set; }

    /// <summary>
    /// Optional: If an error occurs during the running of the server-side processing script,you can inform the user of this error by passing back the error message to be displayed using this parameter.
    /// Do not include if there is no error.
    /// </summary>
    [JsonProperty("error",NullValueHandling = NullValueHandling.Ignore)]
    public string Error { get; set; }

    public string PartialView { get; set; }
}

/// <summary>
/// The additional columns that you can send to jQuery DataTables for automatic processing.
/// </summary>
public abstract class DtRow
{
    /// <summary>
    /// Set the ID property of the dt-tag tr node to this value
    /// </summary>
    [JsonProperty("DT_RowId")]
    public virtual string DtRowId => null;

    /// <summary>
    /// Add this class to the dt-tag tr node
    /// </summary>
    [JsonProperty("DT_RowClass")]
    public virtual string DtRowClass => null;

    /// <summary>
    /// Add the data contained in the object to the row using the jQuery data() method to set the data,which can also then be used for later retrieval (for example on a click event).
    /// </summary>
    [JsonProperty("DT_RowData")]
    public virtual object DtRowData => null;

    /// <summary>
    /// Add the data contained in the object to the row dt-tag tr node as attributes.
    /// The object keys are used as the attribute keys and the values as the corresponding attribute values.
    /// This is performed using using the jQuery param() method.
    /// Please note that this option requires DataTables 1.10.5 or newer.
    /// </summary>
    [JsonProperty("DT_RowAttr")]
    public virtual object DtRowAttr => null;
}

/// <summary>
/// The parameters sent by jQuery DataTables in AJAX queries.
/// </summary>
public class DtParameters
{
    /// <summary>
    /// Draw counter.
    /// This is used by DataTables to ensure that the Ajax returns from server-side processing requests are drawn in sequence by DataTables (Ajax requests are asynchronous and thus can return out of sequence).
    /// This is used as part of the draw return parameter (see below).
    /// </summary>
    public int Draw { get; set; }

    /// <summary>
    /// An array defining all columns in the table.
    /// </summary>
    public DtColumn[] Columns { get; set; }

    /// <summary>
    /// An array defining how many columns are being ordering upon - i.e. if the array length is 1,then a single column sort is being performed,otherwise a multi-column sort is being performed.
    /// </summary>
    public DtOrder[] Order { get; set; }

    /// <summary>
    /// Paging first record indicator.
    /// This is the start point in the current data set (0 index based - i.e. 0 is the first record).
    /// </summary>
    public int Start { get; set; }

    /// <summary>
    /// Number of records that the table can display in the current draw.
    /// It is expected that the number of records returned will be equal to this number,unless the server has fewer records to return.
    /// Note that this can be -1 to indicate that all records should be returned (although that negates any benefits of server-side processing!)
    /// </summary>
    public int Length { get; set; }

    /// <summary>
    /// Global search value. To be applied to all columns which have searchable as true.
    /// </summary>
    public DtSearch Search { get; set; }

    /// <summary>
    /// Custom column that is used to further sort on the first Order column.
    /// </summary>
    public string SortOrder => Columns != null && Order != null && Order.Length > 0
        ? (Columns[Order[0].Column].Data +
           (Order[0].Dir == DtOrderDir.Desc ? " " + Order[0].Dir : string.Empty))
        : null;

    /// <summary>
    /// For Posting Additional Parameters to Server
    /// </summary>
    public IEnumerable<string> AdditionalValues { get; set; }

}

/// <summary>
/// A jQuery DataTables column.
/// </summary>
public class DtColumn
{
    /// <summary>
    /// Column's data source,as defined by columns.data.
    /// </summary>
    public string Data { get; set; }

    /// <summary>
    /// Column's name,as defined by columns.name.
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// Flag to indicate if this column is searchable (true) or not (false). This is controlled by columns.searchable.
    /// </summary>
    public bool Searchable { get; set; }

    /// <summary>
    /// Flag to indicate if this column is orderable (true) or not (false). This is controlled by columns.orderable.
    /// </summary>
    public bool Orderable { get; set; }

    /// <summary>
    /// Search value to apply to this specific column.
    /// </summary>
    public DtSearch Search { get; set; }
}

/// <summary>
/// An order,as sent by jQuery DataTables when doing AJAX queries.
/// </summary>
public class DtOrder
{
    /// <summary>
    /// Column to which ordering should be applied.
    /// This is an index reference to the columns array of information that is also submitted to the server.
    /// </summary>
    public int Column { get; set; }

    /// <summary>
    /// Ordering direction for this column.
    /// It will be dt-string asc or dt-string desc to indicate ascending ordering or descending ordering,respectively.
    /// </summary>
    public DtOrderDir Dir { get; set; }
}

/// <summary>
/// Sort orders of jQuery DataTables.
/// </summary>
public enum DtOrderDir
{
    Asc,Desc
}

/// <summary>
/// A search,as sent by jQuery DataTables when doing AJAX queries.
/// </summary>
public class DtSearch
{
    /// <summary>
    /// Global search value. To be applied to all columns which have searchable as true.
    /// </summary>
    public string Value { get; set; }

    /// <summary>
    /// true if the global filter should be treated as a regular expression for advanced searching,false otherwise.
    /// Note that normally server-side processing scripts will not perform regular expression searching for performance reasons on large data sets,but it is technically possible and at the discretion of your script.
    /// </summary>
    public bool Regex { get; set; }
}

这是我的空表：