Blazor Workshop:微软为.NET全栈Web开发埋藏的宝藏

GitHub June 2026
⭐ 3565
来源:GitHub归档:June 2026
微软.NET团队正式发布Blazor Workshop官方教程,手把手教你构建完整的披萨订购应用。这份实操指南系统覆盖Blazor Server与WebAssembly双模型、组件架构、数据绑定、路由及依赖注入,堪称.NET开发者最权威的学习路径。

Blazor Workshop托管在GitHub的dotnet-presentations组织下,是一份精心打磨的教育资源,已收获超过3,565颗星。它绝非简单的幻灯片或代码片段集合,而是一套渐进式、以练习驱动的教程,引导开发者构建一个真实世界的应用:披萨订购系统。该工作坊设计为可克隆并逐步跟随,每一章都引入新概念——从基础组件创建到高级状态管理与身份验证。其独特之处在于双轨覆盖Blazor Server与Blazor WebAssembly(WASM),让开发者深入理解服务器端渲染(借助实时SignalR连接)与浏览器端执行之间的权衡。代码质量堪称典范。

技术深度解析

Blazor Workshop是一场关于使用.NET进行组件化Web开发的大师课。其核心在于教授两种托管模型:Blazor Server与Blazor WebAssembly。

Blazor Server将应用逻辑运行在服务器端。UI交互通过持久化的SignalR连接(基于WebSocket)发送至服务器,由服务器处理事件、更新组件树、计算DOM差异,并返回最小的UI更新。该模型具有即时加载速度(无需下载.NET运行时)和完全访问服务器端资源(数据库、API、文件系统)的优势。然而,它引入了延迟敏感性,且需要持续连接;每个用户操作都会产生一次服务器往返。工作坊通过先用Blazor Server构建披萨订购应用的初始界面来演示这一点,展示如何使用`@rendermode InteractiveServer`并管理组件生命周期。

Blazor WebAssembly将.NET代码编译为WebAssembly(WASM)并完全在浏览器中运行。工作坊将同一个披萨应用迁移至WASM,突出差异:应用变为静态SPA,可在初始加载后离线工作,但初始下载包含.NET运行时(压缩后约2-3 MB)及所有程序集。工作坊使用`@rendermode InteractiveWebAssembly`,并展示如何为WASM托管配置项目。一个关键技术细节是使用`Microsoft.AspNetCore.Components.WebAssembly`包和`WebAssemblyHostBuilder`进行DI配置。

组件架构:工作坊强调可复用组件。例如,`PizzaItem`组件是一个自包含的UI元素,通过`[Parameter]`接收`Pizza`对象,并通过`EventCallback`发出事件。`ShoppingCart`组件演示了级联参数和状态共享。工作坊还涵盖了Blazor的`RenderFragment`和模板化组件,这些对于构建灵活UI至关重要。

数据绑定与表单:工作坊使用`@bind`实现输入字段的双向数据绑定,并使用`EditForm`配合`DataAnnotationsValidator`进行表单验证。它演示了如何处理复杂表单(如披萨定制界面:尺寸、配料、数量),涉及`InputSelect`、`InputCheckbox`及自定义验证属性。

路由与导航:工作坊使用`@page`指令和`NavigationManager`实现客户端路由。它展示了如何为订单详情创建路由(`/order/{OrderId}`),以及如何使用查询字符串进行筛选。

依赖注入:工作坊将`PizzaService`和`OrderState`等服务注册到DI容器中。它演示了作用域(scoped)与单例(singleton)生命周期的区别,这在Blazor Server中尤为重要,因为作用域服务与电路(用户会话)绑定。

状态管理:工作坊引入了一个自定义的`OrderState`服务(作用域),用于跨组件保存当前订单。还涵盖了`CascadingValue`,用于在组件树中向下传递状态,无需显式参数传递。

身份验证:工作坊包含一个模块,介绍如何使用Azure AD B2C或Identity Server添加身份验证,展示如何保护路由和访问用户声明。

性能考量:工作坊涉及`RenderMode`和`@key`指令以优化渲染。它解释了Blazor Server的SignalR电路可能成为高延迟网络的瓶颈,而Blazor WASM的初始下载时间可通过延迟加载程序集来缓解。

与其他Blazor学习资源的对比

| 资源 | 格式 | 托管模型 | 项目复杂度 | 星标数 | 维护状态 |
|---|---|---|---|---|---|
| Blazor Workshop (dotnet-presentations) | 逐步练习 | Server + WASM | 中等(披萨订购) | 3,565 | 活跃(微软.NET团队) |
| Blazor University | 在线书籍 | Server + WASM | 低到高 | N/A | 社区维护,更新较少 |
| 官方微软文档 | 参考+快速入门 | Server + WASM | 低 | N/A | 官方,但实操性较弱 |
| Blazor自学教程(中文) | 博客系列 | 仅Server | 低 | N/A | 个人维护,范围有限 |

数据要点:Blazor Workshop因其双模型覆盖、官方维护和渐进式练习结构而脱颖而出,成为.NET开发者最权威的实操资源。

关键参与者与案例研究

微软.NET团队:主要维护者是微软的.NET团队,特别是ASP.NET Core小组。关键人物包括Daniel Roth(首席项目经理)、Steve Sanderson(Blazor创始人)以及更广泛的.NET基金会。他们的战略是将Blazor定位为顶级的.NET Web框架,与React、Angular和Vue竞争。该工作坊是对开发者教育的直接投入,降低了入门门槛。

案例研究:JetBrains的企业级采用:JetBrains,Rider和ReSharper背后的公司,已公开采用Blazor用于部分

更多来自 GitHub

无标题jonschlinkert/markdown-toc is a minimalist API and CLI tool that automatically generates a nested table of contents fromBreakdance:插件驱动的HTML转Markdown神器,强大但值得吗?Breakdance是一个开源的Node.js库,专为将HTML转换为Markdown而设计,但其核心亮点在于高度可插拔、灵活多变的架构。与那些应用固定规则集的单体转换器不同,Breakdance允许开发者注册自定义插件,这些插件可以拦截、Markdown-It:驱动现代Web内容基础设施的隐形引擎Markdown-it 是一个用 JavaScript 编写的高性能、完全符合 CommonMark 规范的 Markdown 解析器,被设计为模块化且可扩展的解析基础设施。凭借超过 21,500 个 GitHub 星标和成熟的生态系统,它查看来源专题页GitHub 已收录 2830 篇文章

时间归档

June 20261930 篇已发布文章

延伸阅读

Blazor的未来已定:微软WebAssembly革命如何重塑.NET开发者生态微软悄然将Blazor仓库并入dotnet/aspnetcore单体仓库,标志着这一C# Web UI框架正式成为ASP.NET Core生态的一等公民。此举不仅是一次代码整合,更是微软对WebAssembly和SignalR战略押注的明确一位微软工程师的实验,如何重写 .NET 在浏览器中的规则在 Blazor 成为微软旗舰产品之前,它只是工程师 Steve Sanderson 的一个业余项目。这个实验性的 UI 框架证明了 .NET 可以通过 WebAssembly 在浏览器中原生运行,挑战了 JavaScript 的垄断地位,Blazing Pizza:一份简单的Blazor教程,揭示微软在WebAssembly上的豪赌一份由微软官方Blazor工作坊构建的披萨订购应用,悄然成为.NET Web开发的里程碑。Blazing Pizza虽看似简单,却展示了微软寄予厚望的Blazor Server与WebAssembly混合架构——这一架构旨在企业级应用中撼动WebContainer Core: How StackBlitz Rewrites Browser-Based Node.js DevelopmentStackBlitz's WebContainer Core shatters the browser's traditional boundaries by running a full Node.js runtime inside a

常见问题

GitHub 热点“Blazor Workshop: Microsoft's Hidden Gem for .NET Full-Stack Web Development”主要讲了什么?

The Blazor Workshop, hosted on GitHub under the dotnet-presentations organization, is a meticulously crafted educational resource that has garnered over 3,565 stars. It is not mere…

这个 GitHub 项目在“Blazor Workshop vs Blazor University comparison”上为什么会引发关注?

The Blazor Workshop is a masterclass in component-based web development using .NET. At its core, the workshop teaches two hosting models: Blazor Server and Blazor WebAssembly. Blazor Server runs the application logic on…

从“Blazor Server vs WebAssembly performance trade-offs”看,这个 GitHub 项目的热度表现如何?

当前相关 GitHub 项目总星标约为 3565,近一日增长约为 0,这说明它在开源社区具有较强讨论度和扩散能力。