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 eventNavigationManager.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 disposedNavigationManager.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之使用自定义华为扫描SDK扫描二维码和识别本地图片

1、需求 更具UI的设计实现扫描二维码和识别本地图片二维码功能。 zxing扫描二维码还可以,但是识别本地图片二维码功能效果太差,非常不理想,看了看多github很多zxing扩展的开源项目,识别本地图片二维码功能效果不乐观,有些甚至还有裁剪本地图片,还是不能识别,果断放弃zb…

Matlab R2016b简体中文版安装教程(附Matlab R2016b百度网盘下载地址)

下载的Matlab R2016b软件安装包(文末附有下载地址)目录如下所示: 安装过程: 1. 安装主程序R2016b_win64_dvd1.iso和R2016b_win64_dvd2.iso 由于目前大多数及其都是Win8或10系统,所以选中R2016b_win64_dvd1.iso,右键→Windows资源管理器打开。Win7系统可以安装好压软件之后…

深度学习String、StringBuffer、StringBuilder

相信String这个类是Java中使用得最频繁的类之一&#xff0c;并且又是各大公司面试喜欢问到的地方&#xff0c;今天就来和大家一起学习一下String、StringBuilder和StringBuffer这几个类&#xff0c;分析它们的异同点以及了解各个类适用的场景。下面是本文的目录大纲&#xff1a…

Leetcode之打印链接的倒数第K个节点

1 问题 打印链表倒数第K个节点值。 2 代码实现 #include<stdio.h>//定义一个Node结构体,里面包含了value值和保存了下一个Node的指针(地址) typedef struct Node {int value;Node *next; } Node;//打印链表所有的值,循环遍历一次,因为链表节点的最后一个节点肯定是…

MySQL5.5多实例编译安装——mysqld_multi

一、MySQL多实例简介 MySQL多实例&#xff0c;简单地说&#xff0c;就是在一台服务器上同时开启多个不同的服务端口&#xff08;如&#xff1a;3306、3307&#xff09;&#xff0c;同时运行多个MySQL服务进程&#xff0c;这些服务进程通过不同的socket监听来自不同的端口来提供…

【前端就业课 第一阶段】HTML5 零基础到实战(二)超链接

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

架构,框架,模式,模块、组件、插件的含义和区别

架构、框架、模式、模块、组件、插件、控件、中间件的含义和区别。经常看到这些概念&#xff0c;但是有些含糊&#xff0c;花点儿功夫整理一下&#xff0c;结果还是有些地方理解的不透彻&#xff0c;先将整理的内容写下来&#xff0c;以供交流。左侧英文栏中有些单词被分成了两…

C语言,C#语言求100-999内的水仙花数源程序

水仙花数&#xff08;Narcissistic number&#xff09;也被称为超完全数字不变数&#xff08;pluperfect digital invariant, PPDI&#xff09;、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数&#xff08;Armstrong number&#xff09;&#xff0c;水仙花数是指一个 3 位数&#…

一个精简的C#表达式执行框架Dynamic Expresso

一、简介Dynamic Expresso是一个用.NET Standard 2.0编写的简单c#语句的解释器。Dynamic Expresso嵌入了自己的解析逻辑&#xff0c;通过将其转换为.NET lambda表达式或委托来解释c#语句。使用Dynamic Expresso开发人员可以创建可编写脚本的应用程序&#xff0c;无需编译即可执…

算法马拉松13 A-E解题报告

A题意&#xff08;取余最长路&#xff09;: 佳佳有一个n*m的带权矩阵&#xff0c;她想从(1,1)出发走到(n,m)且只能往右往下移动&#xff0c;她能得到的娱乐值为所经过的位置的权的总和。 有一天&#xff0c;她被下了恶毒的诅咒&#xff0c;这个诅咒的作用是将她的娱乐值变为对p…

Modis数据处理工具:MRT百度网盘下载和手把手图文安装教程

如下图所示为 MODIS Reprojection Tool(MRT)的软界面,看似简单,却是Modis遥感影像必不可少的处理工具,如投影变换等。本文以图文并茂的形式,详细讲解MRT软件在Windows10平台上的安装过程,并附MRT软件百度网盘下载地址。 Modis Tool主界面: 一、安装过程 1、安装Jav…

Word中如何设置图片与段落的间距为半行

第一种&#xff1a; 正文为5号&#xff0c;那么图片或者Viso对象前后空一行&#xff0c;设置字号为7号或者更小&#xff0c;这样设置的间距就是那个7号字的间距&#xff0c;比5号小&#xff0c;看着空白不是那么大。 第二种&#xff1a; Visio对象转为jpg&#xff0c;然后选中图…

在微信小程序中使用“随机键盘”

最近研究微信小程序&#xff0c;发现在手机上使用系统键盘非常不方便&#xff0c;一是按键太小&#xff0c;对于小学生来说&#xff0c;操作非常不方便&#xff1b;二是系统键盘反复切换影响界面布局。于是自己决定自己写一个随机的小键盘。 原理非常简单&#xff1a;拿“口算练…

Android之提示订阅配置订阅需要传新的包 添加结算权限。

1 问题 apk上google应用市场&#xff0c;然后开通支付商品&#xff0c;错误提示如下 2 解决办法 AndroidManifest.xml里面添加谷歌支付权限 <!-- google pay --><uses-permission android:name"com.android.vending.BILLING" />

【前端就业课 第一阶段】HTML5 零基础到实战(三)一篇文CSS基础入门

注意&#xff1a;手机&#xff08;APP&#xff09;打开&#xff0c;内容显示更佳&#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划&#xff08;** 博主会监督你并且教你写文章 **&#xff09;的拉到最下面&#xff08;PC端Web打开&#xff09;加博主即可&#xff0c;目…

C#如何获取实体类属性名和值?

数据模型定义public class User{public User(){student new student();}public string name { get; set; }public string gender { get; set; }public int age { get; set; }public student student { get; set; }}public class student{public int ID { get; set; }public st…

将VNC 安装在Centos 7步骤

&#xff08; Virtual Network Computing&#xff09;VNC允许Linux系统可以类似实现像Windows中的远程桌面访问那样访问Linux桌面。本文配置机器是兴宁市网络信息中心的一台Centos 7 HP服务器环境下运行。 首先试试服务器装了VNC没 [rootwic ~]# rpm -q tigervnc tigervnc-serv…

利用MRT进行Modis NDVI数据(MOD13Q1)投影变换格式转换操作图文教程

本实例以Modis NDVI(MOD13Q1,空间分辨率为250m)一景影像数据为例,演示利用MRT进行Modis NDVI影像变换,主要内容包括:将.hdf格式转为.tif格式,将坐标系转为Albers等积投影。 ArcGIS完美转换方法: 《ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换》 《重磅!ArcGI…

ActiveMQ无法启动

解决办法&#xff1a;activemq无法启动&#xff0c;端口被占用 用netstat -an无法查出61616被哪个进程占用&#xff08;实践证明&#xff0c;netstat -ano|findstr 61616什么也没有找到&#xff09; 经过排查和网上资料参考&#xff0c;被windows的Internet connection share(I…

Android之升级OkHttp编译提示错误如下Using ‘body(): ResponseBody?’ is an error. moved to val

1 问题 升级okHttp库&#xff0c;编译项目错误如下 Using ‘body(): ResponseBody?’ is an error. moved to val 2 解决办法 原来的代码 val list response.body().string() 去掉&#xff08;&#xff09;就可以了 val list response.body.string()