[英]refresh Blazor page
在.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 ,当项目没有进入生命周期时,我应该把这段代码放在哪里?
试试下面的代码:
@code {
void NevigateToYourUrl()
{
_navigationManager.NavigateTo("YourPagePath");
}
}
你还需要注入 NavigationManager 如下:
@inject NavigationManager _navigationManager
尝试:
<a href="" @onclick="@NevigateToYourUrl" @onclick:preventDefault />
在不知道“在搜索期间”是什么意思的情况下 - 您没有显示搜索- 我会说使用 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();
}
}
...并且在搜索页面上并想再次搜索香蕉,该页面不会显示任何反应。
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();
}
}
基于 AliNajafZadeh 的回答:
@inject NavigationManager _navigationManager
...
<a href="" @onclick="@NevigateToYourUrl" @onclick:preventDefault />
...
@code
{
void NevigateToYourUrl()
{
_navigationManager.NavigateTo("YourPagePath", true);
}
}
将第二个参数设置为 true 会绕过客户端路由并强制浏览器从服务器加载新页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.