Blazor资源大全

[]( "")

一个收集了很棒的Blazor资源的集合。

Blazor是一个使用C#/Razor和HTML在浏览器中运行的.NET Web框架。

欢迎贡献！请先查看贡献指南[1]。感谢所有的贡献者[2]，你们真棒，没有你们就不可能实现这个！

如果你需要在这个列表中搜索，你可以尝试这个很棒的网站：Awesome Blazor Browser[3]。感谢@jsakamoto提供这个！源代码[4]。

目录介绍[5]通用[6]模板[7]示例项目[8]教程[9]库和扩展[10]真实世界应用[11]视频[12]文章[13]播客[14]演示幻灯片[15]工具[16]书籍[17]电子书[18]课程[19]社区[20]其他语言[21]介绍什么是Blazor？

Blazor是一个用于使用C#构建客户端Web应用程序的.NET Web框架。

Blazor允许您使用C#而不是JavaScript构建交互式Web用户界面。Blazor应用程序由使用C#、HTML和CSS实现的可重用的Web用户界面组件组成。客户端和服务器代码都是用C#编写的，允许您共享代码和库。 更多信息请参阅官方Blazor网站[22]。

入门

要开始使用Blazor，请按照Blazor入门[23]文档中的说明进行操作。

在Microsoft Learn上完成使用Blazor构建Web应用程序[24]学习会议也是一个不错的主意。另一个很好的入门资源是Jeff Fritz在Channel9[25]或YouTube[26]上的初学者系列。

通用ASP.NET博客存档[27] - 关于Blazor的ASP.NET博客存档。Blazor[28] - Blazor的官方网站，来自Microsoft。Microsoft Learn上的Blazor课程[29] - Microsoft Learn上的Blazor课程。.NET基金会上的Blazor-Dev库[30] - Blazor“dev”分支的每日构建。Blazor扩展[31] - 为Microsoft ASP.Net Core Blazor精选的扩展。Blazor大学[32] - 非官方的文档网站。演示[33] - 官方基本演示网站。文档[34] - 官方文档，由Microsoft提供。eShopOnBlazor[35] - 将传统的ASP.NET Web Forms应用程序迁移到Blazor的示例，由Microsoft Architecture提供。常见问题[36] - 常见问题。GitHub存储库[37] - 官方Blazor存储库（即ASP.NET Core存储库）。'Hello World'示例[38] - 'Hello World'示例。ASP.NET Core简介[39] - ASP.NET Core简介。工作坊[40] - 构建一个完整的Blazor应用程序，并在此过程中了解各种Blazor框架功能。Blazor WebAssembly性能最佳实践[41] - ASP.NET Core Blazor WebAssembly性能最佳实践，由Pranav Krishnamoorthy和Steve Sanderson提供。themesof.net[42] - .NET 6规划过程。30秒Blazor[43] - 有用代码片段的集合，灵感来自流行的30秒JavaScript和React。模板BitPlatform模板[44] - - 使用.Net MAUI和Blazor的解决方案模板，具备开箱即用的最佳实践，实现快速高质量的跨平台开发，支持Web、Android、iOS和Windows，具备原生美观的Blazor组件。这些模板创建的项目包含了开发实际应用所需的一切，包括（但不限于）CI/CD流水线、Azure的基础设施即代码、本地化、多模式开发（Blazor Server/WASM/Hybrid）、内置的异常处理等。了解更多[45]。Blazor Hero[46] - - 使用MudBlazor组件构建的Blazor WebAssembly的干净架构解决方案模板。这个项目将使您的Blazor学习过程比您预期的要容易得多。Blazor Hero旨在成为一个企业级的样板，完全开源，免费使用。在这里阅读快速入门指南[47]。Blazor BFF Azure AD[48] - - 此模板可用于创建一个在ASP.NET Core Web应用程序中托管的Blazor WASM应用程序，使用Azure AD和Microsoft.Identity.Web进行身份验证，使用BFF安全架构进行身份验证（服务器身份验证）。这将从浏览器中删除令牌，并在每个HTTP请求、响应中使用cookie。该模板还尽可能地为Blazor应用程序添加了所需的安全标头。在这里阅读快速入门指南[49]。Blazor BFF Azure B2C[50] - - 此模板可用于创建一个在ASP.NET Core Web应用程序中托管的Blazor WASM应用程序，使用Azure B2C和Microsoft.Identity.Web进行身份验证，使用BFF安全架构进行身份验证（服务器身份验证）。这将从浏览器中删除令牌，并在每个HTTP请求、响应中使用cookie。该模板还尽可能地为Blazor应用程序添加了所需的安全标头。在这里阅读快速入门指南[51]。使用Blazor和C#从头开始构建文本编辑器[52] - YouTube上的一系列视频，介绍如何使用Blazor和.NET从头开始构建自己的IDE。起始点仓库[53]。Blazor Studio仓库[54]。示例项目AI

Cledev.OpenAI[55] - 用于OpenAI的.NET 7 SDK，带有一个Blazor Server的游乐场。

认证BlazorBoilerplate[56] - 带有IdentityServer4 Material Design的真实世界管理仪表板/入门套件。演示[57]。TheIdServer[58] - 基于IdentityServer4的OpenID/Connect服务器。BlazorWithIdentity[59] - 展示使用EF Core和Identity身份验证的Blazor应用程序的示例项目。Blorc.OpenIdConnect[60] - 在Blazor上正确使用OpenID Connect的方法。Blazor-WASM-AzureAD-gRPC[61] - Blazor WASM、Azure AD、REST和gRPC。Quiz manager secured by Auth0[62] - 该存储库包含一个使用Auth0[63]进行安全保护的Blazor WebAssembly应用程序实现的简单的测验管理器。实现细节在以下文章中描述：Securing Blazor WebAssembly Apps[64]。CMSBlogifier[65] - 带有Blazor管理仪表板的ASP.NET Core博客应用程序。演示[66]。eShopOnBlazor[67] - 将传统的ASP.NET Web Forms应用程序迁移到Blazor。JHipster.NET[68]JHipster[69]是一个在Java世界中生成现代应用程序的知名平台。JHipster[70]提供了一个蓝图系统，允许覆盖生成器的默认行为。JHipster.NET是一个蓝图，通过将后端部分从最初生成的spring boot更改为asp.net core，覆盖了后端部分。对于前端，可以使用所有常见的语言（angular、react），包括Blazor。RapidCMS[71] - 一个基于代码的、可扩展的Blazor应用程序，为您的数据库生成CMS。BlazorShop[72] - 使用Blazor WebAssembly构建的简单商店应用程序。Umbraco9 & Blazor WASM Starter Site[73] - 用Blazor WebAssembly和Tailwind CSS/UI制作的Umbraco v9的简单入门站点。这是一个我用来玩耍和尝试Umbraco 9、Blazor WebAssembly、TailwindCSS、块列表编辑器和其他几个概念的项目。游戏Trains.NET[74] - 使用.NET和C#构建的2D游戏，通过Twitch流[75]可以在线玩Trains，网址为wengier.com/Trains.NET[76]。AsteroidsWasm[77] - 一组使用单个.NET Standard项目的.NET 5 C#应用程序，运行在：Blazor Client（WebAssembly）、Blazor Server、Electron（通过Blazor Server）、WPF、WinForms、Xamarin。演示[78]。DiabloBlazor[79] - DiabloWeb的Blazor移植，使其成为一个双WebAssembly应用程序：一个WebAssembly（C#）PWA托管一个WebAssembly（C++）游戏。演示[80]。Board Games[81] - Fusion[82] + Blazor示例，一个完全功能的Web应用程序，允许您进行实时多人游戏。演示[83]。Wolfenstein 3D ported to Blazor[84] - Wolfenstein 3D移植到现代C#和Blazor。文章[85]。ZXSpectrum[86] - 在Blazor WebAssembly上运行的ZX Spectrum模拟器。演示[87]。WordleBlazor[88] - Blazor中受欢迎的Wordle游戏的简单克隆。演示[89]。混合Blazor + Electron[90] - 在Electron外壳中托管Razor组件。这允许使用.NET和Web技术构建现代、高性能的跨平台桌面应用程序。Blazor + WebWindow[91] - WebWindow[92]类似于Electron，但不需要捆绑Node.js或Chromium，并且没有大部分API。WebWindow源代码[93]。这里有Blazor + WebWindow示例[94]。Photino[95] - 构建原生的、跨平台的桌面应用程序，比轻量级还要轻量级。Photino是一个轻量级的开源框架，用于使用Web UI技术构建原生的、跨平台的桌面应用程序。Blazor + Umbraco Heartcore[96] - 使用Umbraco Heartcore[97]与Blazor的示例。Blazor Wasm with ASP.NET Framework 4.x[98] - 通过一些调整和限制，您可以在Net Framework 4.x或其他环境中运行Blazor Wasm。Medium上的解释[99]。RemoteBlazorWebView[100] - RemoteBlazorWebView使您能够使用Web浏览器与使用BlazorWebView WPF控件或WinForms控件开发的程序的用户界面进行交互。BlazorInAngularDemo[101] - 演示了如何逐步将现有的Angular应用程序逐步迁移到Blazor，包括集成Blazor组件和调用Angular服务方法。演示[102]。IDEBlazor Studio[103] - 使用Photino主机、Blazor UI和C#编写的.NET解决方案的IDE。Picat语言IDE[104] - 基于Monaco Editor的Picat逻辑编程语言[105]的IDE。演示[106]。物联网PresenceLight[107] - PresenceLight是一个将各种状态广播到飞利浦Hue或LIFX灯泡的解决方案。您可以广播的一些状态包括：您在Microsoft Teams中的可用性、您当前的Windows 10主题以及您选择的主题或颜色。博客文章[108]。演示视频[109]。Meadow Weather[110] - 在此示例中，Meadow微控制器从LM35温度传感器中获取数据。该数据通过HTTP请求发送到API控制器端点，并存储在数据库中，可以使用Blazor Web应用程序中的图表进行可视化。机器学习可扩展情感分析[111] - 一个示例，能够在客户端使用非常交互式的应用程序（基于Blazor）对用户的写作进行情感分析预测/检测，并在服务器端运行一个ML.NET模型（基于二元分类的情感分析）。optimizer.ml[112] - 一个“无服务器”的通用算法参数优化套件。还提供Quantconnect Lean[113]交易算法的离线优化。演示 ()[114]。棒球机器学习工作台[115] - 一个展示使用内存中的机器学习模型进行假设分析的Web应用程序。实时演示[116]。BlazorML5[117] - Blazor中的ML5机器学习，使用JSInterop机制。移动Mobile Blazor Bindings[118] - 实验性的Mobile Blazor Bindings - 使用Blazor构建原生移动应用程序。快速开发框架WalkingTec.Mvvm (WTM)[119] - 基于.NET Core和EF的开发框架。支持Blazor、Vue、React和LayUI，可一键生成CRUD、导入/导出等代码。网站[120]。待办事项TodoApi by David Fowler[121] - David Fowler在.NET 7中创建的待办事项应用程序，包括一个基于ASP.NET Core托管的Blazor WASM前端应用程序和一个使用最小API的ASP.NET Core REST API后端。Bolero.TodoMVC[122] - 使用Bolero的TodoMVC克隆。ididit![123] - 适合拖延症患者的习惯追踪器。记录笔记，管理任务，追踪习惯。演示[124]。其他CleanArchitecture[125] - 使用MudBlazor组件构建的Blazor WebAssembly的Clean Architecture模板。Oqtane Framework[126] - 用于Blazor的模块化应用程序框架。Flight Finder[127] - 航班搜索。LinqToTwitter Blazor示例[128] - 用于Twitter API的LINQ提供程序（Twitter库）。BlazorFileReader[129] - 在Blazor中读取只读文件流。演示[130]。eShopOnBlazor[131] - 将传统的ASP.NET Web Forms应用程序迁移到Blazor。BlazorChatSample[132] - 使用SignalR JS客户端和Interop的Blazor聊天演示。Command and Control, by David Fowler[133] - 这是一个使用Blazor服务器和SignalR进行命令和控制的示例。代理连接到托管SignalR Hub的Blazor服务器应用程序，我们可以对连接的代理发出各种命令（此功能使用客户端结果）。BlazorCRUD[134] - 展示Blazor的关键功能的示例业务应用程序。演示[135]。Money[136] - 使用CQRS+ES实现的资金管理器。演示[137]。Blazor Weather[138] - 一个Blazor天气示例应用程序，显示当前位置的天气和一组固定位置的天气。由Daniel Roth在.NET Conf 2019上演示。演示[139]。Blazor.SVGEditor[140] - 一个基本的HTML SVG编辑器，使用Blazor WASM编写。演示[141]。NethereumBlazor[142] - 以太坊区块链浏览器和简单钱包。FFmpegBlazor[143] - FFmpegBlazor提供了在Blazor Wasm C#中利用ffmpeg.wasm的能力。ffmpeg.wasm[144] 是FFmpeg的纯Webassembly / Javascript端口。它使得在浏览器内部能够进行视频和音频的录制、转换和流媒体处理。Blazor Studio[145] - 一个使用.NET编写的免费开源IDE - 使用Photino主机、Blazor UI和C#。Planning Poker[146] – 用于分布式团队进行Planning Poker的应用程序。该应用程序使用Blazor实现，并展示了如何在客户端和服务器端模式之间进行切换。演示[147]。C# Regex Tester online[148] - 用于验证.NET正则表达式语法的在线工具。(演示[149])。C# Regex Online tool[150] - 用于验证.NET正则表达式语法的在线工具，可以查看拆分列表、表格等。(演示[151])。Blazor Tour of Heroes[152] - Blazor英雄之旅，使用Blazor-State[153]（使用MediatR管道的状态管理架构）实现Redux风格的状态管理。Blazor.Text.Editor[154] - Blazor.Text.Editor是一个使用Blazor UI Framework for .NET的文本编辑器组件库。演示[155]。Blazor Wake-on-LAN[156] - 用于本地网络的Wake-on-LAN应用程序。Blazor Server + EF Core + DI + CI。BlazingWaffles[157] - 一个包装Waffle Generator[158]的Blazor应用程序。该生成器输出可读的无意义文本，可用于替代Lorum Ipsum。演示[159]。Nethereum Playground[160] - 在浏览器上编译和运行Nethereum代码片段。您可以在这里运行它：。TypinExamples[161] - 一个演示如何在Blazor SPA应用程序中使用Typin[162]框架的示例项目（使用Xterm.js和自定义的C# Web Workers实现在浏览器中模拟终端体验）。在线演示[163]。Unofficial eShopOnContainers[164] - eShopOnContainers[165]的非官方Blazor WebAssembly客户端。UpBlazor[166] - - Blazor Server与Up bank（一家澳大利亚数字银行）集成，帮助用户进行预算管理并获得强大的未来洞察力。使用Clean Architecture和Marten DB[167]。WordTester[168] - 一个用于学习外语单词的应用程序，使用闪卡和间隔重复。Css in Blazor presentation's source code[169] - Ed Charbeneau关于Blazor和CSS的演示的源代码。BlazorViz interop wrapper for Viz.js[170] - 生成Graphviz DOT语言文件并可视化树形数据结构的示例。演示[171]。BlazorServerImageRecognitionApp[172] - 简单的Blazor Server应用程序，使用图像识别来识别和提取用户上传的图像文件中的文本。演示[173]。FootballBlazorApp[174] - 简单的Football Blazor Server Web应用程序，显示赛程和结果、小组积分、球队和球员，并具有球员搜索功能。演示[175]。参考资料[1]

贡献指南:

[2]

贡献者:

[3]

Awesome Blazor Browser:

[4]

源代码:

[5]

介绍: #introduction

[6]

通用: #general

[7]

模板: #templates

[8]

示例项目: #sample-projects

[9]

教程: #tutorials

[10]

库和扩展: #libraries--extensions

[11]

真实世界应用: #real-world-applications

[12]

视频: #videos

[13]

文章: #articles

[14]

播客: #podcasts

[15]

演示幻灯片: #presentations-slides

[16]

工具: #tooling

[17]

书籍: #books

[18]

电子书: #e-books

[19]

课程: #courses

[20]

社区: #community

[21]

其他语言: #other-languages

[22]

官方Blazor网站:

[23]

Blazor入门:

[24]

使用Blazor构建Web应用程序:

[25]

Channel9:

[26]

YouTube:

[27]

ASP.NET博客存档:

[28]

Blazor:

[29]

Microsoft Learn上的Blazor课程: ;products=dotnet%2Cwindows&roles=developer&terms=blazor

[30]

.NET基金会上的Blazor-Dev库:

[31]

Blazor扩展:

[32]

Blazor大学:

[33]

演示:

[34]

文档:

[35]

eShopOnBlazor:

[36]

常见问题:

[37]

GitHub存储库:

[38]

'Hello World'示例:

[39]

ASP.NET Core简介:

[40]

工作坊:

[41]

Blazor WebAssembly性能最佳实践:

[42]

themesof.net:

[43]

30秒Blazor:

[44]

BitPlatform模板:

[45]

了解更多:

[46]

Blazor Hero:

[47]

在这里阅读快速入门指南:

[48]

Blazor BFF Azure AD:

[49]

在这里阅读快速入门指南:

[50]

Blazor BFF Azure B2C:

[51]

在这里阅读快速入门指南:

[52]

使用Blazor和C#从头开始构建文本编辑器:

[53]

起始点仓库:

[54]

Blazor Studio仓库:

[55]

Cledev.OpenAI:

[56]

BlazorBoilerplate:

[57]

演示:

[58]

TheIdServer:

[59]

BlazorWithIdentity:

[60]

Blorc.OpenIdConnect:

[61]

Blazor-WASM-AzureAD-gRPC:

[62]

Quiz manager secured by Auth0:

[63]

Auth0:

[64]

Securing Blazor WebAssembly Apps:

[65]

Blogifier:

[66]

演示:

[67]

eShopOnBlazor:

[68]

JHipster.NET:

[69]

JHipster:

[70]

JHipster:

[71]

RapidCMS:

[72]

BlazorShop:

[73]

Umbraco9 & Blazor WASM Starter Site:

[74]

Trains.NET:

[75]

Twitch流:

[76]

wengier.com/Trains.NET:

[77]

AsteroidsWasm:

[78]

演示:

[79]

DiabloBlazor:

[80]

演示:

[81]

Board Games:

[82]

Fusion:

[83]

演示:

[84]

Wolfenstein 3D ported to Blazor:

[85]

文章:

[86]

ZXSpectrum:

[87]

演示:

[88]

WordleBlazor:

[89]

演示:

[90]

Blazor + Electron:

[91]

Blazor + WebWindow:

[92]

WebWindow:

[93]

WebWindow源代码:

[94]

这里有Blazor + WebWindow示例:

[95]

Photino:

[96]

Blazor + Umbraco Heartcore:

[97]

Umbraco Heartcore:

[98]

Blazor Wasm with ASP.NET Framework 4.x:

[99]

Medium上的解释:

[100]

RemoteBlazorWebView:

[101]

BlazorInAngularDemo:

[102]

演示:

[103]

Blazor Studio:

[104]

Picat语言IDE:

[105]

Picat逻辑编程语言:

[106]

演示:

[107]

PresenceLight:

[108]

博客文章:

[109]

演示视频:

[110]

Meadow Weather:

[111]

可扩展情感分析:

[112]

optimizer.ml:

[113]

Quantconnect Lean:

[114]

演示 ():

[115]

棒球机器学习工作台:

[116]

实时演示:

[117]

BlazorML5:

[118]

Mobile Blazor Bindings:

[119]

WalkingTec.Mvvm (WTM):

[120]

网站:

[121]

TodoApi by David Fowler:

[122]

Bolero.TodoMVC:

[123]

ididit!:

[124]

演示:

[125]

CleanArchitecture:

[126]

Oqtane Framework:

[127]

Flight Finder:

[128]

LinqToTwitter Blazor示例:

[129]

BlazorFileReader:

[130]

演示:

[131]

eShopOnBlazor:

[132]

BlazorChatSample:

[133]

Command and Control, by David Fowler:

[134]

BlazorCRUD:

[135]

演示:

[136]

Money:

[137]

演示:

[138]

Blazor Weather:

[139]

演示:

[140]

Blazor.SVGEditor:

[141]

演示:

[142]

NethereumBlazor:

[143]

FFmpegBlazor:

[144]

ffmpeg.wasm:

[145]

Blazor Studio:

[146]

Planning Poker:

[147]

演示:

[148]

C# Regex Tester online:

[149]

演示:

[150]

C# Regex Online tool:

[151]

演示:

[152]

Blazor Tour of Heroes:

[153]

Blazor-State:

[154]

Blazor.Text.Editor:

[155]

演示:

[156]

Blazor Wake-on-LAN:

[157]

BlazingWaffles:

[158]

Waffle Generator:

[159]

演示:

[160]

Nethereum Playground:

[161]

TypinExamples:

[162]

Typin:

[163]

在线演示:

[164]

Unofficial eShopOnContainers:

[165]

eShopOnContainers:

[166]

UpBlazor:

[167]

Marten DB:

[168]

WordTester:

[169]

Css in Blazor presentation's source code:

[170]

BlazorViz interop wrapper for Viz.js:

[171]

演示:

[172]

BlazorServerImageRecognitionApp:

[173]

演示:

[174]

FootballBlazorApp:

[175]

演示: