刷新Blazor頁面

Question

在.NET 6 的 Blazer 服務器端項目中，我在以下頁面上：

https：//本地主機：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 ，當項目沒有進入生命周期時，我應該把這段代碼放在哪里？

Answer 1

試試下面的代碼：

@code {

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

你還需要注入 NavigationManager 如下：

@inject NavigationManager _navigationManager

嘗試：

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

Answer 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();
  }
}

Answer 3

...並且在搜索頁面上並想再次搜索香蕉，該頁面不會顯示任何反應。

OnInitialized 事件只執行一次。 您關注的生命周期事件是 OnParametersSet：

protected async override Task OnInitializedAsync()
{
   // nothing to do here
}

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

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

Answer 4

基於 AliNajafZadeh 的回答：

@inject NavigationManager _navigationManager

...

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

...

@code
{
    void NevigateToYourUrl()
    {
        _navigationManager.NavigateTo("YourPagePath", true);
    }
}

將第二個參數設置為 true 會繞過客戶端路由並強制瀏覽器從服務器加載新頁面。

相關文檔