Блог

Главная - Вопросы по программированию - Использование DataTables.net в Visual Studio Razor Pages (C #)

Использование DataTables.net в Visual Studio Razor Pages (C #)

#c# #html #css #razor #datatables

#c# #HTML #css #razor #таблицы данных

Вопрос:

Я пытаюсь использовать js-аддон DataTables из DataTables.net в моем проекте, который использует страницы Razor. Однако он просто не хочет работать, и я не могу понять, почему. Я настроил его в 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>

введите описание изображения здесь

Как вы можете видеть, две программы очень похожи, просто синтаксис немного отличается. Есть ли у кого-нибудь идеи о том, как это исправить?

Комментарии:

1. Вы видите какие-либо ошибки в консоли при загрузке страницы Razor? Я заметил, что вы смешиваете http и https в своих ресурсах. Возможно, посмотрите, сможете ли вы получить DataTables from https ??

Ответ №1:

Вот фрагмент из файла _Layout.cshtml по умолчанию:

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

<footer class="border-top footer text-muted">
    <div class="container">
        amp;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)

Редактируемое представление вводится в конечный HTML-файл при @RenderBody() вызове. Однако это выше нескольких сценариев в нижней части файла.

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

Или вы можете оставить представление как есть и удалить jQuery из _Layout.cshtml.