asp.net Core blazor学习笔记

最近在研究学习blazor，为了加深记忆，手动记录一下，以下内容为个人理解记录，仅供参考：

Blazor开发学习

• [一 分类](#一 分类)
• • [1 Blazor Server 应用](#1 Blazor Server 应用)
  • [2 Blazor WebAssembly 应用](#2 Blazor WebAssembly 应用)
  • [3 Blazor Hybrid 应用和 .NET MAUI](#3 Blazor Hybrid 应用和 .NET MAUI)
• [二 基础知识](#二 基础知识)
• • [1 路由](#1 路由)
  • [2 组件库的使用](#2 组件库的使用)
  • • [2.1 组件库修饰](#2.1 组件库修饰)
    • [2.2 对组件进行分组](#2.2 对组件进行分组)
    • [2.3 组件继承](#2.3 组件继承)
    • 2.4级联参数的使用
    • [2.5 新建blazor项目，自带的图标](#2.5 新建blazor项目，自带的图标)
    • [2.6 动态切换组件显示](#2.6 动态切换组件显示)
    • [2.7 系统配置信息](#2.7 系统配置信息)
    • [2.7 内置组件使用](#2.7 内置组件使用)
    • [2.8 弹出框组件使用](#2.8 弹出框组件使用)
    • [2.9 支持的 EventArgs 显示在下表中](#2.9 支持的 EventArgs 显示在下表中)
    • [2.10 延时控制组件](#2.10 延时控制组件)
  • [3 注意](#3 注意)
  • • [3.1 设置打开的第一个界面](#3.1 设置打开的第一个界面)
    • [3.2 IIS部署](#3.2 IIS部署)
  • [4 涨知识](#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" />  //用以设置标题栏图标