Bootstrap Blazor Table 組件（二）手動刷新組件數據

原文鏈接：https://www.cnblogs.com/ysmc/p/16128206.html

官網連接：https://www.blazor.zone

很多小伙伴在使用 Bootstrap Blazor Table組件的時候，都會有這樣的一個需求：

　　我怎么在代碼中重新加載Table組件的數據？

　　然后小伙伴們都不約而同的想方設法去調用 OnQueryAsyc 函數，結果都卡在了 QueryPageOptions options 這個參數怎么傳的問題上，直接 new 一個吧，是一個好想法，但是這么調用跟 Table 組件是一點關系沒有，一樣無法達到 “重新加載Table組件的數據”的期望

private Task<QueryData<ITem>> OnQueryAsync(QueryPageOptions options)
{
    // 設置記錄總數
    var total = Items.Count();

    return Task.FromResult(new QueryData<ITem>()
    {
        Items = Items,
        TotalCount = total
    });
}

　　那我們需求怎么做才能達到 “重新加載Table組件的數據” 這個期望呢？其實非常簡單，因為我們是要刷新 Table 組件的數據，那我們首先肯定是需要拿到 Table 組件這個實例，這里我們用到了 @ref，這個是 razor 的東西，不清楚的小伙伴可以先去看看下面這兩個鏈接：

ASP.NET Core 的 Razor 語法參考 | Microsoft Docs

使用 Blazor 生成可重用的 UI 組件 | Microsoft Docs

 

下面是完整的代碼展示

razor頁面

<Button OnClick="@OnRefreshTableAsync">刷新Table</Button>

<Table TItem="TItem"
       @ref="@Table"
       AutoGenerateColumns="true"
       OnQueryAsync="@OnQueryAsync">
</Table>

 

razor.cs 

主要就是 OnRefreshTableAsync 函數

[NotNull]
private Table<TItem>? Table { get; set; }

private async Task OnRefreshTableAsync()
{
    await Table.QueryAsync();
}

private Task<QueryData<TItem>> OnQueryAsync(QueryPageOptions options)
{
    var total = Items.Count();

    return Task.FromResult(new QueryData<TItem>()
    {
        Items = Items,
        TotalCount = total
    });
}

寫在最后

　　希望大佬們看到這篇文章，能給項目點個star支持下，感謝各位！

star流程：

1、訪問點擊項目鏈接：BootstrapBlazor   

2、點擊star，如下圖，即可完成star，關注項目不迷路：

 

另外還有兩個GVP項目，大佬們方便的話也點下star唄，非常感謝：

　　BootstrapAdmin 項目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 項目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群（QQ）歡迎加群討論

　　     BA & Blazor ①（795206915）　　　　　　　   BA & Blazor ②（675147445）