>#ASP.NET Core Blazor 基础 [TOC] <br/> 项目实践 ------------ <br/> >###项目环境 <br/> <font style="color:green;font-weight:bold;">.NET Core 3.1</font> <br/> <font style="color:lightblue;font-weight:bold;">Blazor</font> <br/> >###创建项目 <br/>  <br/>  <br/>  <br/>  >###前端@符号的变量 | 名称 | 意义 | | ------------ | ------------ | | @page | 路由的地址，如：`@page "/counter"` | | @code | 里面可以写Cshrap代码 | | @inject | 注入服务 | | @using | 引用命名空间 | | @implements | 一般使用方式为`@implements IDisposable`, 如果组件实现 IDisposable，则在从 UI 中删除该组件时调用 `Dispose` 方法。 可随时进行处置，包括在组件初始化期间. | >###文件讲解 | 文件名称 | 文件的意义 | | ------------ | ------------ | | _Imports.razor | 用于引用命名空间，并对所有Page添加引用 | | MainLayout.razor | 主要母版层 | | App.razor | 路由 | >###NavLink讲解 <br/> >创建导航链接时，请使用 NavLink 组件代替 HTML 超链接元素 (`<a>`)。 NavLink 组件的行为方式类似于 `<a>` 元素，但它根据其 href 是否与当前 URL 匹配来切换 active CSS 类。 active 类可帮助用户了解所显示导航链接中的哪个页面是活动页面。  ```csharp <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> Home </NavLink> ``` | NavLink | 细节 | | ------------ | ------------ | | Match | | | Match-->NavLinkMatch.All | NavLink 在与当前整个 URL 匹配的情况下处于活动状态。 | | Match-->NavLinkMatch.Prefix | NavLink 在与当前 URL 的任何前缀匹配的情况下处于活动状态。 | <br/> >###创建Razor文件  <br/> ><font style="color:#74b9ff;font-weight:bold;">Authors.razor</font> ```csharp @page "/authors" @inject NavigationManager NavigationManager <h3>Authors</h3> <hr /> <a href="/authors/authordetail">Bob He</a> <br /> <button class="btn btn-primary" @onclick="Navigate">Bob He</button> @code { void Navigate() { //可以通过 NavigateTo 方法命令注入的对象。该方法采用 URL 作为参数 NavigationManager.NavigateTo("/authors/authordetail/22"); } } ``` >NavigationManager对象参数 | 成员 | 描述 | | ------------ | ------------ | | Uri | 获取当前绝对URI。 | | BaseUri | 获取可在相对 URI 路径之前添加用于生成绝对 URI 的基 URI（带有尾部反斜杠）。 通常，`BaseUri` 对应于 `wwwroot/index.html` (Blazor WebAssembly) 或 `Pages/_Host.cshtml` (Blazor Server) 中文档的 `<base>` 元素上的 `href` 属性。 | | NavigateTo | 导航到指定 URI。 如果 `forceLoad` 为 `true`，则：<br/> - 客户端路由会被绕过。<br/> - 无论 URI 是否通常由客户端路由器处理，浏览器都必须从服务器加载新页面。 | | LocationChanged | 导航位置更改时触发的事件。 | | ToAbsoluteUri | 将相对 URI 转换为绝对 URI。 | | ToBaseRelativePath | 给定基 URI（例如，之前由 BaseUri 返回的 URI），将绝对 URI 转换为相对于基 URI 前缀的 URI。 | <br/> ><font style="color:#74b9ff;font-weight:bold;">AuthorDetail.razor</font> ```csharp @page "/authors/authordetail/{authorId:int}" @page "/authors/authordetail" @page "/author" <h3>AuthorDetail</h3> <hr /> <p>@AuthorId Bob He path "/authors/authordetail"</p> @code { [Parameter] public int AuthorId { get; set; } } ``` <br/> >传参类型 | 约束 | 示例 | 匹配项示例 | | ------------ | ------------ | | bool | {active:bool} | true，FALSE | | datetime | {dob:datetime} | 2016-12-31，2016-12-31 7:32pm | | decimal | {price:decimal} | 49.99，-1,000.01 | | double | {weight:double} | 1.234，-1,001.01e8 | | float | {weight:float} | 1.234，-1,001.01e8 | | guid | {id:guid} | CD2C1638-1638-72D5-1638-DEADBEEF1638，{CD2C1638-1638-72D5-1638-DEADBEEF1638} | | int | {id:int} | 123456789，-123456789 | | long | {ticks:long} | 123456789，-123456789 | >运行结果  >###事件挂载 tn>以下组件通过订阅 `NavigationManager.LocationChanged` 来处理位置改变事件。 在框架调用 `Dispose` 时，解除挂接 `HandleLocationChanged` 方法。 解除挂接该方法可允许组件进行垃圾回收。 ```csharp @implements IDisposable @page "/authors" @inject NavigationManager NavigationManager <h3>Authors</h3> <hr /> <a href="/authors/authordetail">Bob He</a> <br /> <button class="btn btn-primary" @onclick="Navigate">Bob He</button> @code { protected override void OnInitialized() { Console.WriteLine("Add HandleLocationChanged"); NavigationManager.LocationChanged += HandleLocationChanged; } private void HandleLocationChanged(object sender, LocationChangedEventArgs e) { Console.WriteLine("HandleLocationChanged Sent"); } public void Dispose() { Console.WriteLine("Remove HandleLocationChanged"); NavigationManager.LocationChanged -= HandleLocationChanged; } void Navigate() { //跳转 NavigationManager.NavigateTo("/authors/authordetail/22"); } } ``` >跳转到该页面时加载 `HandleLocationChanged` 事件，当我们点击按钮进行跳转的时候，执行顺序如下：  >`LocationChangedEventArgs` 可提供以下有关该事件的信息： | 属性 | 描述 | | ------------ | ------------ | | Location | 新位置的 URL。 | | IsNavigationIntercepted | 如果为 true，则 Blazor 拦截了浏览器中的导航。 如果为 false，则 NavigationManager.NavigateTo 导致了导航发生。 | >###查询字符串喝分析参数 tn>可以从 NavigationManager 的 Uri 属性中获取请求的查询字符串，在使用 QueryHelpers.ParseQuery 分析查询字符串后获取值。 >接下来我们修改 AuthorDetail.razor 页面 ```csharp @using Microsoft.AspNetCore.WebUtilities @using Swifter; @using Swifter.Json; @page "/authors/authordetail/{authorId:int}" @page "/authors/authordetail" @page "/author" @inject NavigationManager NavigationManager <h3>AuthorDetail</h3> <hr /> <p>@AuthorId Bob He path "/authors/authordetail"</p> <p>关于参数: @queryValue</p> @code { [Parameter] public int AuthorId { get; set; } private string queryValue = "Not set"; protected override void OnInitialized() { var query = new Uri(NavigationManager.Uri).Query; if (!string.IsNullOrEmpty(query)) { queryValue = JsonFormatter.SerializeObject(QueryHelpers.ParseQuery(query)); } } } ``` tn>通过不同的访问试试看   更多请参考：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/routing?view=aspnetcore-3.1