NavLink 更新 URL 但不会在 Blazor 中重新加载页面

Question

我有一个 ProjectBase.razor 页面，用于创建、查看和编辑项目。以下路线都会带您进入此页面：

/project/view/{projNum}
/project/create/
/project/edit/{projNum}

我的导航菜单中还有一个 Navlink，允许您创建一个新项目：

<NavLink class="nav-link" href="/Project/Create" Match="NavLinkMatch.All" >
    <span aria-hidden="true">New Project</span>
</NavLink>

如果我在同一页面的查看/编辑功能上单击该链接，URL 将更改为“/Project/Create”，但页面本身不会刷新或重新加载。有没有办法通过 NavLink 强制执行此操作？或者我需要添加一个 OnClick 函数来做到这一点？

Answer 1

在页面的代码块中创建和使用 OnParametersSetAsync 任务。当参数改变时将触发此事件。

@code
protected override async Task OnParametersSetAsync()
{
// This event will fire when the parameters change
// Put your code here.  

}

Answer 2

是的，使用类似的东西Microsoft.AspNetCore.Components.NavigationManager和它的 NavigateTo 函数将 forceLoad 设置为 true 将完成您正在寻找的内容。

当然是的，这将需要您设置一个 onclick 功能，但这是我最终为站点范围的搜索页面完成类似操作的方式，该页面在技术上从未在我传递的查询字符串搜索值之外更改其 URL它。

话虽如此，但可能有一种仅使用 NavLink 的不错的方法。当我不在手机上时，我会更新我的答案。

Answer 3

在我的组件中，我已经进行了重写OnInitializedAsync，以便进行 API 调用来获取我的数据。

我的解决方案如下所示：

        protected override async Task OnInitializedAsync()
        {
           // Make your API call or whatever else you use to initialize your component here
        }

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

Answer 4

这是设计使然。页面本身不会刷新或重新加载，因为<NavLink>不会向服务器发送请求（F12 检查），并且会重定向到客户端上的同一页面，因此不会有任何更新。

如果您在浏览器中输入这些 URL，它们将发送请求，然后刷新页面。

解决方法是您可以根据当前路线显示不同的内容。

@page "/project/view/{projNum}"
@page "/project/create/"
@page "/project/edit/{projNum}"
@using Models
<h3>ProjectBase</h3>

@if (projNum == null)
{
<EditForm Model="@createModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="createModel.Name" />

    <button type="submit">Create</button>
</EditForm>
}
else
{


<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>
}
@code {


    [Parameter]
    public string projNum { get; set; }

    private ExampleModel createModel = new ExampleModel();
    private ExampleModel exampleModel = new ExampleModel();

    protected override void OnInitialized()
    {
        exampleModel.Name = projNum;
    }



    private void HandleValidSubmit()
    {
        //your logic
        Console.WriteLine("OnValidSubmit");
    }
}