做家居商城网站,如何制作网页线上答题并生成证书,精美个人网站,如何建立一个网站主页布局Blazor中的布局和MVC中的布局是类似的。创建布局新建一个Razor页面#xff0c;所有新增的布局都要继承LayoutComponentBase#xff0c;同时标识自定义内容的输出位置#xff0c;即标识Body的位置。如图所示#xff1a;应用布局我们修改一下index.razor页面中的代码所有新增的布局都要继承LayoutComponentBase同时标识自定义内容的输出位置即标识Body的位置。如图所示应用布局我们修改一下index.razor页面中的代码增加layout MyLayout。运行后按F12查看网页源代码如下布局的内容被app/app标签包着这也意味着我们的layout并不是页面的全部内容而仅仅只是blazor相关的内容。顺便说一下布局是可以“继承”的也就是说我们可以声明一个新的布局继承自MainLayout.razor 只需要指定如下代码即可inherits LayoutComponentBase
layout MainLayout
路由路由定义路由模板定义在App.razor中Router AppAssemblytypeof(Program).AssemblyFound ContextrouteDataRouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) //FoundNotFoundLayoutView Layouttypeof(MainLayout)pSorry, theres nothing at this address./p/LayoutView/NotFound
/Router
里面有三个重要组件Found路由机制渲染存在的页面RouteView接收路由数据和默认的布局NotFound路由机制渲染不存在的页面当然我们可以自己定义404内容定义路由路由定义很简单只需要前缀page然后定义你的路由名称即可如page “index”。当然一个页面可以定义多个路由。如下page “/index”page “/”page “/home/index”定义与约束路由参数这个其实和ASP.NET Core API的路由方式没有太大区别包括路由约束部分。page /Index/{Theme}
接收参数的方式也很简单需要声明一个get;set的属性并且必须是public的同时需要用Parameter特性去标识。{[Parameter]public string Theme{get;set;}
}
以下是路由约束相比于MVC这些约束也没什么变化。我们先看一个例子div classNavMenuCssClass onclickToggleNavMenuul classnav flex-columnli classnav-item px-3NavLink classnav-link href MatchNavLinkMatch.Allspan classoi oi-home aria-hiddentrue/span Home/NavLink/lili classnav-item px-3NavLink classnav-link hrefMyComponent MatchNavLinkMatch.Prefixspan classoi oi-plus aria-hiddentrue/span My Component/NavLink/li/ul
/div
NavLinkMatch有两个枚举NavLinkMatch.All当匹配整个URL时可以路由到页面NavLinkMatch.Prefix这是默认使用的当匹配到当前URL的前缀时可以路由到页面。如https://localhost:5001/MyComponent和 https://localhost:5001/MyComponent/AnotherSegment 接下来我们看一下如果通过代码方式进行页面跳转那就是可以使用NavigationManager进行页面跳转其实例是通过注入获取的。inject NavigationManager NavigationManager
成员描述Uri获取当前的绝对URLBaseUri获取根URI末尾带斜杠然后以此追加相对路径进而组合成绝对URINavigateTo导航到指定的 URI前提是设置forceLoad 为true使用此方式会绕过客户端路由使得浏览器会强制刷新页面如UriHelper.NavigateTo(/DataList/ Index, forceLoad);LocationChanged当导航位置更改时触发的事件ToAbsoluteUri将相对 URI 转换为绝对 URIToBaseRelativePath给定一个根 URI例如以前由BaseUri返回的 URI将绝对 URI 转换为带有根URI 前缀的相对 URI其他Blazor虽然提供了十分丰富而又灵活的路由功能但目前还没有一个明确的功能让我们使用可选参数但是我们可以变通一下就是设置接收的数据类型为可空类型。代码如下:page “DataList/{Index:int}”
[Parameter]
public int? Index { get; set; }
protected override void OnInitialized()
{base.OnInitialized();Index Index?? 1;
}
Blazor带我重玩前端(一)Blazor带我重玩前端(二)Blazor带我重玩前端(三)
