最近在研究学习blazor,为了加深记忆,手动记录一下,以下内容为个人理解记录,仅供参考:
Blazor开发学习
一 分类
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" /> //用以设置标题栏图标