大家好，我是码农刚子。
## 一、前言：后端开发的“前端痛”

在传统开发中，全栈往往意味着你要精通 C# 还要精通 JavaScript、HTML、CSS，甚至还要学 React 或 Vue 的一大堆生命周期和状态管理库。这对很多专注于业务逻辑的后端同学来说，简直是噩梦。
微软也意识到了这个痛点，于是 **Blazor** 诞生了。
Blazor 的核心理念很简单：**用 C# 替代 JavaScript**。你可以在 Razor 页面里写 C# 代码，处理点击事件，甚至直接操作 DOM（虽然不推荐）。这让 .NET 开发者拥有了无缝的全栈开发能力。
## 二、Blazor Server：实时交互的黑魔法

Blazor 主要有两种托管模型，新手最容易搞混，刚子先帮你理一理：
1. **Blazor WebAssembly (客户端)**：应用被编译成 WebAssembly，直接在浏览器里运行。这就像 React 一样，部署在静态服务器上，不依赖服务器实时计算。
2. **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://developer.qcloudimg.com/http-save/yehe-11675143/9af1b093d7756fd8e6c42ae2260f3e97.png) ![选择Blazor Web 应用](https://developer.qcloudimg.com/http-save/yehe-11675143/05ca542eb7de30c791f23eca270b53a8.png) ![依次输入项目名称、解决方案及项目文件路径](https://developer.qcloudimg.com/http-save/yehe-11675143/beab073033fcc32d04cdfe9e481ea6cd.png) ![创建.NET 8项目](https://developer.qcloudimg.com/http-save/yehe-11675143/8bb481aa055cb12cbe813b5e6cc6dbd1.png)
启动后，浏览器访问 `https://localhost:xxxx`，你会看到一个漂亮的官方模板页面。
![Blazor Server 应用程序默认模板首页展示图。](https://developer.qcloudimg.com/http-save/yehe-11675143/7cd7a5d5ba63c08890b511216fa63a84.png)
>注意：这里创建应用时要选择 **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 项目结构解析

打开项目，重点关注以下几个文件夹：
![blazor web 应用 结构图](https://developer.qcloudimg.com/http-save/yehe-11675143/1884c5a28d42c2240f61cb12ee206cb9.png)
- **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>当前计数: <strong>@currentCount</strong></p>

<button class="btn btn-primary" @onclick="IncrementCount">点击我 +1</button>

@code {
    // 这里写 C# 逻辑
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```
**代码解析**：
- `@page "/"`：定义路由，告诉 Blazor 这是首页。
- `@currentCount`：使用 `@` 符号将 C# 变量输出到 HTML 中。
- `@onclick="IncrementCount"`：将 HTML 的点击事件绑定到 C# 的方法上。

运行项目，点击按钮，你会发现数字变了！而且完全不需要写 JavaScript，也不用操作 DOM（`document.getElementById...`），Blazor 会自动帮你更新界面。
## 五、实战进阶：连接后端 API

光有个计数器没意思，我们要把之前教程里做好的 Todo API 接入进来。
为了模拟真实的前后端分离场景，我们假设后端 API 运行在 `http://localhost:5000`。
**快速新建一个极简的 ASP.NET Core Web API**：
不需要手动写控制器，直接用 最小 API 方式，几行代码就搞定。步骤如下：
1. 在现有解决方案中添加新项目
	右键解决方案 → **添加 → 新建项目**
	选择 **ASP.NET Core Web API**
	项目名称：**TodoApi**
	框架：.NET 8
	**不勾选**“使用控制器” （这样会生成最小 API 模板）
2. 修改 Program.cs 为以下代码

```
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// 内存数据存储
var todos = new List<Todo>
{
    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; }
}
```
>注意路由是 /todos（复数），没有 api 前缀。后面的前端调用也需要同步修改。

### 5.1 注入 HttpClient

在 Blazor Web App 中，我们通过 `HttpClient` 发起网络请求。首先在 `Program.cs` 中注册服务：
```
// Program.cs

// ... 其他代码 ...

// 注册 HttpClient，BaseAddress 设为后端 API 地址
builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri("http://localhost:5000") // 这里替换为你实际的后端地址
});

// ...
```
### 5.2 定义数据模型

为了接收 JSON 数据，我们需要定义一个简单的 DTO 类。在项目中新建 `Models/TodoItemDto.cs`：
```
public class TodoItemDto
{
    public int Id { get; set; }
    public string? Title { get; set; }
    public bool IsDone { get; set; }
}
```
### 5.3 获取并展示数据

新建一个页面 `Pages/Todo.razor`：
```
@page "/todo"
@rendermode InteractiveServer
@using MyTodoUI.Models
@inject HttpClient Http 

<h1>待办事项列表</h1>

@if (todos == null)
{
    <p><em>正在加载数据...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in todos)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Title</td>
                    <td>@(item.IsDone ? "已完成" : "进行中")</td>
                    <td>
                        <button class="btn btn-sm btn-danger" @onclick="() => DeleteTodo(item.Id)">删除</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private List<TodoItemDto>? todos;

    // 组件初始化时触发，适合加载数据
    protected override async Task OnInitializedAsync()
    {
        try 
        {
            // 调用 GET /todos 接口
            todos = await Http.GetFromJsonAsync<List<TodoItemDto>>("todos");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"获取数据失败: {ex.Message}");
        }
    }

    private async Task DeleteTodo(int id)
    {
        // 调用 DELETE /todos/{id} 接口
        await Http.DeleteAsync($"todos/{id}");
        
        // 刷新列表
        todos = await Http.GetFromJsonAsync<List<TodoItemDto>>("todos");
    }
}
```
![Blazor 页面展示从后端 API 获取的待办事项列表数据截图](https://developer.qcloudimg.com/http-save/yehe-11675143/ca0ffb462a4dae4a5c474b0802d48061.png)
**刚子小贴士**： 注意到 `@inject HttpClient Http` 了吗？这依然是依赖注入。Blazor 的组件本质上也是一个类，我们可以直接在视图中注入服务，非常方便。
另外 Blazor Web App，务必在组件上添加 `@rendermode InteractiveServer` 。
`OnInitializedAsync` 是 Blazor 的生命周期方法，相当于 React 的 `useEffect` 或 Vue 的 `mounted`，在这里发起网络请求是最标准的做法。
## 六、双向绑定：让表单变简单

Web 开发离不开表单。Blazor 提供了强大的**双向绑定**功能。
### 6.1 添加新待办

我们在 `Todo.razor` 底部添加一个输入框：
```
<h3>添加新任务</h3>
<EditForm Model="@newTodo" OnValidSubmit="@AddTodo">
    <div class="form-group">
        <InputText @bind-Value="newTodo.Title" class="form-control" placeholder="输入任务内容" />
    </div>
    <button type="submit" class="btn btn-success mt-2">提交</button>
</EditForm>

@code {
    // ... 之前的代码 ...

   private TodoItemDto newTodo = new TodoItemDto() { };

	 private async Task AddTodo()
	 {
			 // 调用 POST /todos 接口
			 var response = await Http.PostAsJsonAsync("todos", newTodo);

			 if (response.IsSuccessStatusCode)
			 {
					 newTodo = new TodoItemDto(); // 清空输入框
					 todos = await Http.GetFromJsonAsync<List<TodoItemDto>>("todos"); // 刷新列表
			 }
	 }
}
```
!video[video](https://images.codeobservatory.cn/coderlog/vedio/2026-05-23_164024_203.mp4){poster=https://www.codeobservatory.cn/post/dotnet-8-web-development-part6-blazor-full-stack-no-javascript-anxiety}
**核心解析**：
- `@bind="newTodo.Title"`：这是双向绑定的魔法。当你在输入框打字时，`newTodo.Title` 会自动更新；当你修改 `newTodo` 时，输入框也会自动变。
- `EditForm`：Blazor 提供的表单组件，可以集成我们之前讲的 DataAnnotations 验证。

**刚子敲黑板**： Blazor 的表单处理比原生 HTML 强大得多。你甚至可以在 `InputText` 上加 `<DataAnnotationsValidator />`，直接复用我们在第五篇写的验证规则，前端连验证逻辑都不用写了！
## 七、延伸阅读：刚子的 Blazor 深度系列

本篇实战教程旨在帮你快速打通前后端。如果你在实战过程中，想要更深入地了解 Blazor 的基础概念、路由机制、布局系统或 JS 交互，强烈推荐阅读我之前整理的系列专栏，那里有更细致的图文讲解：
[Blazor入门到实战-腾讯云开发者社区](https://cloud.tencent.com/developer/column/106355)

通过这些文章，你将建立起完整的 Blazor 知识体系。
## 八、总结与下篇预告

在这篇教程中，我们通过 Blazor Server 实现了一个简单但完整的“全栈”功能：
1. 理解了 Blazor Server 的实时通信原理。
2. 学会了使用 `@inject` 注入服务。
3. 实现了从后端 API 获取数据、删除数据和提交数据。
4. 掌握了双向绑定简化表单开发。

现在的你，已经具备了独立开发一个小型管理系统的能力：后端用 Minimal API + EF Core，前端用 Blazor Server，全部用 C# 贯通。
**下一篇预告**：
我们的应用已经能跑能跳了，但在互联网上裸奔是很危险的。谁都可以调用你的 `/todos` 接口吗？显然不行。 在下一篇教程中，我们将引入 **身份验证与授权**。刚子将带你深入了解 JWT (JSON Web Token)，给你的 API 加上“门禁卡”，只有拿着正确 Token 的用户才能进出。
安全防线，即将构筑！
如果本篇教程你对有用，欢迎**点赞、收藏、转发**给你身边的朋友，一起学习。

在传统开发中，全栈往往意味着你要精通 C# 还要精通 JavaScript、HTML、CSS，甚至还要学 React 或 Vue 的一大堆生命周期和状态管理库。这对很多专注于业务逻辑的后端同学来说，简直是噩梦。微软也意识到了这个痛点，于是 Blazor 诞生了。Blazor 的核心理念很简单：用 C# 替代 JavaScript。你可以在 Razor 页面里写 C# 代码，处理点击事件，甚至直接操作 DOM（虽然不推荐）。这让 .NET 开发者拥有了无缝的全栈开发能力。

.NET 8 Web开发入门（六）：Blazor 全栈开发——告别 JavaScript 焦虑

在传统开发中，全栈往往意味着你要精通 C# 还要精通 JavaScript、HTML、CSS，甚至还要学 React 或 Vue 的一大堆生命周期和状态管理库。这对很多专注于业务逻辑的后端同学来说，简直是噩梦。微软也意识到了这个痛点，于是 Blazor 诞生了。Blazor 的核心理念很简单：用 C# 替代 JavaScript。你可以在 Razor 页面里写 C# 代码，处理点击事件，甚至直接操

全栈软件工程师

前端

后端

编程语言

本文为.NET开发者提供Blazor Server全栈开发实战指南。通过创建计数器组件和连接Todo API的完整案例，详解如何用C#替代JavaScript实现前后端交互。涵盖项目创建、组件化开发、HttpClient数据获取、双向绑定表单处理等核心技能，特别适合后端开发人员快速上手企业级管理系统开发。

身份验证

数据存储

服务器

路由

JSON

2026年中大促 | AI 领航 智绘未来

腾讯云大数据特惠新用户0.1折起


oceanus

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

.NET 8 Web开发入门（六）：Blazor 全栈开发——告别 JavaScript 焦虑-腾讯云开发者社区-腾讯云

.NET 8 Web开发入门（六）：Blazor 全栈开发——告别 JavaScript 焦虑

.NET 8 Web开发入门（六）：Blazor 全栈开发——告别 JavaScript 焦虑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐