在传统开发中全栈往往意味着你要精通 C# 还要精通 JavaScript、HTML、CSS甚至还要学 React 或 Vue 的一大堆生命周期和状态管理库。这对很多专注于业务逻辑的后端同学来说简直是噩梦。微软也意识到了这个痛点于是Blazor诞生了。Blazor 的核心理念很简单用 C# 替代 JavaScript。你可以在 Razor 页面里写 C# 代码处理点击事件甚至直接操作 DOM虽然不推荐。这让 .NET 开发者拥有了无缝的全栈开发能力。二、Blazor Server实时交互的黑魔法Blazor 主要有两种托管模型新手最容易搞混刚子先帮你理一理Blazor WebAssembly (客户端)应用被编译成 WebAssembly直接在浏览器里运行。这就像 React 一样部署在静态服务器上不依赖服务器实时计算。Blazor Server (服务端)应用在服务器上运行通过SignalR一种 WebSocket 技术与浏览器实时通信。刚子敲黑板 本教程选择Blazor Server作为入门。为什么调试简单你可以直接在 Visual Studio 里打断点断点会停在后端的 C# 代码上就像调试普通后台代码一样。加载快浏览器不需要下载整个 .NET 运行时首屏加载速度极快。适合后台管理系统非常适合企业内部使用的后台管理界面开发。三、动手实战创建第一个 Blazor 项目我们重新创建一个项目为了方便演示这次建立一个独立的 Blazor Server 项目。3.1 创建项目在终端执行dotnet new blazorserver -n MyTodoUI cd MyTodoUI dotnet run可视化界面创建项目 打开vs2022→点击创建新项目→选择Blazor Web 应用,点击下一步→依次输入项目名称、解决方案及项目文件路径点击下一步→选择.NET 8 点击创建即可启动后浏览器访问https://localhost:xxxx你会看到一个漂亮的官方模板页面。注意这里创建应用时要选择Blazor Web 应用而不是Blazor Server 应用。从.NET 8开始经典的“Blazor Server”模板已被全新的“Blazor Web App”模板所取代这一点在微软的官方文档和技术社区中都有提及。新的模板统一了Blazor Server和Blazor WebAssembly的开发体验并引入了更灵活的“交互渲染模式”Interactive Render Modes因此VS不再直接提供名为“Blazor Server”的.NET 8项目选项。创建Blazor Server 应用不支持.NET 8。3.2 项目结构解析打开项目重点关注以下几个文件夹Layout/存放公共布局组件如MainLayout.razor布局模板和NavMenu.razor导航菜单。Pages/存放.razor页面组件。比如Home.razor就是首页。_Imports.razor类似于using命名空间这里引入的命名空间会自动应用到所有 Razor 组件。四、组件化开发一切皆组件Blazor 的开发模式是组件化的。一个页面通常由多个小组件拼凑而成。4.1 创建一个简单的计数器组件打开Pages/Home.razor把内容清空写入以下代码page / !-- 路由访问根路径时显示这个组件 -- rendermode InteractiveServer h1欢迎来到刚子的计数器/h1 p当前计数: strongcurrentCount/strong/p button classbtn btn-primary onclickIncrementCount点击我 1/button code { // 这里写 C# 逻辑 private int currentCount 0; private void IncrementCount() { currentCount; } }代码解析page /定义路由告诉 Blazor 这是首页。currentCount使用符号将 C# 变量输出到 HTML 中。onclickIncrementCount将 HTML 的点击事件绑定到 C# 的方法上。运行项目点击按钮你会发现数字变了而且完全不需要写 JavaScript也不用操作 DOMdocument.getElementById...Blazor 会自动帮你更新界面。五、实战进阶连接后端 API光有个计数器没意思我们要把之前教程里做好的 Todo API 接入进来。为了模拟真实的前后端分离场景我们假设后端 API 运行在http://localhost:5000。快速新建一个极简的 ASP.NET Core Web API不需要手动写控制器直接用 最小 API 方式几行代码就搞定。步骤如下在现有解决方案中添加新项目右键解决方案 →添加 → 新建项目选择ASP.NET Core Web API项目名称TodoApi框架.NET 8不勾选“使用控制器” 这样会生成最小 API 模板修改 Program.cs 为以下代码var builder WebApplication.CreateBuilder(args); var app builder.Build(); // 内存数据存储 var todos new ListTodo { new Todo { Id 1, Title 学习 Blazor, IsDone false }, new Todo { Id 2, Title 测试 API, IsDone true } }; // GET /todos app.MapGet(/todos, () todos); // DELETE /todos/{id} app.MapDelete(/todos/{id}, (int id) { var todo todos.FirstOrDefault(t t.Id id); if (todo null) return Results.NotFound(); todos.Remove(todo); return Results.NoContent(); }); // POST /todos app.MapPost(/todos, (Todo todo) { todo.Id todos.Max(t t.Id) 1; todos.Add(todo); return Results.Created($/todos/{todo.Id}, todo); }); app.Run(); public class Todo { public int Id { get; set; } public string? Title { get; set; } public bool IsDone { get; set; } }
前言：后端开发的“前端痛”
在传统开发中全栈往往意味着你要精通 C# 还要精通 JavaScript、HTML、CSS甚至还要学 React 或 Vue 的一大堆生命周期和状态管理库。这对很多专注于业务逻辑的后端同学来说简直是噩梦。微软也意识到了这个痛点于是Blazor诞生了。Blazor 的核心理念很简单用 C# 替代 JavaScript。你可以在 Razor 页面里写 C# 代码处理点击事件甚至直接操作 DOM虽然不推荐。这让 .NET 开发者拥有了无缝的全栈开发能力。二、Blazor Server实时交互的黑魔法Blazor 主要有两种托管模型新手最容易搞混刚子先帮你理一理Blazor WebAssembly (客户端)应用被编译成 WebAssembly直接在浏览器里运行。这就像 React 一样部署在静态服务器上不依赖服务器实时计算。Blazor Server (服务端)应用在服务器上运行通过SignalR一种 WebSocket 技术与浏览器实时通信。刚子敲黑板 本教程选择Blazor Server作为入门。为什么调试简单你可以直接在 Visual Studio 里打断点断点会停在后端的 C# 代码上就像调试普通后台代码一样。加载快浏览器不需要下载整个 .NET 运行时首屏加载速度极快。适合后台管理系统非常适合企业内部使用的后台管理界面开发。三、动手实战创建第一个 Blazor 项目我们重新创建一个项目为了方便演示这次建立一个独立的 Blazor Server 项目。3.1 创建项目在终端执行dotnet new blazorserver -n MyTodoUI cd MyTodoUI dotnet run可视化界面创建项目 打开vs2022→点击创建新项目→选择Blazor Web 应用,点击下一步→依次输入项目名称、解决方案及项目文件路径点击下一步→选择.NET 8 点击创建即可启动后浏览器访问https://localhost:xxxx你会看到一个漂亮的官方模板页面。注意这里创建应用时要选择Blazor Web 应用而不是Blazor Server 应用。从.NET 8开始经典的“Blazor Server”模板已被全新的“Blazor Web App”模板所取代这一点在微软的官方文档和技术社区中都有提及。新的模板统一了Blazor Server和Blazor WebAssembly的开发体验并引入了更灵活的“交互渲染模式”Interactive Render Modes因此VS不再直接提供名为“Blazor Server”的.NET 8项目选项。创建Blazor Server 应用不支持.NET 8。3.2 项目结构解析打开项目重点关注以下几个文件夹Layout/存放公共布局组件如MainLayout.razor布局模板和NavMenu.razor导航菜单。Pages/存放.razor页面组件。比如Home.razor就是首页。_Imports.razor类似于using命名空间这里引入的命名空间会自动应用到所有 Razor 组件。四、组件化开发一切皆组件Blazor 的开发模式是组件化的。一个页面通常由多个小组件拼凑而成。4.1 创建一个简单的计数器组件打开Pages/Home.razor把内容清空写入以下代码page / !-- 路由访问根路径时显示这个组件 -- rendermode InteractiveServer h1欢迎来到刚子的计数器/h1 p当前计数: strongcurrentCount/strong/p button classbtn btn-primary onclickIncrementCount点击我 1/button code { // 这里写 C# 逻辑 private int currentCount 0; private void IncrementCount() { currentCount; } }代码解析page /定义路由告诉 Blazor 这是首页。currentCount使用符号将 C# 变量输出到 HTML 中。onclickIncrementCount将 HTML 的点击事件绑定到 C# 的方法上。运行项目点击按钮你会发现数字变了而且完全不需要写 JavaScript也不用操作 DOMdocument.getElementById...Blazor 会自动帮你更新界面。五、实战进阶连接后端 API光有个计数器没意思我们要把之前教程里做好的 Todo API 接入进来。为了模拟真实的前后端分离场景我们假设后端 API 运行在http://localhost:5000。快速新建一个极简的 ASP.NET Core Web API不需要手动写控制器直接用 最小 API 方式几行代码就搞定。步骤如下在现有解决方案中添加新项目右键解决方案 →添加 → 新建项目选择ASP.NET Core Web API项目名称TodoApi框架.NET 8不勾选“使用控制器” 这样会生成最小 API 模板修改 Program.cs 为以下代码var builder WebApplication.CreateBuilder(args); var app builder.Build(); // 内存数据存储 var todos new ListTodo { new Todo { Id 1, Title 学习 Blazor, IsDone false }, new Todo { Id 2, Title 测试 API, IsDone true } }; // GET /todos app.MapGet(/todos, () todos); // DELETE /todos/{id} app.MapDelete(/todos/{id}, (int id) { var todo todos.FirstOrDefault(t t.Id id); if (todo null) return Results.NotFound(); todos.Remove(todo); return Results.NoContent(); }); // POST /todos app.MapPost(/todos, (Todo todo) { todo.Id todos.Max(t t.Id) 1; todos.Add(todo); return Results.Created($/todos/{todo.Id}, todo); }); app.Run(); public class Todo { public int Id { get; set; } public string? Title { get; set; } public bool IsDone { get; set; } }
