如何在 ASP.net Core 中实现 dataTables 服务器端分页/搜索/排序

Question

我正在尝试从 jQuery Datatable 的服务器端执行搜索、排序、分页，我编写了以下代码，但是我无法获取用于排序、从 datatble 搜索到我的 MVC 控制器的参数。这是我的代码。

我的数据表看起来像...

<script>
    $(document).ready(function () {
        $("#newT").DataTable({
            ajax: {
                url: '@Url.Action("Prods", "NewTest")',
                method: 'post',
                dataType: 'json',
                dataSrc : ''
            },
            columns: [
                {
                    title: 'Id',
                    
                    data: 'id',
                    searchable: false,
                    sortable: false,
                    visible: false
                },
                {
                    title: 'Name',
                   
                    data: 'name',
                    render: function (data, type, row) {
                        return '<a id="' + row.id + '" href="javascript:void(0)" onclick="detailsClick(this)">' + data + '</a>'

                    }
                },
                
                ....Other Columns....
            ],
            serverSide: true,
            processing: true,
            language: {
                processing : "Please Wait ..."
            }
        })
    })
    </script>

这是我的 MVC 控制器

public IActionResult Prods(){
int draw = Convert.ToInt32(Request.Query["draw"]);
            int StartIndex = Convert.ToInt32(Request.Query["start"]);
            int PageSize = Convert.ToInt32(Request.Query["length"]);
            int SortCol = Convert.ToInt32(Request.Query["order[0][column]"]);
            string SortDir = Request.Query["order[0][dir]"];
            string SearchField = Request.Query["search[value]"].FirstOrDefault()?.Trim();
            
            ..... Further Implementation .....
             
            return new JsonResult(new
            {
                data = filteredData,
                draw = Request.Query["draw"],
                recordsFiltered = filteredData.Count(),
                recordsTotal = 13
            }
                    );
}
            

我在控制器中得到空值，请帮我解决这个问题。

Answer 1

NuGet 中已经有几个针对 jquery 数据表的 .NET Core 实现。它具有将数据表请求连接到 MVC 所需的所有模型和绑定。

我用过这个： https: //www.nuget.org/packages/DataTables.AspNet.AspNetCore/。

以下是在 ASP.NET Core MVC 应用程序中使用它的方法：

1.安装DataTables.js

使用您最喜欢的客户端包管理器安装DataTables.js库（及其依赖项 jQuery）。DataTables 还带有几种样式，因此它们将有自己的包。你也需要得到它。

我npm直接在里面使用并完成了它package.json：

{
    "version": "1.0.0",
    ...,
    "dependencies": {
        ...,
        "jquery": "3.5.1",
        "datatables.net": "1.10.21",
        "datatables.net-bs4": "1.10.21"
    },
    "devDependencies": {
        ...
    }
}

这些包将被拉入node_modules项目中的隐藏文件夹中。

2.将静态文件移至wwwroot

在 ASP.NET Core MVC 应用程序中，为了提供任何 JavaScript 或 css 文件，您需要app.UseStaticFiles()在 Startup 类中注册，并使用任何任务运行程序将文件移动到 wwwroot 文件夹。

{
    "version": "1.0.0",
    ...,
    "dependencies": {
        ...,
        "jquery": "3.5.1",
        "datatables.net": "1.10.21",
        "datatables.net-bs4": "1.10.21"
    },
    "devDependencies": {
        ...
    }
}

我用过gulp，但你可以用你想要的任何东西。我的项目中只有一个gulpfile.js，Visual Studio 的任务运行程序将拾取它：

namespace DL.NetCore.EmptySolution.Web.UI
{
    public class Startup
    {
        ...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            ...
            app.UseStaticFiles();
            ...
        }
    }
}

我进行了自定义设置，因为我想更改排序图标并添加搜索文件管理器延迟扩展，因此我有自己的自定义设置dataTables.bootstrap4.custom.js，并且assets/css/dataTables.bootstrap4.custom.css来自我的资产文件夹。

但对于基本安装，您只需要：

• 脚本：
  • node_modules/jquery/dist/jquery.js
  • node_modules/datatables.net/js/jquery.dataTables.js
  • node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js
• 款式：
  • node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css

一旦您在 wwwroot 中拥有这些静态文件，您就可以将这些脚本和样式包含在您想要运行 DataTables.js 库的任何页面中：

@section css {
    <!-- jquery.dataTables styles -->
    <environment include="development">
        <link rel="stylesheet" href="~/css/jquery.dataTables.css" />
    </environment>
    <environment exclude="development">
        <link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
    </environment>
}

@section scripts {
    <!-- jquery.dataTables scripts -->
    <environment include="development">
        <script src="~/js/jquery.dataTables.js"></script>
    </environment>
    <environment exclude="development">
        <script src="~/js/jquery.dataTables.min.js"></script>
    </environment>

    ...

注意：在 中gulpfile.js，您可以看到我将脚本文件捆绑到 1 个名为 的单个文件中jquery.dataTables.js，并将样式捆绑到 1 个名为 的单个文件中jquery.dataTables.css。这就是为什么在页面上我只引用这两个文件。

3.安装DataTables NuGet包

右键单击您的项目并打开 NuGet 管理器。搜索“DataTables.AspNet.AspNetCore”并单击“安装”。它也会自动下载其依赖项。

4. 注册DataTables NuGet包

在使用 NuGet 包之前，您需要注册它。这可能是您的错误的来源：

const bundleAndMinify = (srcFiles, destFileName, destPath, minifier) => {
    src(srcFiles)
        .pipe(concat(destFileName))
        .pipe(dest(destPath))
        .pipe(minifier())
        .pipe(rename({ suffix: '.min' }))
        .pipe(dest(destPath));
};

const copyDatatablesScripts = done => {
    bundleAndMinify(
        [
            'node_modules/datatables.net/js/jquery.dataTables.js',
            'assets/js/dataTables.bootstrap4.custom.js'
        ],
        'jquery.dataTables.js',
        'wwwroot/js',
        terser
    );

    done();
};

const copyDatatablesStyles = done => {
    bundleAndMinify(
        [
            'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
            'assets/css/dataTables.bootstrap4.custom.css'
        ],
        'jquery.dataTables.css',
        'wwwroot/css',
        cssmin
    );

    done();
};

它将为您添加模式绑定，这样您就不必自己手动绑定那些许多 DataTables 请求参数。

5. 祝您使用愉快！

现在，您可以简单地声明任何 MVC 操作，该操作用作来自 DataTables.js 库的 AJAX 调用（带IDataTablesRequest参数）。这将捕获诸如 等之类的内容Request.Query["start"]。Request.Query["length"]感谢 DataTables NuGet 包！

处理完数据后，您只需创建一个DataTablesJsonResult()返回给客户端的数据：

@section css {
    <!-- jquery.dataTables styles -->
    <environment include="development">
        <link rel="stylesheet" href="~/css/jquery.dataTables.css" />
    </environment>
    <environment exclude="development">
        <link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
    </environment>
}

@section scripts {
    <!-- jquery.dataTables scripts -->
    <environment include="development">
        <script src="~/js/jquery.dataTables.js"></script>
    </environment>
    <environment exclude="development">
        <script src="~/js/jquery.dataTables.min.js"></script>
    </environment>

    ...

您可以看到 DataTables.js 从客户端发送的所有信息都被捕获并转换IDataTablesRequest为您可以获取您需要的任何信息：

@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>
...
<div class="table-responsive">
    <table id="table-products" class="table">
        ...
    </table>
</div>
...

@section scripts {
    ...

    <script type="text/javascript">
        $(function() {
            $('#table-products').dataTable({
                serverSide: true,
                ajax: {
                    url: '@Url.Action("getList", "product", new { area = "" })',
                    type: 'POST'
                },
                processing: true,
                order: [1, 'asc'],
                columns: [...]
            }).fnSetFilteringDelay(1000);
        });
    </script>
}

截图

工作演示

https://github.com/davidliang2008/DL.NetCore.EmptySolution

奖励：应用 DataTables 过滤和排序的扩展方法

我还针对IQueryable集合创建了 2 个扩展方法来处理 DataTables.js 中的过滤和排序：

namespace DL.NetCore.EmptySolution.Web.UI
{
    public class Startup
    {
        ...

        public void ConfigureServices(IServiceCollection services)
        {
            services
                .AddRouting(options => options.LowercaseUrls = true)
                .AddControllersWithViews();

            services.RegisterDataTables();
        }
    }
}

它们非常方便从 DataTables.js 中获取可搜索和可排序的列，动态构建表达式树并应用于您的源集合！

抱歉，这太长了......

Answer 2

我无法获取用于排序、从数据表搜索到 MVC 控制器的参数。

如果你使用F12开发者工具Network来捕获action方法的请求NewTest/Prods，你会发现服务器端处理相关的数据是通过表单数据传递的，而不是在url的查询字符串部分。

要在控制器操作中获取这些数据，您可以尝试：

int draw = Convert.ToInt32(Request.Form["draw"]);
int StartIndex = Convert.ToInt32(Request.Form["start"]);
int PageSize = Convert.ToInt32(Request.Form["length"]);
int SortCol = Convert.ToInt32(Request.Form["order[0][column]"]);
string SortDir = Request.Form["order[0][dir]"];
string SearchField = Request.Form["search[value]"].FirstOrDefault()?.Trim();

测试结果