将datatables.net与服务器端Blazor应用程序配合使用 [英] Using datatables.net with server-side Blazor application
本文介绍了将datatables.net与服务器端Blazor应用程序配合使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将datatables.net与我的服务器端Blazor应用程序一起使用，如有任何帮助，将不胜感激。
我已经尝试了中途提到的代码https://datatables.net/forums/discussion/56389/datatables-with-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">🗙</a>
</div>
<script>
function AddDataTable(table) {
$(document).ready(function () {
$(table).DataTable({
"searching": false
});
});
}
</script>
<script>
function RemoveDataTable(table) {
$(document).ready(function () {
$(table).DataTable().destroy();
});
}
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
下面是剃须刀组件的代码
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using MyApplication.Shared.Entities;
using MyApplication.Web.Interfaces;
namespace MyApplication.Web.Pages.Admin
{
public partial class ListAdministrators
{
[Inject]
public IAdministratorDataService AdministratorDataService { get; set; }
[Inject]
public NavigationManager NavigationManager { get; set; }
public List<Administrator> Administrators { get; set; }
protected override async Task OnInitializedAsync()
{
Administrators = (await AdministratorDataService.GetAll()).ToList();
}
protected void NavigateToAddAdministrator()
{
NavigationManager.NavigateTo("/Admin/AdministratorEdit");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<object>("AddDataTable", "#dataTable");
}
}
}
需要指出的是，在https://datatables.net/forums/discussion/56389/datatables-with-blazor上，他们有我在上面的代码中拥有的RemoveDataTable函数，但是，我不确定如何在单击按钮的外部调用此函数。
第一次加载-一切正常
浏览到主页-分页UI元素仍显示
推荐答案
我似乎已经用下面的方法解决了重复的UI元素问题，但是我很想知道是否有更好的方法，实际上，我相信肯定会有，所以也许问题应该是下面的方法有多糟糕？
_Host.cshtml现在添加了以下内容
<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" />
已创建新组件DataTable.razor
@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);
}
}
创建了一个简单的JS文件JSInterop.js
function AddDataTable(table, searching) {
$(table).DataTable({
"searching": searching
});
}
然后我在页面上创建DataTable时使用以下代码
<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>
这篇关于将datatables.net与服务器端Blazor应用程序配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
