将datatables.net与服务器端Blazor应用程序一起使用_Blazor_Blazor Server Side

将datatables.net与服务器端Blazor应用程序一起使用

blazor

将datatables.net与服务器端Blazor应用程序一起使用,blazor,blazor-server-side,Blazor,Blazor Server Side,我正在尝试将datatables.net与我的服务器端Blazor应用程序一起使用，如有任何帮助，将不胜感激我已经尝试了一半以上提到的代码，但是，我遇到的问题是，当我在页面之间浏览时，某些UI元素（如分页）正在被复制下面是my_Host.cshtml文件 @page "/" @namespace MyApplication.Web.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = null;

我正在尝试将datatables.net与我的服务器端Blazor应用程序一起使用，如有任何帮助，将不胜感激

我已经尝试了一半以上提到的代码，但是，我遇到的问题是，当我在页面之间浏览时，某些UI元素（如分页）正在被复制

下面是my_Host.cshtml文件

@page "/"
@namespace MyApplication.Web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyApplication.Web</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />    

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/datatables/js/jquery.dataTables.min.js"></script>
    <link href="/lib/datatables/css/jquery.dataTables.min.css" rel="stylesheet" />

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">I seem to have resolved the repeating UI elements issue with the below approach however I'd be interested to know whether there is a better approach, actually, I'm sure there must be so perhaps the question should be how bad is the below approach?

_Host.cshtml now has the below added

<script src="~/scripts/JSInterop.js"></script>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/datatables/js/jquery.dataTables.min.js"></script>
<link href="/lib/datatables/css/jquery.dataTables.min.css" rel="stylesheet" />

@page/“
@命名空间MyApplication.Web.Pages
@addTagHelper*，Microsoft.AspNetCore.Mvc.TagHelpers
@{
布局=空；
}
MyApplication.Web
我似乎已经用下面的方法解决了重复UI元素的问题，但是我想知道是否有更好的方法，事实上，我确信一定有，所以也许问题应该是下面的方法有多糟糕
_Host.cshtml现在添加了以下内容
@inject Microsoft.JSInterop.IJSRuntime JSRuntime;

    <div id="@id">
        @ChildContent
    </div>

@code
{
    [Parameter]
    public bool Searchable { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private string id { get; set; } = "DataTable-" + Guid.NewGuid().ToString();


    protected override void OnParametersSet()
    {
        StateHasChanged();
        base.OnParametersSet();
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeAsync<string>("AddDataTable", new object[] { "#" + id + " table", Searchable });
        await base.OnAfterRenderAsync(firstRender);
    }
}

然后，我在页面上创建datatable时使用以下代码

名字
姓
访问级别
添加日期
@foreach（管理员中的var管理员）
{
@管理员Id
@administrator.LastName
@administrator.AccessLevel.GetDisplayName（）
@administrator.DateCreated.ToShortDateString（）
}

function AddDataTable(table, searching) {    
    $(table).DataTable({
        "searching": searching
    });    
}

<DataTable Searchable="true">
        <table class="table">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Access Level</th>
                    <th>Date Added</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var administrator in Administrators)
                {
                    <tr>
                        <td>@administrator.Id</td>
                        <td>@administrator.LastName</td>
                        <td>@administrator.AccessLevel.GetDisplayName()</td>
                        <td>@administrator.DateCreated.ToShortDateString()</td>
                        <td>
                            <a href="@($"Admin/EditAdministrator/{administrator.Id}")" class="btn btn-primary table-btn">
                                Edit
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </DataTable>