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我正在通过它。

话虽这么说，也许只有NavLinks才能做到这一点。当我不在手机上时，我会更新答案。

Answer 3

就您而言，您必须做出Rod Weir所说的以下更改，我只是在扩展答案。

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

对于上述查询参数，您必须在代码中定义[Parameter]。

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

然后添加方法

protected override async Task OnParametersSetAsync()
{

  var projectDetail = await getProjectDetails(projNum); // ProgNum will change as it get changes in url, you don't have to do anything extra here.
}

强制页面重新加载将使您陷入其他问题，它将获得正确的结果，但页面行为将发生变化。页面上还有其他组件，例如标题/左侧导航/等，如果它们是动态的，则这些组件不会更改。这将迫使您进行更改，并迫使所有组件重新加载。用户体验也会受到影响。

希望获得帮助。

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");
    }
}

Answer 5

我有同样的问题。我的解决方案是...

创建新页面

@page "/project/create/"
<ProjectBase></ProjectBase>

就是这样！从@page页面

中删除（/project/create/）的ProjectBase指令

一切都会按预期进行，现在对您拥有的所有页面进行处理。

NavLink更新URL，但不重新加载Blazor中的页面

5 个答案: