弄美团网站的一般一个做赚多少钱,手机网站开发介绍,十堰seo优化方法,镇江网站制作哪家好【Blazor】| 总结/Edison Zhou大家好#xff0c;我是Edison。许久没有更新Blazor学习系列了#xff0c;今天续更。Blazor 的路由系统就和 ASP.NET MVC的路由系统一样#xff0c;可以为我们提供灵活的选项#xff0c;可用于确保用户请求到达可处理它们并返回用户想要的信息的…【Blazor】| 总结/Edison Zhou大家好我是Edison。许久没有更新Blazor学习系列了今天续更。Blazor 的路由系统就和 ASP.NET MVC的路由系统一样可以为我们提供灵活的选项可用于确保用户请求到达可处理它们并返回用户想要的信息的组件。本篇我们来了解下在Blazor中的路由系统。使用路由模板在 Blazor 中使用路由来确保将每个请求发送到最适合的组件并且该组件具有显示用户所需内容的全部信息。Blazor 使用名为 Router 组件的专用组件路由请求。它在 App.razor 中配置如下Router AppAssemblytypeof(App).AssemblyFound ContextrouteDataRouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) /FocusOnNavigate RouteDatarouteData Selectorh1 //FoundNotFoundPageTitleNot found/PageTitleLayoutView Layouttypeof(MainLayout)p rolealertSorry, theres nothing at this address./p/LayoutView/NotFound
/Router应用启动时Blazor 会检查 AppAssembly 属性以了解它应扫描哪个程序集。它会扫描该程序集以寻找具有 RouteAttribute 的组件。Blazor 使用这些值编译 RouteData 对象该对象指定如何将请求路由到组件。编写应用代码时可以在每个组件中使用 page 指令来修复 RouteAttribute。在上面的模板中标记指定了在运行时处理路由的组件RouteView组件。此组件接收 RouteData 对象以及来自 URI 或查询字符串的任何参数。然后它呈现指定的组件及其布局。可以使用 标记来指定默认布局当所选组件未通过 layout 指令指定布局时将使用该布局。本模块稍后会详细介绍这些布局。在 组件中还可使用 标记指定在不存在匹配路由时返回给用户的内容。上面的示例返回单个 段落和错误消息提示Sorry, theres 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 NavManagerh1Buy a Pizza/h1pI want to order a: PizzaName/pa hrefHomePageURIHome Page/acode {[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 NavManagerh1Buy a Pizza/h1pI want to order a: PizzaName/ppI want to add this topping: ToppingName/pcode {[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 NavManagerh1Buy a Pizza/h1pI want to order a: PizzaName/pbutton classbtn onclickNavigateToPaymentPage
Buy this pizza!
/buttoncode {[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 NavManagerh1Buy a Pizza/h1pI want to order a: PizzaName/pNavLink hrefHomePageUri MatchNavLinkMatch.AllHome Page/NavLinkcode {[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}h1Choose a Star/h1pYour favorite star is: Favorite/pcode {[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}h1Choose a Star/h1pYour favorites star are: Favorites/pcode {[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资料
