数据表版本1.10.21停留在ASP.NET Core 3.1中的``处理中'' [英] Datatable version 1.10.21 is stuck on 'processing...' in ASP.NET Core 3.1

问题描述

我在 ASP.NET Core 3.1 中使用了 Datatable 1.10.21 ，并且卡在了 正在处理... 。如果发生异常，我会捕捉到，但是到目前为止，我还没有看到任何异常。由于我不知道的原因，因此不会显示数据库记录。

请您抽出一点时间仔细查看我的代码，以确定在哪里出错并指出。感谢您为解决此问题所付出的时间和精力。

这是我的代码：

我的HTML表格：

  @model IEnumerable< Users> 
< div class = table-sensitive> 
< table class = table table-bordered table-hover; id = myTable> 
< thead> 
< tr> 
< th> @ Html.DisplayNameFor（model => model.Id）< / th> 
< th> @ Html.DisplayNameFor（model => model.FirstName）< / th> 
< th> @ Html.DisplayNameFor（model => model.LastName）< / th> 
< th> @ Html.DisplayNameFor（model => model.Country）< / th 
< th> @ Html.DisplayNameFor（model => model.Gender）< / th; 
< th> @ Html.DisplayNameFor（model => model.Age）< / th; 
< / tr> 
< / thead> 
< tfoot> 
< tr> 
< th> @ Html.DisplayNameFor（model => model.Id）< / th> 
< th> @ Html.DisplayNameFor（model => model.FirstName）< / th> 
< th> @ Html.DisplayNameFor（model => model.LastName）< / th> 
< th> @ Html.DisplayNameFor（model => model.Country）< / th> 
< th> @ Html.DisplayNameFor（model => model.Gender）< / th> 
< th> @ Html.DisplayNameFor（model => model.Age）< / th; 
< / tr> 
< / tfoot> 
< / table> 
< / div> 
  

模型类别：

  public class Users 
 {
 public string Id {get;组; } 
公用字串FirstName {get;组; } 
公用字串LastName {get;组; } 
公共字符串Country {get;组; } 
公用字串Gender {get;组; } 
公共字符串Age {get;组; } 
} 
  

数据表初始化程序：

  $ {document）.ready（function（）{
 $（'＃myTable'）。DataTable（
 {
 //服务器端设置
处理：true，
服务器端：true，
 
 //分页设置
分页：true，
 
 //搜索设置
搜索：{regex：true}，
 
 // Ajax过滤器
 ajax：{
 url： / Home / Data，
 type： GET，
 contentType： application / json，
 dataType： json，
 data：函数（d）{
 return JSON.stringify（d）; 
} 
}，
 //列设置
列：[
 {data： id}，
 {data： fir stname }，
 {data： lastname; }，
 {data： country; }，
 {data： gender }，
 {data： age; } 
] 
}）； 
}）； 
  

以JSON格式获取数据：

  [HttpGet] 
公共异步任务< IActionResult> Data（DataTablesResult tableParams）
 {
 try 
 {
 var query = context.AspNetUsers.AsQueryable（）; 
 
 var totalCount =等待查询.CountAsync（）; 
 
 if（tableParams.Search！= null）
 query = query.Where（c => c.FirstName.Contains（tableParams.Search.Value）
 || c .LastName.Contains（tableParams.Search.Value））; 
 //其他搜索查询在此处
 
 if（tableParams.Order.Count> 0）
 {
 if（tableParams.Order [0] .Dir = = asc）
查询= query.OrderBy（c => EF.Property< string>（c，tableParams.Columns [tableParams.Order [0] .Column] .Name））; 
 else 
 query = query.OrderByDescending（c => EF.Property< string>（c，tableParams.Columns [tableParams.Order [0] .Column] .Name））; 
} 
 //在此示例中，多订单被禁用，因此我们可以按任意列动态订购
 
 var result = await query.AsNoTracking（）。Select（E => new {Count = query.Count（），E = E}）。Skip（tableParams.Start）.Take（tableParams.Length）.ToListAsync（）; 
 var pureData = result.Select（E => E.E）; 
 
 if（result.Count == 0）
返回Ok（新{tableParams.Draw，recordsTotal = 0，recordsFiltered = 0，data = Enumerable.Empty< string>（）}） ; 
 
返回Ok（新的{tableParams.Draw，recordsTotal = totalCount，recordsFiltered = result.Select（c => c.Count）.FirstOrDefault（），data = pureData}）; 
} 
 catch（异常例外）
 {
 ex.Message.ToString（）; 
 
投掷； 
} 
} 
  

Datatable ModelBinder类：

 公共类DataTableModelBinder：IModelBinder 
 {
公共任务BindModelAsync（ModelBindingContext bindingContext）
 {
 var request = bindingContext .HttpContext.Request; 
 
 //检索请求数据
 var draw = Convert.ToInt32（request.Query [ draw]）; 
 var start = Convert.ToInt32（request.Query [ start]）; 
 var length = Convert.ToInt32（request.Query [ length]）; 
 
 //搜索
 var搜索=新搜索
 {
 Value = request.Query [ search [value]]，
正则表达式= Convert.ToBoolean（request.Query [ search [regex]]）
}; 
 
 //订单
 var o = 0; 
 var order = new List< ColumnOrder>（）; 
 while（！StringValues.IsNullOrEmpty（request.Query [ order [ + o + + [] [列]]）））
 {
 order.Add（new ColumnOrder 
 {
列= Convert.ToInt32（request.Query [ order [ + o + + [] [列]]），
 Dir = request.Query [ ; order [ + o +] [dir]] 
}）； 
 o ++; 
} 
 
 //列
 var c = 0; 
 var columns = new List< Column>（）; 
而（！StringValues.IsNullOrEmpty（request.Query [ columns [ + c +] [name]]）））
 {
 columns.Add（new Column 
 {
 Data = request.Query [ columns [ + c +] [data]]，
 Name = request.Query [ columns [; + c +] [name]]，
 Orderable = Convert.ToBoolean（request.Query [ columns [ + c +'] [orderable]]），
可搜索= Convert.ToBoolean（request.Query [ columns [ + c +] [可搜索]]）），
搜索=新搜索
 {
 Value = request.Query [ columns [ + c +] [search] [value]]，
 Regex = Convert.ToBoolean（request.Query [ columns [ + c + ;] [search] [regex]]）
} 
}） ; 
 c ++; 
} 
 
 var result = new DataTablesResult 
 {
 Draw = draw，
 Start = start，
 Length = length，
搜索=搜索，
订单=订单，
列=列
}; 
 
 bindingContext.Result = ModelBindingResult.Success（结果）; 
返回Task.CompletedTask; 
} 
} 
  

DtParameters

  [ModelBinder（BinderType = typeof（DataTableModelBinder））] 
公共类DataTablesResult 
 {
 public int Draw {get;组; } 
 public int Start {get;组; } 
 public int Length {组; } 
公共搜索搜索{组; } 
 public List< ColumnOrder>订单{get;组; } 
 public List< Column>列{get;组; } 
} 
 
公共类Search 
 {
 public string Value {get;组; } 
 public bool Regex {get;组; } 
} 
 
公共类列
 {
公共字符串Data {get;组; } 
公共字符串Name {get;组; } 
 public bool可搜寻{组; } 
 public bool可订购{get;组; } 
公共搜索搜索{组; } 
} 
 
公共类ColumnOrder 
 {
 public int Column {get;组; } 
公用字串Dir {get;组; } 
} 
  

构建和运行结果：

如您所见，我被卡在处理中。可能是什么问题？

在我进行调试时，您可以看到DRAW IS = 1：

当我将draw明确分配给1时，我得到一个消息表中没有数据：

url：" / Home / Data？start = 0&& length = 10" 不返回任何数据：

以下是调试时的 Longth 和 Start ：

查询：

pureData ：

解决方案

我已通过以下方法解决了此问题在我的 Startup.cs 类中添加 JsonSerializer 。这是我丢失的 code 的一行。

我在此处发布了解决方案：
ASP.NET Core 3.1中的数据表服务器端处理

I am using Datatable 1.10.21 in ASP.NET Core 3.1 and I am stuck on 'processing...'. I am catching exceptions should they occur but so far I haven't seen any exceptions. For reasons unknown to me, database records are not shown.

Could you spare a moment and take a closer look at my code to determine where I am getting it wrong and point it out. I appreciate your time and effort to solving this issue.

Here is my code:

My HTML Table:

@model IEnumerable<Users>
<div class="table-responsive">
    <table class="table table-bordered table-hover" id="myTable">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Id)</th>
                <th>@Html.DisplayNameFor(model => model.FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.LastName)</th>
                <th>@Html.DisplayNameFor(model => model.Country)</th>
                <th>@Html.DisplayNameFor(model => model.Gender)</th>
                <th>@Html.DisplayNameFor(model => model.Age)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Id)</th>
                <th>@Html.DisplayNameFor(model => model.FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.LastName)</th>
                <th>@Html.DisplayNameFor(model => model.Country)</th>
                <th>@Html.DisplayNameFor(model => model.Gender)</th>
                <th>@Html.DisplayNameFor(model => model.Age)</th>
            </tr>
        </tfoot>
    </table>
</div>

Model Class:

public class Users
{
    public string Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Country { get; set; }
    public string Gender { get; set; }
    public string Age { get; set; }
}

Datatable Initializer:

$(document).ready(function () {
    $('#myTable').DataTable(
        {
            // ServerSide Setups
            processing: true,
            serverSide: true,

            // Paging Setups
            paging: true,

            // Searching Setups
            searching: { regex: true },

            // Ajax Filter
            ajax: {
                url: "/Home/Data",
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                data: function (d) {
                    return JSON.stringify(d);
                }
            },
            // columns setups
            columns: [
                { data: "id" },
                { data: "firstname" },
                { data: "lastname" },
                { data: "country" },
                { data: "gender" },
                { data: "age" }
            ]
        });
});

Getting data as JSON:

[HttpGet]
        public async Task<IActionResult> Data(DataTablesResult tableParams)
        {
            try
            {
                var query = context.AspNetUsers.AsQueryable();

                var totalCount = await query.CountAsync();

                if (tableParams.Search != null)
                    query = query.Where(c => c.FirstName.Contains(tableParams.Search.Value)
                    || c.LastName.Contains(tableParams.Search.Value));
                //Other search queries goes here

                if (tableParams.Order.Count > 0)
                {
                    if (tableParams.Order[0].Dir == "asc")
                        query = query.OrderBy(c => EF.Property<string>(c, tableParams.Columns[tableParams.Order[0].Column].Name));
                    else
                        query = query.OrderByDescending(c => EF.Property<string>(c, tableParams.Columns[tableParams.Order[0].Column].Name));
                }
                //In this example multi order is disabled so we can order by any column dynamically

                var result = await query.AsNoTracking().Select(E => new { Count = query.Count(), E = E }).Skip(tableParams.Start).Take(tableParams.Length).ToListAsync();
                var pureData = result.Select(E => E.E);

                if (result.Count == 0)
                    return Ok(new { tableParams.Draw, recordsTotal = 0, recordsFiltered = 0, data = Enumerable.Empty<string>() });

                return Ok(new { tableParams.Draw, recordsTotal = totalCount, recordsFiltered = result.Select(c => c.Count).FirstOrDefault(), data = pureData });
            }
            catch (Exception ex)
            {
                ex.Message.ToString();

                throw;
            }
        }

Datatable ModelBinder Class:

public class DataTableModelBinder : IModelBinder
    {
        public Task BindModelAsync(ModelBindingContext bindingContext)
        {
            var request = bindingContext.HttpContext.Request;

            // Retrieve request data
            var draw = Convert.ToInt32(request.Query["draw"]);
            var start = Convert.ToInt32(request.Query["start"]);
            var length = Convert.ToInt32(request.Query["length"]);

            // Search
            var search = new Search
            {
                Value = request.Query["search[value]"],
                Regex = Convert.ToBoolean(request.Query["search[regex]"])
            };

            // Order
            var o = 0;
            var order = new List<ColumnOrder>();
            while (!StringValues.IsNullOrEmpty(request.Query["order[" + o + "][column]"]))
            {
                order.Add(new ColumnOrder
                {
                    Column = Convert.ToInt32(request.Query["order[" + o + "][column]"]),
                    Dir = request.Query["order[" + o + "][dir]"]
                });
                o++;
            }

            // Columns
            var c = 0;
            var columns = new List<Column>();
            while (!StringValues.IsNullOrEmpty(request.Query["columns[" + c + "][name]"]))
            {
                columns.Add(new Column
                {
                    Data = request.Query["columns[" + c + "][data]"],
                    Name = request.Query["columns[" + c + "][name]"],
                    Orderable = Convert.ToBoolean(request.Query["columns[" + c + "][orderable]"]),
                    Searchable = Convert.ToBoolean(request.Query["columns[" + c + "][searchable]"]),
                    Search = new Search
                    {
                        Value = request.Query["columns[" + c + "][search][value]"],
                        Regex = Convert.ToBoolean(request.Query["columns[" + c + "][search][regex]"])
                    }
                });
                c++;
            }

            var result = new DataTablesResult
            {
                Draw = draw,
                Start = start,
                Length = length,
                Search = search,
                Order = order,
                Columns = columns
            };

            bindingContext.Result = ModelBindingResult.Success(result);
            return Task.CompletedTask;
        }
    }

DtParameters:

[ModelBinder(BinderType = typeof(DataTableModelBinder))]
    public class DataTablesResult
    {
        public int Draw { get; set; }
        public int Start { get; set; }
        public int Length { get; set; }
        public Search Search { get; set; }
        public List<ColumnOrder> Order { get; set; }
        public List<Column> Columns { get; set; }
    }

    public class Search
    {
        public string Value { get; set; }
        public bool Regex { get; set; }
    }

    public class Column
    {
        public string Data { get; set; }
        public string Name { get; set; }
        public bool Searchable { get; set; }
        public bool Orderable { get; set; }
        public Search Search { get; set; }
    }

    public class ColumnOrder
    {
        public int Column { get; set; }
        public string Dir { get; set; }
    }

RESULT ON BUILD AND RUN:

As you can see I am stuck on processing. What could be the issue?

WHEN I DEBUG, YOU CAN SEE THAT DRAW IS = 1:

When I explicitly assign draw to 1, I get a message that there is no data in the table:

url: "/Home/Data?start=0&&length=10" returns no data:

Here is the Length and Start when debug:

query:

result:

pureData:

解决方案

I have fixed the issue by adding a JsonSerializer to my Startup.cs class. It was the single line of code I was missing.

I have posted the solution here: Datatables server-side processing in ASP.NET Core 3.1

这篇关于数据表版本1.10.21停留在ASP.NET Core 3.1中的``处理中''的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！