JQuery 数据表在我的 Blazor 和 .NET 核心项目中不起作用答案

【问题标题】：JQuery data table not working in my Blazor and .NET core projectJQuery 数据表在我的 Blazor 和 .NET 核心项目中不起作用
【发布时间】：2019-11-17 19:10:12
【问题描述】：

我正在尝试在我的 blazor 项目中使用 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 文件中，我像这样连接 ID：

<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

不知何故，它不会从 JQuery 数据表中读取我的 CDN 文件。

有人能指出我正确的方向吗？

【问题讨论】：

标签： c# jquery html asp.net-core razor

【解决方案1】：

Sine ASP.NET Core 5.0 你可以directly access jQuery plugins like DataTables 无需全局定义包装函数：

@code {
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            var jQuery = await JSRuntime.InvokeAsync<IJSObjectReference>("$", "table");
            await jQuery.InvokeVoidAsync("DataTable");
        }
    }
}

【讨论】：

【解决方案2】：

当您离开页面时，可能会留下一些 DataTable 元素。您需要使用 IDispose 删除所有元素。

如需完整教程，请查看这篇文章：

How to add Data Tables to Blazor

【讨论】：

【解决方案3】：

我想通了：

在我的 _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

【讨论】：