Блог

Я пытаюсь использовать Blazor и DataTables.net компонент для добавления функций сортировки в таблицу. Только следующий синтаксис позволил мне использовать взаимодействие Javascript в Blazor:

datatable.js

 window.methods = {
    startDataTable: function () {
        $(document).ready(function () {
            $('#table').DataTable();
        });
    },
    showAlert: function () {
        alert("waht up");
    }
}
 

Функция showAlert выполняется, когда я вызываю ее из компонента Blazor. Но если я использую функцию startDataTable, ничего не происходит. Чего-то не хватает?

Список.razor

  @if (!@ToggleList)
        {
            <table id="table" data-toggle="table" class="table table-responsive" data-sortable="true">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>State</th>
                        <th data-sortable="true">Graduates</th>
                        <th data-sortable="true">Exams</th>
                        <th data-sortable="true">Exams finished</th>
                        <th data-sortable="true">Percentage</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in States)
                    {
                        <tr>
                            <td>@item.Icveie</td>
                            <td @onclick="() => showCz(item.Icveie)">@item.Cdesie</td>
                            <td>@item.Ucn</td>
                            <td>@item.Exa_pre</td>
                            <td>@item.Exa_acre</td>
                            <td>@item.Porc_acre</td>
                        </tr>
                    }
                </tbody>
            </table>
        }

    protected override async Task OnInitializedAsync()
    {
       await JSRuntime.InvokeVoidAsync("methods.showAlert");
    }
 

Index.cshtml

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="../js/datatable.js"></script>
 

Я использую Blazor с ASP.NET Ядро 3.1. Мое намерение состоит в том, чтобы использовать DataTables.net компонент для добавления дополнительных функций в таблицу. Есть предложения?

Теоретически, я думаю, стоило бы взглянуть на OnAfterRenderAsync(bool firstrender)

Из того, что я прочитал, JS отображается последним и поэтому не может быть использован OnInitializedAsync .

Документы MS описывают это здесь:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#after-component-render

Из документации, Use this stage to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.

*** Отказ от ответственности, я не смог заставить это работать для моего приложения. Я мог заставить JS работать только в рамках действия после рендеринга, такого как нажатие кнопки. Но, похоже, MS хочет, чтобы мы пошли, чтобы запустить JS при загрузке страницы. Поэтому я только надеюсь, что это укажет вам правильное направление.

Примечание: Кроме того, постарайтесь отказаться от JS, где сможете. У Blazor должны быть инструменты для выполнения того, что делает JS.