在 Visual Studio Razor 页面中使用 DataTables.net (C#)答案

【问题标题】：Using DataTables.net in Visual Studio Razor Pages (C#)在 Visual Studio Razor 页面中使用 DataTables.net (C#)
【发布时间】：2020-10-01 19:26:00
【问题描述】：

我正在尝试在我的一个使用 Razor Pages 的项目中使用来自 DataTables.net 的 DataTables js 插件。但是，它只是不想工作，我不知道为什么。我在 VS Code 中设置它来测试它，它在测试中工作得很好。这是代码和输出的屏幕截图：

<html>
    <head>
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#myTable').DataTable();
            });
        </script>
    </head>
    <body>
        <table id="myTable">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

但是，当我尝试在 VS 2019 中使用 Razor Pages 做同样的事情时，什么也没有发生，它只是打印未格式化的表格。这是我的代码和屏幕截图。

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#myTable').dataTable();
    });
</script>

<table id="myTable">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

如您所见，这两个程序非常相似，只是语法略有不同。有人对如何解决这个问题有任何想法吗？

【问题讨论】：

加载 Razor 页面时是否在控制台中看到任何错误？我注意到您在资源中混合了http 和https。也许看看你能不能从https得到DataTables？？

标签： c# html css razor datatables

【解决方案1】：

这是来自默认 _Layout.cshtml 文件的 sn-p：

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2020 - RazorPages.Test - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
</footer>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)

当@RenderBody() 被调用时，您正在编辑的视图会被注入到最终的 HTML 文件中。但是，这在文件底部的少数脚本之上。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

列表中的第一个脚本是另一个 JQuery 实例。这意味着在生成的 HTML 文件中，您将两次加载 JQuery。当 JQuery 的第二个实例被加载时，它正在清除 DataTables -脚本添加到 JQuery 对象的附加函数，这就是表未按预期加载的原因。

要解决此问题，您可以在 Razor 部分的视图中加载脚本。

@section Scripts
{
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
}

或者，您可以保持视图不变并从 _Layout.cshtml 中删除 JQuery。

【讨论】：