Blazor University (26)路由 —— 通过代码导航

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Blazor University (26)路由 —— 通过代码导航相关的知识,希望对你有一定的参考价值。

原文链接:https://blazor-university.com/routing/navigating-our-app-via-code/

通过代码导航

源代码[1]

从 Blazor 访问浏览器导航是通过 NavigationManager 服务提供的。这可以使用 razor 文件中的 @inject 或 CS 文件中的 [Inject] 属性注入到 Blazor 组件中。

NavigationManager 服务有两个特别的成员;NavigateToLocationChanged

LocationChanged 事件将在检测导航事件[2]中更详细地解释。

NavigateTo 方法

NavigationManager.NavigateTo 方法使 C# 代码能够控制浏览器的 URL。与截获的导航一样,浏览器实际上并不导航到新的 URL。相反,浏览器中的 URL 被替换,之前的 URL 被插入到浏览器的导航历史中,但没有向服务器请求新页面的内容。通过 NavigateTo 进行的导航将触发 LocationChanged 事件,传递新 URL 并为 IsNavigationIntercepted 传递 false

对于此示例,我们将再次更改标准 Blazor 模板。我们将使用我们之前在路由参数[3]和可选路由参数[4]中学到的知识。

首先,删除 Index.razorFetchData.razor 页面,并删除 NavMenu.razor 文件中指向这些页面的链接。同样在 NavMenu 中,将 counter 链接的 href 更改为 为 href="",因为我们将使其成为默认页面。

编辑 Counter.razor 并给它两个路由,“/” 和 “/counter/CurrentCount:int”,同时确保它来自 CounterBase 类,这样我们就可以在浏览器的控制台窗口中看到导航日志 - CounterBase.cs 文件之前在 OnLocationChanged 部分中进行了概述。

@page "/"
@page "/counter/CurrentCount:int"
@inherits CounterBase

我们还需要更改 currentCount 字段,使其成为具有 gettersetter 的属性,并将其装饰为 [Parameter]。请注意,它也已从 camelCase 重命名为 PascalCase

[Parameter]
public int CurrentCount  get; set; 

我们现在有一个 counter 页面,可以简单地访问应用程序的主页,也可以通过指定 /counter/X 来访问,其中 X 是一个整数值。

NavigationManager 被注入到我们的 CounterBase 类中,因此可以在 Counter.razor 文件中访问。

@code 
  [Parameter]
  public int CurrentCount  get; set; 

  bool forceLoad;

  void AlterBy(int adjustment)
  
    int newCount = CurrentCount + adjustment;
    UriHelper.NavigateTo("/counter/" + newCount, forceLoad);
  

我们将从两个按钮调用 AlterBy 方法,一个用于增加 CurrentCount,一个用于减少它。还有一个用户可以选择的选项 forceLoad,它将在调用 NavigateTo 时设置相关参数,以便我们看到差异。整个文件最终应如下所示:

@page "/"
@page "/counter/CurrentCount:int"
@implements IDisposable
@inject NavigationManager NavigationManager

<h1>Counter value = @CurrentCount</h1>

<div class="form-check">
  <input @bind=@forceLoad type="checkbox" class="form-check-input" id="ForceLoadCheckbox" />
  <label class="form-check-label" for="ForceLoadCheckbox">Force page reload on navigate</label>
</div>

<div class="btn-group" role="group">
  <button @onclick=@( () => AlterBy(-1) ) class="btn btn-primary">-</button>
  <input value=@CurrentCount readonly class="form-control" />
  <button @onclick=@( () => AlterBy(1) ) class="btn btn-primary">+</button>
</div>
<a class="btn btn-secondary" href="/Counter/0">Reset</a>
<p>
  <em>Page redirects to ibm.com when count hits 10!</em>
</p>

@code 
  [Parameter]
  public int CurrentCount  get; set; 

  bool forceLoad;

  void AlterBy(int adjustment)
  
    int newCount = CurrentCount + adjustment;

    if (newCount >= 10)
      NavigationManager.NavigateTo("https://ibm.com");

    NavigationManager.NavigateTo("/counter/" + newCount, forceLoad);
  

  protected override void OnInitialized()
  
    // Subscribe to the event
    NavigationManager.LocationChanged += LocationChanged;
    base.OnInitialized();
  

  private void LocationChanged(object sender, LocationChangedEventArgs e)
  
    string navigationMethod = e.IsNavigationIntercepted ? "html" : "code";
    System.Diagnostics.Debug.WriteLine($"Notified of navigation via navigationMethod to e.Location");
  

  void IDisposable.Dispose()
  
    // Unsubscribe from the event when our component is disposed
    NavigationManager.LocationChanged -= LocationChanged;
  

单击 -+ 按钮将调用 AlterBy 方法,该方法将指示 NavigationManager 服务导航到 /counter/X,其中 X 是调整后的 CurrentCount 的值——在浏览器的控制台中产生以下输出:

WASM:通过代码通知导航到 http://localhost:6812/counter/1
WASM:通过代码通知导航到 http://localhost:6812/counter/2
WASM:通过代码通知导航到 http://localhost:6812/counter/3
WASM:通过代码通知导航到 http://localhost:6812/counter/4

单击重置链接将导航到 /counter/0,重置 CurrentCount 的值。

WASM:通过代码通知导航到 http://localhost:6812/counter/1
WASM:通过代码通知导航到 http://localhost:6812/counter/2
WASM:通过代码通知导航到 http://localhost:6812/counter/3
WASM:通过代码通知导航到 http://localhost:6812/counter/4
WASM:通过 HTML 通知导航到 http://localhost:6812/Counter/0

ForceLoad

forceLoad 参数指示 Blazor 绕过其自己的路由系统,而是让浏览器实际导航到新 URL。这将导致对服务器的 HTTP 请求以检索要显示的内容。

请注意,导航到站外 URL 不需要强制加载。调用 NavigateTo 到另一个域将调用完整的浏览器导航。

使用本节的 GitHub 示例。在浏览器的控制台窗口中查看 IsNavigationIntercepted 在通过按钮和重置链接导航时有何不同,并在浏览器的网络窗口中查看根据您是否:

  • 将 forceLoad 设置为 false 进行导航。

  • 将 forceLoad 设置为 true 进行导航。

  • 导航到站外 URL。

要观察最后一种情况,您可能希望更新 AdjustBy 方法以在 CurrentValue 传递特定值时进行站外导航。

void AlterBy(int adjustment)

  int newCount = CurrentCount + adjustment;

  if (newCount >= 10)
    NavigationManager.NavigateTo("https://ibm.com");

  NavigationManager.NavigateTo("/counter/" + newCount, forceLoad);

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/NavigatingViaCode

以上是关于Blazor University (26)路由 —— 通过代码导航的主要内容,如果未能解决你的问题,请参考以下文章

Blazor University (23)路由 —— 路由参数

Blazor University (22)路由 —— 定义路由

Blazor University (27)路由 —— 检测导航事件

Blazor University (25)路由 —— 通过 HTML 导航

Blazor University 介绍 - 什么是 Blazor?

Blazor University (31)表单 —— 验证