lazor 是由微软开发的一个开源 Web 框架，它允许开发者使用 C# 和 .NET 来构建交互式的客户端 Web 用户界面，而无需编写大量的 JavaScript。
简单来说，Blazor 的核心目标是让后端开发人员能够利用他们熟悉的 .NET 生态系统（语言、库、工具）来完成前端开发。
Blazor 的主要特点
- 使用 C# 代替 JavaScript： 你可以直接在 Razor 组件中使用 C# 代码来处理逻辑、事件和数据绑定。
- 代码共享： 由于前后端都使用 .NET，你可以轻松地在客户端和服务器端之间共享模型（Models）、验证逻辑和工具类。
- 基于组件的架构 ： Blazor 使用 Razor 组件（
.razor文件）来构建 UI。每个组件都是一个自包含的 UI 单元，包含 HTML 标记和 C# 代码。 - 强大的生态系统： 你可以使用 NuGet 包管理器来引入现有的 .NET 库，并利用 Visual Studio 等强大的 IDE 进行开发和调试。
Blazor 的两种主要托管模式
Blazor 主要分为两种运行方式，它们决定了代码在哪里执行：
1. Blazor WebAssembly (WASM)
- 运行位置：代码直接在用户的浏览器中运行。
- 原理：它将 .NET 运行时编译为 WebAssembly，并在浏览器沙箱中执行。
- 优点：离线能力强，减轻服务器负载，响应速度快。
- 缺点：首次加载时需要下载较大的运行时和程序集文件。
2. Blazor Server
- 运行位置：代码在服务器上运行。
- 原理 ：通过 SignalR（实时长连接）与浏览器进行通信。浏览器发送 UI 事件（如点击按钮），服务器处理后将 UI 更新推回浏览器。
- 优点：首屏加载极快，代码完全在服务器端，安全性更高。
- 缺点：由于依赖长连接，网络延迟会直接影响用户体验，且服务器需要维护每个用户的连接状态。
另外两种非主流模式
3.无交互性(静态页面模式)
这种模式是基础,即每个页面都是只浏览显示的模式,不需要ui与后台数据交互,页面可以写在本地也可以从服务器访问得到,这些页面都是静态的
4.混合模式
这是我们主要的学习方向,他可以跨平台,如安卓,电脑等等设备运行
二.新建Blazor web app程序
1.模式的选择
在新建程序时,这四个选项就是我们前面介绍的四种模式,一般情况下我们都是选择无(无交互性)模式开始,这种模式是所有blazor入门的基础,后面如果需要交互性我们可以自己再加上去
2.项目文件的基本结构
一个Blazor web app项目主要文件结构如下图,Program.cs是主程序入口,App.razor是根组件文件,Routes.razor是路由组件文件, Layout文件夹是布局文件夹,里面包含主布局文件,Pages是组件文件夹,包含所有组件(页面),_imports.razor文件为全局命名空间引用文件
在Blazor,所有页面还是控制器文件都被称之为组件,他们都是如下图所示是Razor组件,格式都是.razor,可以看到,上图的所有文件其实都是一个Razor页面文件,具体是做为显示页面还是控制器等等,功能都是由我们自己写的,定的,但在Blazor中他们通通都称为组件
3.Blazor程序的运行规则
3.1.从主程序Program.cs开始
App.Run()方法会循环监听是否有http请求,如果有就会自动去匹配请求的URL路由页面
cs
using BlazorApp1.Components;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
}
app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>();
app.Run();3.2.根组件App.razor
上面主程序app对象运行的其实是根组件文件App.razor,根组件代码中核心部分是<bady>标签内的内容,他执行了<Routes/>和一个 .js文件,
<Routes/>就是上面所说的Routes.razor是路由组件文件,也就是说,app文件会根据http请求的URL,执行这个路由匹配组件Routes.razor找到用户所需要的页面文件,下面的<script>标签内的内容是程序全自动自己匹配生成的内部文件,他是必须存在的,照写就行,不需要理解他是什么意思
cs
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<ResourcePreloader />
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["BlazorApp1.styles.css"]" />
<ImportMap />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="@Assets["_framework/blazor.web.js"]"></script>
</body>
</html>3.3.Routes.razor路由组件
路由组件会根据http请求的URL去查找匹配的页面,并将匹配到的页面按主布局文件Layout.MainLayout的格式,显示出来
cs
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>http请求的url它会去哪里找,找到谁?
假设在浏览器请求http://localhost:5189/,,,,,,,localhost:5189是我们实际的端口后,在http请求中可能替换为80端口,斜杆/就是我们请求的url
知道了浏览器http请求的url是一个/,那他就会去寻找一个 @page "/"定义的组件,这些组件一般都在Components文件夹或Pages文件夹内,在编程规范中,可路由文件(用@page去调用的文件 )都规定放在Pages文件内,可重复调用的控件(没有@page标签)要求都放在Components文件夹
,由此可见,http请求的URL会去Pages文件夹内找到这个@page "/"定义的组件(页面)
点进Home.razor文件看看,他就是定义为@page "/",浏览器请求的URL就是会匹配到这个页面,他会反馈给浏览器显示出来
cs
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.3.4.如何反馈给浏览器显示出来
他不会直接把Home.razor给到浏览器去显示出来,因为这样子的话,每个页面文件显示的格式都不一样,会非常乱,或者说,每个页面都需要一个.css文件去装饰,为了使整个app页面都有一个规范的界面,这个匹配到的Home页面内容会被拿来替换为主布局文件bady标签内
到了这里,所有http请求找到的page组件都会以主布局文件规定的样式显示在浏览器上,即主布局文件写好的样式其实是下图这样的,左边有一个侧边栏,右边有一个div,浏览器请求到的url匹配页面内容都会被映射到右边的div内显示出来
再看看我们Home.razor组件内容,他就是浏览器所显示的内容
cs
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.