Таблица данных JQuery не работает в моем базовом проекте Blazor и .NET - PullRequest
Новая
       22

Таблица данных JQuery не работает в моем базовом проекте Blazor и .NET

0 голосов
/ 08 июля 2019

Я пытаюсь использовать datatable JQuery в своем проекте блейзора. Я использую файлы CDN для загрузки фреймворка. Это мой _Host.cshtml файл: 

@page "/"
@namespace Blazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor</title>
    <base href="~/" />
    <environment include="Development">
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="css/bootstrap/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
    </environment>
    <link href="css/site.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.css" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>
            ())
        </App>
        <script src="_framework/blazor.server.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#carTable').DataTable();
            });
        </script>
</body>
</html>

И в моем CarData.razor файле я подключаю идентификатор так: 

<table id="carTable" class="display" style="width:100%">

Когда я запускаю приложение, оно не загружает фреймворк. Я получаю ошибку no в моей консоли.

Я читал о взаимодействии Javascript в этой документации:

https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0

Почему-то он не читает мои файлы CDN из таблицы данных JQuery.

Может ли кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 08 июля 2019

Я понял это:

В моем _Host.cshtml У меня есть этот код: 

 <script>
            function DataTable() {
                $(document).ready(function () {
                    $('#carTable').DataTable();
                });
            }
        </script>

Тогда в моем CarData.razor я называю этот метод так: 

 protected override async Task OnInitAsync()
 {

        await JSRuntime.InvokeAsync<object>("DataTable");
 }

Не забудьте добавить библиотеку на свою страницу: 

@inject IJSRuntime JSRuntime
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...