Blazor学习之旅 (6) 路由系统

a5d40032d88afc332a54efbdd21882a5.jpeg

【Blazor】| 总结/Edison Zhou


大家好,我是Edison。许久没有更新Blazor学习系列了,今天续更。

Blazor 的路由系统就和 ASP.NET MVC的路由系统一样,可以为我们提供灵活的选项,可用于确保用户请求到达可处理它们并返回用户想要的信息的组件。

本篇,我们来了解下在Blazor中的路由系统。

使用路由模板

在 Blazor 中,使用路由来确保将每个请求发送到最适合的组件,并且该组件具有显示用户所需内容的全部信息。

Blazor 使用名为 Router 组件的专用组件路由请求。它在 App.razor 中配置如下:

<Router AppAssembly="@typeof(App).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /><FocusOnNavigate RouteData="@routeData" Selector="h1" /></Found><NotFound><PageTitle>Not found</PageTitle><LayoutView Layout="@typeof(MainLayout)"><p role="alert">Sorry, there's nothing at this address.</p></LayoutView></NotFound>
</Router>

应用启动时,Blazor 会检查 AppAssembly 属性,以了解它应扫描哪个程序集。它会扫描该程序集,以寻找具有 RouteAttribute 的组件。Blazor 使用这些值编译 RouteData 对象,该对象指定如何将请求路由到组件。编写应用代码时,可以在每个组件中使用 @page 指令来修复 RouteAttribute。

在上面的模板中,标记指定了在运行时处理路由的组件:RouteView组件。此组件接收 RouteData 对象以及来自 URI 或查询字符串的任何参数。然后,它呈现指定的组件及其布局。可以使用  标记来指定默认布局,当所选组件未通过 @layout 指令指定布局时,将使用该布局。本模块稍后会详细介绍这些布局。

在  组件中,还可使用  标记指定在不存在匹配路由时返回给用户的内容。上面的示例返回单个 

 段落和错误消息提示"Sorry, there's nothing at this address.",但你可以呈现更复杂的 HTML。例如,可能包括指向主页或站点管理员联系人页面的链接。

使用@page指令

在 Blazor 组件中,@page 指令指定该组件应直接处理请求。

可以在 @page 指令中指定 RouteAttribute,方法是以字符串的形式传递它。例如,使用此属性指定页面处理对 /Todo 路由的请求:

@page "/Todo"

如果要指定到组件的多个路由,请使用两个或更多 @page 指令:

@page "/Todo"
@page "/TodoItems"

使用NavigationManager导航

在 Blazor 组件中,如果我们需要访问一些导航信息,如当前完整的URI、相对路径 又或是 查询字符串(QueryString)等,我们可以在代码中通过 NavigationManager 对象来获取所有的这些值。

需要注意的是,我们需要将其注入组件,才能访问其属性。如下代码所示,我们通过@inject指令完成了注入。

@page "/pizzas"
@inject NavigationManager NavManager<h1>Buy a Pizza</h1><p>I want to order a: @PizzaName</p><a href=@HomePageURI>Home Page</a>@code {[Parameter]public string PizzaName { get; set; }public string HomePageURI { get; set; }protected override void OnInitialized(){HomePageURI = NavManager.BaseUri}
}

如果想要访问查询字符串(QueryString),则必须分析完整的URI了。我们可以使用 Microsoft.AspNetCore.WebUtilities 程序集中的 

QueryHelpers 类执行此分析,如下代码所示:

@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager<h1>Buy a Pizza</h1><p>I want to order a: @PizzaName</p><p>I want to add this topping: @ToppingName</p>@code {[Parameter]public string PizzaName { get; set; }private string ToppingName { get; set; }protected override void OnInitialized(){StringValues extraTopping;var uri = NavManager.ToAbsoluteUri(NavManager.Uri);if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out extraTopping)){ToppingName = System.Convert.ToString(extraTopping);}}
}

最后,我们还可以通过调用 NavigationManager.NavigateTo() 方法,使用 NavigationManager 对象将用户转交给代码中的另一个组件:

@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager<h1>Buy a Pizza</h1><p>I want to order a: @PizzaName</p><button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>@code {[Parameter]public string PizzaName { get; set; }private void NavigateToPaymentPage(){NavManager.NavigateTo("buypizza");}
}

使用NavLink组件

在 Blazor 中,使用 NavLink 组件来呈现标记,因为它在链接的 href 属性与当前 URL 匹配时将切换 active CSS 类。通过设置 active 类的样式,可以让用户清楚地了解当前页面对应哪个导航链接。

使用 NavLink 时,主页链接示例如以下代码所示:

@page "/pizzas"
@inject NavigationManager NavManager<h1>Buy a Pizza</h1><p>I want to order a: @PizzaName</p><NavLink href=@HomePageUri Match="NavLinkMatch.All">Home Page</NavLink>@code {[Parameter]public string PizzaName { get; set; }public string HomePageURI { get; set; }protected override void OnInitialized(){HomePageURI = NavManager.BaseUri}
}

NavLink 组件中的 Match 属性用于管理突出显示连接的时间,它有两个选项:

  • NavLinkMatch.All:使用此值时,只有在链接的 href 与当前 URL 完全匹配时,该链接才突出显示为活动链接。

  • NavLinkMatch.Prefix:使用此值时,当链接的 href 与当前 URL 的第一部分匹配时,该链接就突出显示为活动链接。例如,假设你拥有链接 

    。当前 URL 为 http://www.mypizza.com/pizzas 及该 URL 中的任意位置(例如 http://www.mypizza.com/pizzas/formaggio)时,此链接将突出显示为活动链接。此行为可帮助用户了解自己当前正在查看网站的哪一部分。

使用路由参数

在日常开发中,有时候希望将URI中的其他部分用作呈现的页面中的值,例如:http://edtalk.com/favoritestar/jaychou。如果我们想要在Blazor中获取到jaychou,就可以使用路由参数。

下面的示例代码就展示了@page 指令中使用大括号来指定路由参数并为其命名。

@page "/Favorite/{favorite}"<h1>Choose a Star</h1><p>Your favorite star is: @Favorite</p>@code {[Parameter]public string Favorite { get; set; }
}

如果该路由参数并不是必须的,我们可以设置默认值,使其成为可选的路由参数。

@code {[Parameter]public string Favorite { get; set; }protected override void OnInitialized(){Favorite ??= "Fiorentina";}
}

假如用户尝试通过请求URI http://edtalk.com/favoritestar/jaychou/edisonchen 来指定两个最喜爱的明星,页面将显示:"Your favorite start is : jaychou",并忽略后续的"edisonchen"。因此,如果我们想要显示的是"jaychou/edisonchen",那么我们可以捕获全部路由参数,只需要做以下一点点的修改,将星号 (*) 作为路由参数名称前缀即可捕获:

@page "/Favorite/{*favorites}"<h1>Choose a Star</h1><p>Your favorites star are: @Favorites</p>@code {[Parameter]public string Favorites { get; set; }
}

此外,我们可以对路由参数做类型限制,比如将其限制为一个int类型:

@page "/myorders/{orderId:int}"

除了int之外,还阔以添加的约束有 bool, datetime, decimal, double, float, guid 和 long 类型。

小结

本篇,我们了解了在Blazor中的路由系统。

下一篇,我们学习一下在Blazor中的布局系统。

参考资料

Microsoft Learn,《使用Blazor构建Web应用程序》

8004ef015547481352b1e4879c897aff.gif

年终总结:Edison的2021年终总结

数字化转型:我在传统企业做数字化转型

C#刷题:C#刷剑指Offer算法题系列文章目录

.NET面试:.NET开发面试知识体系

.NET大会:2020年中国.NET开发者大会PDF资料

c369ad95032301476ebc35d4451f9efb.png

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

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

相关文章

kindle降级卡大树_从提示框:Kindle购物流程图,iOS降级和DIY焊接笔

kindle降级卡大树Once a week we round up some of the tips from the HTG tips box and share them with the greater readership; this week we’re looking at shopping for Kindles with a flowchart, downgrading iOS, and rolling your own DIY soldering pen. 每周一次&…

MS CRM 2011 Form与Web Resource在JScript中的相互调用

原创地址&#xff1a;http://www.cnblogs.com/jfzhu/archive/2013/02/14/2912580.html 转载请注明出处 在Form中可以添加一个html的web resource&#xff0c;在web resource里可以用JScript来使用REST Endpoint或者SOAD Endpoint。 你可以在Form中添加一个web resource&#xf…

从 .NET 6 更新到 .NET 7

Upgrade from .NET 6 to .NET 7Intro.NET 7 已经发布了一段时间了&#xff0c;将几个服务升级到了 .NET 7&#xff0c;升级还是比较顺利的&#xff0c;也有遇到几个问题&#xff0c;分享一下TargetFramework首先我们需要将项目文件中的目标框架&#xff08;TargetFramework&…

MySQL-05:pymysql与pycharm设置

PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库&#xff0c;Python2中则使用mysqldb。 Django中也可以使用PyMySQL连接MySQL数据库。 PyMySQL安装 pip install pymysql 连接数据库 前置条件&#xff1a; 已有一个MySQL数据库&#xff0c;并且…

hdmi-cec_如何使用HDMI-CEC使用PlayStation 4或Pro自动打开电视

hdmi-cecCall it petty, but there’s just something about eliminating the “turn on the TV” portion of firing up your PlayStation 4 that makes the whole process seem faster. And the good news is that getting this action on your setup is as easy and ticking…

ABP Framework 7.0 RC 新增功能简介

imageABP Framework 在架构上有四大目标&#xff1a;模块化、DDD、多租户和微服务。从 7.0 更新的功能来看&#xff0c;其侧重点转向微服务场景的实现&#xff0c;比如&#xff1a;Dapr 集成、动态权限和功能、外部本地化、分布式实体缓存服务&#xff0c;都是对微服务和分布式…

(原創) 07/28/1982 少女A (中森明菜)

Abstract明菜的第二首單曲&#xff0c;也是她的成名曲&#xff0c;在台灣曾經被歌手嘟嘟翻唱過。 Introduction[hjp2400,300,true]http://oomusou.googlepages.com/shojo_a.flv[/hjp2] 明菜從『少女A』這首單曲才開始竄紅&#xff0c;走的也是可愛路線&#xff0c;招牌的『明菜…

ftp服务

1.ftp工作原理FTP是一个客户机/服务系统。用户通过一个支持FTP协议的客户机程序&#xff0c;连接到在远程主机上的FTP服务器程序。用户通过客户机程序向服务器程序发出命令&#xff0c;服务器程序执行用户所发出的命令&#xff0c;并将执行的结果返回到客户机。2.安装ftp服务yu…

Spark Streaming高级特性在NDCG计算实践

从storm到spark streaming&#xff0c;再到flink&#xff0c;流式计算得到长足发展&#xff0c; 依托于spark平台的spark streaming走出了一条自己的路&#xff0c;其借鉴了spark批处理架构&#xff0c;通过批处理方式实现了实时处理框架。为进一步了解spark streaming的相关内…

mac触控板 鼠标中键_如何在Windows 10中停止意外的触控板点击(以及其他鼠标增强功能)...

mac触控板 鼠标中键It’s been the bane of laptop users for years: you’re typing away, your palm brushes the trackpad, and the accidental click inserts the cursor in the middle of the text completely screwing things up. Banish the frustration of accidental …

推荐一款 .NET 编写的 嵌入式平台的开源仿真器

Renode 是一个开发框架&#xff0c;通过让你模拟物理硬件系统来加速物联网和嵌入式系统开发。Renode 可以模拟 Cortex-M、RISC-V 等微控制器&#xff0c;不仅可以模拟 CPU指令&#xff0c;还可以模拟外设&#xff0c;甚至可以模拟板载的外设。更强的是&#xff0c;它可以让你在…

Android Bluetooth模块学习笔记

一、蓝牙基础知识 1.蓝牙&#xff08; Bluetooth &#xff09;是一种无线技术标准&#xff0c;可实现固定设备、移动设备和楼宇个人域网之间的短距离数据交换。蓝牙基于设备低成本的收发器芯片&#xff0c;传输距离近、低功耗。 2.微波频段&#xff1a;使用2.402GGHz到2.480GHz…

sql删除无人借阅的书_查找,下载,借阅,租赁和购买电子书的最佳网站

sql删除无人借阅的书So, you’ve got yourself an eBook reader, smartphone, tablet, or other portable device and you want to put some eBooks on it to take with you. There are many options for obtaining free eBooks as well as purchasing, borrowing, or even ren…

django05:ORM示例--person 增删改查

建立数据库连接后&#xff0c;演示代码 见我的资源 https://download.csdn.net/my

推荐一个开源的 .NET 二维码生成库

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具和组件&#xff0c;希望对您有用&#xff01;介绍QrCodeGenerator 是开源的 .NET 二维码生成库&#xff0c;它支持从文本字符串和字节数组生成二维码图片。这个库是基于 .NET Stan…

全量更新和增量更新_增量BIOS更新或直接更新到最新版本哪个更好?

全量更新和增量更新There are few things as irritating as a Blue Screen of Death, but sometimes there is an easy fix for it like updating the BIOS for instance. If multiple updates are available though, do you do incremental updates or can you just use the l…

[Office 2010 易宝典]什么是Office Web App?如何在线查看Office文档?

什么是Office Web App&#xff1f; Office Web App使得Microsoft Office能扩展到网络浏览器上。用户可以直接在通过浏览器在线查看和编辑保存在网站上的文档。 如何上传Office文档&#xff1f; 在Microsoft Word 2010里面&#xff0c;您可以把Word文档保存到Windows Live SkyDr…

Pipy:保护 Kubernetes 上的应用程序免受 SQL 注入和 XSS 攻击

注入攻击在 OWASP Web 应用 10 大安全风险[1] 排名 2021 年下滑至第 3 位&#xff0c;多年来一直位居前十。SQL 注入 (SQLi) 是一种用于攻击网站和 Web 应用程序的常见注入技术。没有将用户输入与数据库命令完全分开的应用程序面临着将恶意输入作为 SQL 命令执行的风险。成功的…

如何阻止YouTube在iOS,Android和Web上自动播放视频

Over at YouTube, they love it when you watch more YouTube. If you’re sick of YouTube automatically queuing up more videos for you, however, it’s easy enough to turn the autoplay feature off and go back to watching your videos at your own pace. 在YouTube上…

(php)thinkphp3.2配置sql_server

(php)thinkphp3.2配置sql_server 标签&#xff1a; php thinkphp sql_server2016年12月16日 15:20:19631人阅读 评论(0) 收藏 举报分类&#xff1a;php&#xff08;18&#xff09; 最近要整一个crm和erp的对接&#xff0c;最坑的是&#xff0c;erp的是用.net写的&#xff0c;数…