我需要更新 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组件）

（仍然不是我猜的最漂亮的解决方案。欢迎提出建议......）