最近在研究学习blazor，为了加深记忆，手动记录一下，以下内容为个人理解记录，仅供参考：
Blazor开发学习
- 一 分类
- 1 Blazor Server 应用
- 2 Blazor WebAssembly 应用
- 3 Blazor Hybrid 应用和 .NET MAUI
- 二 基础知识
- 1 路由
- 2 组件库的使用
- 2.1 组件库修饰
- 2.2 对组件进行分组
- 2.3 组件继承
- 2.4级联参数的使用
- 2.5 新建blazor项目，自带的图标
- 2.6 动态切换组件显示
- 2.7 系统配置信息
- 2.7 内置组件使用
- 2.8 弹出框组件使用
- 2.9 支持的 EventArgs 显示在下表中
- 2.10 延时控制组件
- 3 注意
- 3.1 设置打开的第一个界面
- 3.2 IIS部署
- 4 涨知识
一 分类
1 Blazor Server 应用
2 Blazor WebAssembly 应用
速度略慢，使用AOT编译可以提供速度，相应的应用会变大。
3 Blazor Hybrid 应用和 .NET MAUI
WPF开发，Windows桌面应用开发及移动设备应用开发。
二 基础知识
1 路由
@page “路由名称（小写字母、横线）”，可以写多个路由
2 组件库的使用
2.1 组件库修饰
若要对组件添加css样式，可创建“组件.razor.css”
2.2 对组件进行分组
使用组件时，添加上分组文件夹即可。
2.3 组件继承
关键字：@inherits 可使用继承组件的属性和方法
2.4级联参数的使用
使用CascadingValue向子组件传递数据,多个级联参数，需要Name属性相关联
//父组件
<CascadingValue Value="@isShowTips" Name="isShowTips"><CascadingValue Value="@tipPosition" Name="tipPosition"><KpComponents.BaseComponents.DlgTips DlgClass="tip-near" TrangleClass="tip-trangle-top" Content="数据归属机构：当前账户所属机构在为哪个机构工作，最终数据归当前机构所有" /></CascadingValue>
</CascadingValue>@code{private bool isShowTips = false; //是否显示提示框private string tipPosition;
}//子组件/// <summary>/// 是否进行显示/// </summary>[CascadingParameter(Name= "isShowTips")]public bool isShowTips { get; set; }/// <summary>/// 组件位置信息/// </summary>[CascadingParameter(Name= "tipPosition")]public string tipPosition { get; set; }
2.5 新建blazor项目，自带的图标
2.6 动态切换组件显示
<DynamicComponent Type="组件的命名空间" />
2.7 系统配置信息
系统配置信息在：wwwroot/appsettings.json
使用方式：
//JSON文件
{"h1FontSize": "50px"
}
//组件使用
@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration //将 IConfiguration 实例注入到组件中来访问配置数据<h1 style="font-size:@Configuration["h1FontSize"]">Configuration example
</h1>
2.7 内置组件使用
PageTitle 用以设置导航栏显示的名称
2.8 弹出框组件使用
没有内置组件，可以使用第三方组件：
在Program.cs中进行组件注册：
builder.Services.AddBlazoredModal();
在wwwroot的index.html中引入相关js和css文件：
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
根据需要引入命名空间
@using Blazored.Modal
@using Blazored.Modal.Services
使用方式
[Inject]
protected IModalService ModalService { get; set; }/// <summary>
/// 方法参数：
///string title：弹出框标题
///ModalParameters parameters：组件参数Dictionary<string, object>
///ModalOptions options：可以控制位置、弹出方式等信息
/// </summary>
ModalService.Show<组件>(方法参数);
2.9 支持的 EventArgs 显示在下表中
2.10 延时控制组件
private async Task ShowTips(MouseEventArgs e) //注意使用async Task{tipPosition = $"top:{e.PageY + 5}px;left:{e.PageX-260}px;";isShowTips = true;await Task.Delay(3000); //延时时间设置isShowTips = false;}
3 注意
3.1 设置打开的第一个界面
项目配置打开的首个Razor界面，需要在App.razor中进行配置：
注意打开的第一个Razor界面需要：
@inherits LayoutComponentBase
否则界面无法正常显示。
3.2 IIS部署
使用VS工具发布之后，生成的文件内容如下：
使用IIS无托管部署之后，需要安装：rewrite_amd64_zh-CN
https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads
4 涨知识
<link rel="icon" href="images/Mylogo.ico" /> //用以设置标题栏图标
