首页
视频
资源
登录
原
ASP.NET Core Blazor 基础
6518
人阅读
2020/5/13 14:02
总访问:
2589525
评论:
1
收藏:
0
手机
分类:
.net后台框架
![Blazor简介](https://img.tnblog.net/arcimg/hb/e4edcbed505e40ecb41b894b7d944675.jpg "Blazor基础") >#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/> ![](https://img.tnblog.net/arcimg/hb/62dac642fc5c4029b2287b834791c94d.png) <br/> ![](https://img.tnblog.net/arcimg/hb/7958af9d03104e7281ad1d9dd887e71d.png) <br/> ![](https://img.tnblog.net/arcimg/hb/2bd5151da81a4441af04fae923d28fd2.png) <br/> ![](https://img.tnblog.net/arcimg/hb/a325c0098342407d82c639d9b131a0cb.png) >###前端@符号的变量 | 名称 | 意义 | | ------------ | ------------ | | @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 类可帮助用户了解所显示导航链接中的哪个页面是活动页面。 ![](https://img.tnblog.net/arcimg/hb/6f3536dc86664453b68dfa2377ff62da.png) ```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文件 ![](https://img.tnblog.net/arcimg/hb/2b895dd72820491d8b94ac138d25eb68.png) <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 | >运行结果 ![](https://img.tnblog.net/arcimg/hb/e36aba7a23a04e23ae3eadc055094623.png) >###事件挂载 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` 事件,当我们点击按钮进行跳转的时候,执行顺序如下: ![](https://img.tnblog.net/arcimg/hb/390c0be467eb408f88bcb4584c999e70.jpg) >`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://img.tnblog.net/arcimg/hb/87038f7ac0424559a66e63d228c66462.jpg) ![](https://img.tnblog.net/arcimg/hb/a49fb3dd8c2847ac9dd89558cc0babde.jpg) 更多请参考:https://docs.microsoft.com/zh-cn/aspnet/core/blazor/routing?view=aspnetcore-3.1
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
168篇
linux
17篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
4篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
18篇
threejs
2篇
人物
1篇
嵌入式
2篇
python
13篇
HuggingFace
8篇
pytorch
9篇
opencv
6篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术