3

我读过这篇文章

我正在从 MVC .Net Core 迁移到 Blazor。我将Datatable与 MVC 一起使用，但我想重用它。但我正在使用数据表中的 ajax 函数。这里的JS代码：

function AddDataTable(elementName, controller, columns, columnDefs, actionMethod = "/Search") {
    var table = $(elementName).DataTable(
        {
            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
            "searching": true, 
            "processing": true, 
            "serverSide": true,
            "filter": true, 
            "orderMulti": true, 
            "pageLength": 10,
            "pagingType": "simple_numbers",
            "ajax": {
                "url": controller + actionMethod,
                "type": "POST",
                "datatype": "json",
                "error": function (xhr, error, thrown) {
                    if (xhr.status === 405) {
                        window.location.href = urlBase + "StatusCode/" + xhr.status;
                    }
                    return EmptyTable(elementName, controller, columns, columnDefs);
                },
            },
            "columns": columns,
            "columnDefs": columnDefs
        }
    );
    return table;
}

API（C# .Net 核心）

[HttpPost]
[Route("Datatable")]
public IActionResult Search(string start, string length, string sortColumn, string sortColumnDir, string searchValue, string draw = null)
        {
            try
            {  
                int pageSize = length != null ? Convert.ToInt32(length) : 0;
                int skip = start != null ? Convert.ToInt32(start) : 0;
                int recordsTotal = 0;

                var list= _context.Entity;

                if (!(string.IsNullOrEmpty(sortColumn) && !string.IsNullOrEmpty(sortColumnDir)))
                {
                    list= list.OrderBy(sortColumn + " " + sortColumnDir);
                }

                List<Entity> data;
                if (!string.IsNullOrEmpty(searchValue))
                {
                    list= list.Where(m => m.property.Contains(searchValue));  
                    recordsTotal = list.Count();
                }
                else
                {
                    recordsTotal = list.Count();
                }
                data = list.Skip(skip).Take(pageSize).ToList();

                return Ok(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });

            }
            catch (Exception ex)
            {
                return Conflict();
            }
        }

在我的 Blazor 应用程序中，我移动了脚本并在这篇文章中实现了代码，它可以工作，但它首先调用我的所有数据，然后只在客户端进行过滤、排序和搜索。我想实现一种从 Blazor 调用它的方法

实际上，在我的 Blazor 应用程序上，只需以这种方式调用 Datatable：

protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeAsync<string>("AddDataTable", new object[] { "#" + id + " table", Searchable });
        await base.OnAfterRenderAsync(firstRender);
    }

我在 Blazor 应用程序中的脚本

function AddDataTable(table, searching) {
    $(table).DataTable({
        "searching": searching
    });
}

有没有办法重用它？

4

0 回答 0