我需要更新 Blazor 頁面以在查詢字符串更改時更新

Question

我有一個名為 NavBar.razor 的 Blazor 組件，它顯示帶有標簽列表的 Radzen 導航菜單。 當用戶單擊標簽 (RadzenPanelMenuItem) 時，組件 OrderBrowser.razor 被加載到菜單旁邊的頁面中。 查詢字符串讓 OrderBrowser.razor 知道選擇了什么標簽。 （請參閱下面的 OnInitializedAsync 方法。）該組件將關聯的訂單加載到網格中。

這在用戶第一次單擊標簽時工作正常，但當他們單擊不同的標簽時，即使 uri 發生變化，OnInitializedAsync 方法也不會執行。 所以我添加了一個事件處理程序以在 uri 更改時強制重新加載。 這行得通，但由於某種原因，它似乎重新加載了兩次，導致第二次重新加載時出現不希望的閃爍。

有誰知道更好的方法嗎？ 謝謝。

來自 NavBar.razor 的代碼：

@foreach (var item in TagsAndCounts)
{
    <Radzen.Blazor.RadzenPanelMenuItem 
        Text="@(item.Tag + " (" + item.Count + ")")"
        Path="@("orders/browse?tag=" + item.Tag)" />
}

來自 OrderBrowser.razor 的訂單網格：

<OrderGrid Data="@orders" AllowPaging="false" />

來自 OrderBrowser.razor 的代碼：

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();

    NavManager.LocationChanged += NavManager_LocationChanged;

    var uri = NavManager.ToAbsoluteUri(NavManager.Uri);

    if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("tag", out var tag))
    {
        orders = await orderService.GetOrdersForTagAsync(tag);
    }
}

private void NavManager_LocationChanged(object sender, LocationChangedEventArgs e)
{
    NavManager.NavigateTo(NavManager.Uri, forceLoad: true);
}

Answer 1

使用此事件

[Parameter]
[SupplyParameterFromQuery]
public string? Page { get; set; } = "0";

    protected override void OnParametersSet()
    {
     //Fire your Code her
    }

Answer 2

我找到了解決方案。 它仍然有點黑客，但它似乎工作。 如果有人有更好的解決方案，請告訴我。 我只是更改了事件處理程序以獲取新的 URL 並更新頁面，而不是強制重新加載。

private async void NavManager_LocationChanged(object sender, LocationChangedEventArgs e)
{
    orders = await orderService.GetOrdersForTagAsync(tag);
    var index = NavManager.Uri.LastIndexOf("/");
    tag = NavManager.Uri.Substring(index + 1);
    if (tag != "open_orders")
    {
       StateHasChanged();
    }
}

Answer 3

當您 go 來自： yourUrl/tag/tagname1並單擊以鏈接yourUrl/tag/tagname2時，它不會觸發OnInitializedAsync ，因為未創建新頁面。 這是有意的和正確的行為。 但有點混亂。

您可以利用 .net6 引入的SupplyFromQueryParameter屬性的新功能，該屬性將根據查詢字符串更改其值。

 [Parameter, SupplyParameterFromQuery(Name = "tag")] public string Tag { get; set; } = "";

現在您可以在Tag屬性的 Seeter 中發揮作用。 或者，如果您需要在 setter 中調用異步方法（這不是一個好習慣），您可以使用OnParametersSet方法。 它在參數更改后立即調用。 因此，您還需要一種機制來檢查標記參數是否已更改（因為每次 *some* 參數已更改時都會調用它）

bool tagUpdated = true;
string _tag ="";
[Parameter,SupplyParameterFromQuery] public string Tag { get => _tag; set { if (value != _tag) { _tag = value; tagUpdated = true; } } } 

protected override async Task OnParametersSetAsync()
{
if (tagUpdated)
    {
    tagUpdated = false;
    await YourAsyncCallAndOtherMagic();
    }
}

請注意， SupplyFromQueryParameter僅適用於頁面（帶有@page指令的.razor組件）

（仍然不是我猜的最漂亮的解決方案。歡迎提出建議......）