Blazor:当我按F5刷新时，F5消失了(问题: Datatables.net)

Question

我有一个页面，它使用来自Datatables.net的可搜索表模板。在重新呈现表的OnAfterRenderAsync过程中，在控制台中，您可以看到它与服务器断开连接，然后在2秒后重新连接。

看来，在这种断开期间，NavMenu中的控件会消失，尽管OnInitializedAsync会重新启动而不是。如果您正常导航，则菜单选项仍然可见。如果您使用F5或refresh按钮，这实际上是正确的。如果我禁用OnAfterRenderAsync方法，菜单就不会消失.最后，如果我点击浏览器中的后退按钮并使用F5刷新，导航菜单将重新出现。

如果允许访问，则使用以下方法确定其值：

@inject Blazored.LocalStorage.ILocalStorageService oLocalStore

和

IsManager = await oLocalStore.GetItemAsync<string>("Key tag here");

然后，控件位于其中：

 @if (!string.IsNullOrEmpty(IsManager))
 {
      @if (IsManager.ToUpper() == "TRUE")
      {
           <div class="btn-group">
                <button type="button" class="btn btn-primary">Self Service</button>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                        <span class="sr-only">Toggle Dropdown</span></button>
                <div class="dropdown-menu">
                     <a @onclick="collapsedNavBar" class="dropdown-item" href="/PasswordReset"><span class="oi oi-reload" aria-hidden="true"></span> Password Reset</a>                                        
                     <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Something else here</a>
                     <div class="dropdown-divider"></div>
                     <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Manager Notes</a>
                     <a @onclick="collapsedNavBar" class="dropdown-item" href="#">Company Policies</a>
                 </div>
           </div>
      }
 }

在使用datatables.net模板的页面上，OnAfterRenderAsync()如下所示：

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

是否有一个与Datatables.net的解决办法，可以使它正常工作在Blazor服务器端？或者，对于分页、排序和搜索，有可靠的替代方法吗？

Answer 1

使用Radzen的网格解决方案实现了即时渲染模式。

UI：

<RadzenGrid AllowPaging="true" PageSize="10" AllowSorting="true" Data="@PreOrders" TItem="PreOrder" AllowFiltering="true" AllowColumnResize="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" style="max-width:580px">
    <Columns>
        <RadzenGridColumn TItem="PreOrder" Context="preOrder" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="60px">
            <Template Context="preOrder">
                <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="open_with" Size="ButtonSize.Small" Class="m-1" Click="@(args => GetPreOrderByID(preOrder))" @onclick:stopPropagation="true">
                </RadzenButton>
            </Template>
            <EditTemplate Context="preOrder">
                <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="open_with" Size="ButtonSize.Small" Class="m-1" Click="@(args => GetPreOrderByID(preOrder))">
                </RadzenButton>
            </EditTemplate>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="PreOrder" Property="PreOrderTemplateID" Title="ID" Width="80px"></RadzenGridColumn>
        <RadzenGridColumn TItem="PreOrder" Property="TemplateInfo" Title="Template Info#"></RadzenGridColumn>
        <RadzenGridColumn TItem="PreOrder" Context="preOrder" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="60px">
            <Template Context="preOrder">
                <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="highlight_off" Size="ButtonSize.Small" Class="m-1" Click="@(args => DelPreOrder(preOrder))" @onclick:stopPropagation="true">
                </RadzenButton>
            </Template>
            <EditTemplate Context="preOrder">
                <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="highlight_off" Size="ButtonSize.Small" Class="m-1" Click="@(args => DelPreOrder(preOrder))">
                </RadzenButton>
            </EditTemplate>
        </RadzenGridColumn>
    </Columns>

</RadzenGrid>

代码：

@code {
    private List<string> Makes { get; set; }
    private List<string> Models { get; set; }
    private List<string> Trims { get; set; }
    private List<string> CarClasses { get; set; }
    private List<string> EngineTypes { get; set; }
    private IEnumerable<PreOrder> PreOrders { get; set; }
    private PreOrder PO = new PreOrder();
    private string StatusMessage = "";
    protected override async Task OnInitializedAsync()
    {
        Makes = _fleet.GetVehicleMakes();
        CarClasses = _fleet.GetVehicleCarClasses();
        EngineTypes = _fleet.GetVehicleEngineTypes();
        PO.Make = "";
        PreOrders = await Task.Run(() => _fleet.GetTemplates());   
        StatusMessage = "Data Loaded Successfully";
    }
    private async void GetPreOrderByID(PreOrder preOrder)
    {
        PO = _fleet.GetTemplateByID(preOrder.PreOrderTemplateID);    
        Models = _fleet.GetVehicleModels(PO.Make);
        Trims = _fleet.GetVehicleTrims(PO.Make);
    }
    private async void DelPreOrder(PreOrder preOrder)
    {        
        try
        {
            _fleet.DeleteTemplate(preOrder.PreOrderTemplateID);
            PreOrders = _fleet.GetTemplates();   
            StatusMessage = "PreOrder Template: " + preOrder.PreOrderTemplateID.ToString() + " Deleted Successfully at: " + DateTime.Now;
            await InvokeAsync(() =>
            {
                StateHasChanged();
            });            
        }
        catch(Exception ex)
        {
            StatusMessage = ex.InnerException.ToString();
        }
    }
    private async void AddPreOrders()
    {
        try
        {
            string User = await oLocalStore.GetItemAsync<string>("User");
            _fleet.AddTemplate(PO, User);
            StatusMessage = "Data Added Successfully at: " + DateTime.Now;
            await InvokeAsync(() =>
            {
                StateHasChanged();
            });         
        }
        catch(Exception ex)
        {
            StatusMessage = ex.InnerException.ToString();
        }
    }       
}

现在，可以使用任何方法多次刷新页面，导航菜单也不再消失，因为没有客户端的重新呈现。