【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应用程序》
年终总结:Edison的2021年终总结
数字化转型:我在传统企业做数字化转型
C#刷题:C#刷剑指Offer算法题系列文章目录
.NET面试:.NET开发面试知识体系
.NET大会:2020年中国.NET开发者大会PDF资料