前言:后端开发的“前端痛”
在传统开发中全栈往往意味着你要精通 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; } }

相关新闻

深入解析MAA跨平台架构:三大系统的完整部署指南

深入解析MAA跨平台架构:三大系统的完整部署指南

深入解析MAA跨平台架构:三大系统的完整部署指南 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手,全日常一键长草!| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://gitcode.c…

2026/6/28 7:33:32阅读更多 →
网盘文件解析提速优化指南:PanDown与速盘等不限速软件对比

网盘文件解析提速优化指南:PanDown与速盘等不限速软件对比

这两天熬夜debug一个服务端的并发连接问题,刚把代码merge上去,揉着酸痛的脖子打算下班,顺手刷了下技术社区。讲真,看到不少同行还在抱怨网盘大文件传输速度卡在几百KB/S动弹不得,甚至为了这个去折腾各种来路不明的脚本…

2026/6/28 7:33:32阅读更多 →
双非本科小白也能抓住风口!大模型应用开发(RAG、Agent)实战指南+收藏

双非本科小白也能抓住风口!大模型应用开发(RAG、Agent)实战指南+收藏

本文针对双非本科生在大模型应用开发(如RAG、Agent)领域的职业发展问题,提供现实路径与策略。文章强调通过打造实际可用的Agent项目作品集、深耕垂直领域、建立公开影响力、选择合适的公司等策略,可有效弥补学历短板,抓…

2026/6/28 7:33:32阅读更多 →
系统集成项目管理工程师进阶必修课:用TOGAF+ITIL+PRINCE2三维框架重构你的项目治理力

系统集成项目管理工程师进阶必修课:用TOGAF+ITIL+PRINCE2三维框架重构你的项目治理力

更多请点击: https://kaifayun.com 第一章:系统集成项目管理工程师的核心能力图谱 系统集成项目管理工程师处于技术与管理的交汇点,其核心能力并非单一技能的叠加,而是跨域协同、动态演进的复合型能力体系。这一图谱涵盖技术纵深…

2026/6/28 8:58:37阅读更多 →
Windows微信自动化终极指南:Wechaty Puppet XP技术深度解析与实战应用

Windows微信自动化终极指南:Wechaty Puppet XP技术深度解析与实战应用

Windows微信自动化终极指南:Wechaty Puppet XP技术深度解析与实战应用 【免费下载链接】puppet-xp Wechaty Puppet WeChat Windows Protocol 项目地址: https://gitcode.com/gh_mirrors/pu/puppet-xp 在数字化转型浪潮中,企业微信自动化需求日益增…

2026/6/28 8:58:37阅读更多 →
过敏调理赛道消费需求激增:含IgG牛初乳改善常年过敏性鼻炎成大众关注焦点

过敏调理赛道消费需求激增:含IgG牛初乳改善常年过敏性鼻炎成大众关注焦点

近期全国多地进入换季温差波动期,常年过敏性鼻炎群体的非药物调理需求集中释放,主打免疫调节作用的含IgG牛初乳产品的实际作用属性,正在成为健康消费领域的核心热议话题。 近年来国内过敏性鼻炎患病率持续走高,公开流行病学调研数…

2026/6/28 8:58:37阅读更多 →
HTML转Figma技术实现:基于DOM解析与设计系统转换的架构深度解析

HTML转Figma技术实现:基于DOM解析与设计系统转换的架构深度解析

HTML转Figma技术实现:基于DOM解析与设计系统转换的架构深度解析 【免费下载链接】figma-html Convert any website to editable Figma designs 项目地址: https://gitcode.com/gh_mirrors/fi/figma-html HTML转Figma工具通过创新的DOM解析技术和设计系统转换…

2026/6/28 8:58:37阅读更多 →
3步快速上手:HTML转Figma工具的完整使用指南

3步快速上手:HTML转Figma工具的完整使用指南

3步快速上手:HTML转Figma工具的完整使用指南 【免费下载链接】figma-html Convert any website to editable Figma designs 项目地址: https://gitcode.com/gh_mirrors/fi/figma-html 你是否曾经羡慕那些精美的网页设计,想要在Figma中快速复刻却无…

2026/6/28 8:58:37阅读更多 →
5分钟搭建企业级微信机器人:Wechaty Puppet XP零成本自动化方案

5分钟搭建企业级微信机器人:Wechaty Puppet XP零成本自动化方案

5分钟搭建企业级微信机器人:Wechaty Puppet XP零成本自动化方案 【免费下载链接】puppet-xp Wechaty Puppet WeChat Windows Protocol 项目地址: https://gitcode.com/gh_mirrors/pu/puppet-xp 在数字化转型浪潮中,企业微信自动化已成为提升运营效…

2026/6/28 8:53:37阅读更多 →
AI Coding 六个月真实ROI账本:产品经理的血泪教训,研发的冷静忠告

AI Coding 六个月真实ROI账本:产品经理的血泪教训,研发的冷静忠告

6个月前的2025年12月,Boris Cherny 公开宣布自己卸载了 IDE。一时间,Vibe Coding 成了全行业最热的话题。6个月后,当我们回过头来拉一份真实账本,发现事情远没有"一句话生成一个App"那么浪漫。本文从产品经理和研发两个…

2026/6/28 0:08:01阅读更多 →
审计来了,数据权限全开——审计走了,怎么确保权限全部关掉?

审计来了,数据权限全开——审计走了,怎么确保权限全部关掉?

引言:审计结束三个月了,审计员的权限还没关某城商行每年按照监管要求开展至少一次数据安全审计。审计期间,内审部门需要抽样检查各类业务数据——交易流水、客户信息、员工操作日志、权限配置记录。这些数据分布在不同系统中,审计…

2026/6/28 0:08:01阅读更多 →
AI Coding 六个月真实ROI账本:产品经理的血泪教训,研发的冷静忠告

AI Coding 六个月真实ROI账本:产品经理的血泪教训,研发的冷静忠告

6个月前的2025年12月,Boris Cherny 公开宣布自己卸载了 IDE。一时间,Vibe Coding 成了全行业最热的话题。6个月后,当我们回过头来拉一份真实账本,发现事情远没有"一句话生成一个App"那么浪漫。本文从产品经理和研发两个…

2026/6/28 0:08:01阅读更多 →
审计来了,数据权限全开——审计走了,怎么确保权限全部关掉?

审计来了,数据权限全开——审计走了,怎么确保权限全部关掉?

引言:审计结束三个月了,审计员的权限还没关某城商行每年按照监管要求开展至少一次数据安全审计。审计期间,内审部门需要抽样检查各类业务数据——交易流水、客户信息、员工操作日志、权限配置记录。这些数据分布在不同系统中,审计…

2026/6/28 0:08:01阅读更多 →