Blazor官方文档学习记录

1 官方文档

https://dotnet.microsoft.com/zh-cn/apps/aspnet/web-apps/blazor

2 Blazor教程-生成首个应用

https://dotnet.microsoft.com/zh-cn/learn/aspnet/blazor-tutorial/create

注意：@rendermode InteractiveServer 为组件启用交互式服务器端呈现（有，功能点击可用；无，功能点击不可用）
组件名=组件文件名，添加组件使用文件名页面跳转使用：@page “/counter”
@inject ** 引用注册的服务

3 项目结构

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/project-structure?view=aspnetcore-8.0
应用启动、注册、配置等。
注意：*.styles.css在项目中找不到，这个是由框架编译时自动生成的，它包含了各个界面css隔离的各类样式。

4 基础知识

4.1 生态

https://stackoverflow.com/questions/tagged/blazor
https://app.gitter.im/#/room/#aspnet_Blazor:gitter.im

4.2 Razor组件指令顺序

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/fundamentals/?view=aspnetcore-8.0
@page、@rendermode（.NET 8 或更高版本）、@using、@layout

4.3 Razor组件的初始化方法

protected override async Task OnInitializedAsync()
{
	
}

4.4 在界面中对母版页进行设置，级联值与回调函数的使用

网站界面开发采用了母版页，设置网页内容的高度，遇到某一界面内容是动态生成的，高度不定，需要动态进行控制
https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-8.0

//在母版页中
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@layout MainLayout

@* 中间主体布局 *@
<div class="main-content" style="margin-top:20px;height:@Height;">
  <div class="bar-left" style="margin-right:10px;">
    <KPWeb.Components.unit.BarCard Title="最新信息" />
    <KPWeb.Components.unit.BarCard Title="点击排行" />
  </div>
  <CascadingValue IsFixed=false Value="@Height" Name="Height">
    <CascadingValue Value="OnHeightChanged" Name="OnHeightChanged">
      <div class="content-right">
        @Body
      </div>
    </CascadingValue>
  </CascadingValue>
</div>

@code {
  //默认高度，主要目的就是为了设置当前值
  public string Height = "800px";

  public EventCallback<string> OnHeightChanged;

  public void OnHeightChangedHandle(string height)
  {
    Height = height;
  }
  protected override async Task OnInitializedAsync()
  {
    await base.OnInitializedAsync();
    OnHeightChanged = new EventCallback<string>(this, @OnHeightChangedHandle);
  }
}

//具体界面
@page "/join-us"
@rendermode InteractiveServer
@using KPWeb.Components.Layout
@layout MajorLayout2

<PageTitle>**科技有限公司</PageTitle>

<KPWeb.JobPage Position="首页>招聘信息" Title="**科技有限公司" HasImg=true JobPositions=Jobs />

@code {
	[CascadingParameter(Name = "Height")]
	protected string Height { get; set; }
	[CascadingParameter(Name = "OnHeightChanged")]
	protected EventCallback<string> OnHeightChanged { get; set; }

	private List<JobPosition> Jobs = new List<JobPosition>();

	protected override async Task OnInitializedAsync()
	{
		Height = "1300px";  //针对高度进行设置
		await OnHeightChanged.InvokeAsync(Height);
		//动态设置数据
		Jobs.Add(……);
		Jobs.Add(……);
		Jobs.Add(……);
	}
}

4.5 内置图标Open Iconic的使用

Blazor Web框架不包含Open Iconic字体图标；
Blazor Server框架包含Open Iconic字体图标；
DevExpress Blazor App 框架包含Open Iconic字体图标；
Open Iconic字体图标信息参见：https://blog.csdn.net/mingjing941018/article/details/126689958

5 注意

1.CSS隔离：Razor组件提供了相应的*.razor.css样式控制文件对当前组件样式进行控制，若存在组件引用，针对引用组件的样式控制不能在执行引用的组件样式文件中进行控制，及“cssClass”的值不能在“.razor.css”中；
2.嵌套布局：布局文件可使用另外的布局文件，实现布局文件的复用；
3.命名空间：组件默认以文件路径为命名空间，自定义命名空间使用@namespace;
4.注释：blazor标记中不要带有注释，避免标签显示异常；
5.组件引用：注意属性书写，若书写错误，则界面显示出错；
6.@code部分可独立为cs文件，文件名“.razor.cs”，注意修饰符“partial”,类名为“*”；