在Visual Studio Razor页面C＃中使用DataTables.net

如何解决在Visual Studio Razor页面C＃中使用DataTables.net

我试图在使用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>

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

@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>

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

解决方法

以下是默认_Layout.cshtml文件中的代码段：

<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 -script添加到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。

在Visual Studio Razor页面C＃中使用DataTables.net

如何解决在Visual Studio Razor页面C＃中使用DataTables.net

解决方法

相关推荐