刷新 Blazor 页面答案

【问题标题】：refresh Blazor page刷新 Blazor 页面
【发布时间】：2021-12-31 05:01:19
【问题描述】：

在 .NET 6 的 Blazer 服务器端项目中，我在以下页面：

https: //localhost: 7252/Product/a3620f82-7cba-473c-9273-1cf300a181eb

我在这个页面上有一个 NavLink 指向上面完全相同的 URL。但是当我点击该方法时，页面没有显示任何反应，也没有刷新或更新。我该怎么办？

我的代码示例：

@page "/Product/{Id:guid}"
@using Application.ProductGalleries.Queries
@using Application.Products.Queries
@using ViewModels.ProductVariants
@using ViewModels.ProductVariantsDetails
@using ViewModels.Products
<div class="col-12 px-0">
                        <h1>
                            <NavLink href="@($"/Product/a3620f82-7cba-473c-9273-1cf300a181eb")">@Model.ProductName</NavLink>
                            </h1>
                        <p>دسته بندی : @Model.CategoryName<span> برند: @Model.BrandName</span></p>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><NavLink href="/">صفحه نخست</NavLink></li>
                                <li class="breadcrumb-item"><NavLink href="/Products">@Model.CategoryName</NavLink></li>
                                <li class="breadcrumb-item active" aria-current="page">@Model.BrandName</li>
                            </ol>
                        </nav>
                    </div>


@code {
[Parameter]
public Guid Id { get; set; }
protected override Task OnParametersSetAsync()
{
    return base.OnParametersSetAsync();
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
    return base.OnAfterRenderAsync(firstRender);
}

protected override bool ShouldRender()
{
    return base.ShouldRender();
}
protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);
}
protected override void OnInitialized()
{
    base.OnInitialized();
}

protected override void OnParametersSet()
{
    base.OnParametersSet();
}

public override Task SetParametersAsync(ParameterView parameters)
{
    return base.SetParametersAsync(parameters);
}
protected async override Task OnInitializedAsync()
{
    var request = new GetProductByIdQuery() { ProductId = Id };

    var product = await Mediator.Send(request: request);
    if (product.Value != null)
    {
        Model = product.Value;
        GalleryModel = await GetGallery();

    }
}
}

在搜索的过程中，如果用户已经搜索过香蕉，并且在搜索页面上想再次搜索香蕉，页面不会有任何反应。我遍历了所有生命周期覆盖以查看它的去向，但它没有反应。

我也想过用StateHasChanged()。但是我的代码是一个NavLink，当项目没有进入生命周期时，我应该把这段代码放在哪里？

【问题讨论】：

标签： c# blazor blazor-server-side

【解决方案1】：

试试下面的代码：

@code {

    void NevigateToYourUrl()
    {
        _navigationManager.NavigateTo("YourPagePath");
    }
}

您还需要按如下方式注入 NavigationManager：

@inject NavigationManager _navigationManager

试试：

<a href="" @onclick="@NevigateToYourUrl" @onclick:preventDefault />

【讨论】：

我的链接是 NavLink。 @Model.ProductName
尝试：@MrJahanbin ` `
关闭。让它@onclick="() => NevigateToYourUrl("3620f82-7cba-473c-9273-1cf300a181eb")"

【解决方案2】：

如果不知道“在 搜索期间”是什么意思 - 你还没有显示搜索 - 我会说使用 NavLink 刷新当前页面是错误的选择- 使用按钮执行不改变当前位置的操作。

但是，如果您确实必须使用 NavLink，只需添加一个 @onclick 处理程序即可调用您的数据加载方法。

<NavLink href=@($"/Product/{Id}") @onclick=GetProductData>@Model.ProductName</NavLink>

protected async override Task OnInitializedAsync()
{
  await GetProductData();
}

protected async Task GetProductData()
{
  var request = new GetProductByIdQuery() { ProductId = Id };

  var product = await Mediator.Send(request: request);
  if (product.Value != null)
  {
      Model = product.Value;
      GalleryModel = await GetGallery();
  }
}

【讨论】：