欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

[推荐]大量 Blazor 学习资源（二）

发布时间：2023/12/4 38 豆豆
生活随笔 收集整理的这篇文章主要介绍了 [推荐]大量 Blazor 学习资源（二） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

继上一篇《[推荐]大量 Blazor 学习资源（一）》之后，社区反应不错，但因个人原因导致这篇文章姗姗来迟，不过最终还是来了！这篇文章主要收集一些常用组件、书籍和电子书。

资料来源：https://github.com/AdrienTorris/awesome-blazor/

并非完全翻译原文，会从所有资源里提取一些我认为好一点的资源，如有需要，从上面 Github 链接获取最新内容。

组件 / Components

  • （推荐）Ant Design Blazor - 一套企业级的UI组件基于Ant的设计和Blazor WebAssembly。(⭐1177)

https://github.com/ant-design-blazor/ant-design-blazor

Demo 演示

https://ant-design-blazor.github.io/

  • Bootstrap Blazor Component - Bootstrap 样式的 Blazor UI 组件库。(⭐575)

https://gitee.com/LongbowEnterprise/BootstrapBlazor

  • MatBlazor - Material Design 样式的 Blazor UI 组件库。(⭐1600)

  • Blazorise - Blazorise 基于 Blazor 和一些 CSS 框架（Bootstrap, Bulma, AntDesign 和 Material）的 Blazor UI 组件库。(⭐924)

https://github.com/stsrki/Blazorise

Blazorise 有两个原则：

  • 保持简单

  • 可扩展

    • Demo 演示：

    • Bootstrap Demo https://bootstrapdemo.blazorise.com/

    • Bulma Demo https://bulmademo.blazorise.com/

    • AntDesign Demo https://antdesigndemo.blazorise.com/

    • Material Demo https://materialdemo.blazorise.com/

    • eFrolic Demo https://efrolicdemo.blazorise.com/

    • BlazorStrap - Bootstrap 4 样式的 Blazor UI 组件库。(⭐521)

    https://github.com/chanan/BlazorStrap

    Demo 演示

    https://blazorstrap.io/

    • Radzen.Blazor - 原生 UI 样式的 Blazor UI 组件库，Blazor. DataGrid, DataList, Tabs, Dialog 等等。(⭐362)

    https://github.com/akorchev/blazor.radzen.com

    Demo 演示

    https://blazor.radzen.com/

    • Canvas - HTML5 Canvas API 的 Blazor 实现 (⭐215)

    https://github.com/BlazorExtensions/Canvas

    • ChartJs.Blazor - Blazor 实现的 ChartJs (⭐231)

    https://github.com/mariusmuntean/ChartJs.Blazor

    Demo 演示

    https://www.iheartblazor.com/welcome

    • DevExpress Blazor UI Components - DevExpress 的 Blazor UI 组件库 (⭐191)

    https://github.com/DevExpress/RazorComponents

    Demo 演示

    https://demos.devexpress.com/blazor/

    • BlazorContextMenu - Material Design 样式的 Blazor ContextMenu 组件 (⭐181)

    https://github.com/stavroskasidis/BlazorContextMenu

    Demo 演示

    https://blazor-context-menu-demo.azurewebsites.net/

    • Blazored.Modal - Blazor 模态框组件 (⭐181)

    https://github.com/Blazored/Modal

    • Blazor.FlexGrid - Blazor GridView 组件 (⭐181)

    https://github.com/Mewriick/Blazor.FlexGrid

    • Grid.Blazor - 适用于 ASP.NET MVC Blazor 的 CRUD 表格组件，支持筛选、排序、搜索、分页、嵌套表格和其他 (⭐177)

    https://github.com/gustavnavar/Grid.Blazor

    Demo 演示

    https://gridblazor.azurewebsites.net/

    • BlazorMaterial - Material 风格的 Blazor UI 组件库 (⭐131)

    https://github.com/BlazorExtensions/BlazorMaterial

    • BlazorWebFormsComponents - WebForms 可用的 Blazor UI 组件库 (⭐142)

    https://github.com/FritzAndFriends/BlazorWebFormsComponents

    语法类似这样的：

    <asp:ButtonAccessKey="string"BackColor="color name|#dddddd"BorderColor="color name|#dddddd"BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|Inset|Outset"BorderWidth="size"CausesValidation="True|False"CommandArgument="string"CommandName="string"CssClass="string"Enabled="True|False"EnableTheming="True|False"EnableViewState="True|False"Font-Bold="True|False"Font-Italic="True|False"Font-Names="string"Font-Overline="True|False"Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|Large|X-Large|XX-Large"Font-Strikeout="True|False"Font-Underline="True|False"ForeColor="color name|#dddddd"Height="size"ID="string"OnClick="Click event handler"OnClientClick="string"OnCommand="Command event handler"OnDataBinding="DataBinding event handler"OnDisposed="Disposed event handler"OnInit="Init event handler"OnLoad="Load event handler"OnPreRender="PreRender event handler"OnUnload="Unload event handler"PostBackUrl="uri"runat="server"SkinID="string"Style="string"TabIndex="integer"Text="string"ToolTip="string"UseSubmitBehavior="True|False"ValidationGroup="string"Visible="True|False"Width="size" />

    • bUnit - Blazor 组件测试 (⭐181)

    https://github.com/egil/bunit

    举例，想要测试 Counter 组件：

    <h1>Counter</h1><p>Current count: @currentCount </p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {int currentCount = 0;void IncrementCount(){currentCount++;} }

    测试代码如下，使用 bUnit 和 xUnit：

    [Fact] public void CounterShouldIncrementWhenClicked() {// Arrange: render the Counter.razor componentvar cut = RenderComponent<Counter>();// Act: find and click the <button> element to increment// the counter in the <p> elementcut.Find("button").Click();// Assert: first find the <p> element, then verify its contentcut.Find("p").MarkupMatches("<p>Current count: 1</p>"); }

    • Blazored.Toast - Toast 提示组件，Blazor 应用和组件均可使用 (⭐147)

    https://github.com/Blazored/Toast

    • BlazorInputFile - Blazor 文件上传组件 (⭐140)

    https://github.com/SteveSandersonMS/BlazorInputFile

    • Syncfusion Blazor UI Components - Syncfusion UI 组件库 (⭐105)

    https://github.com/syncfusion/ej2-aspnet-core-blazor-samples

    Demo 演示

    https://blazor.syncfusion.com/

    • Blazored.Typeahead - 自动完成提示的文本框，支持本地和远程数据，client-side 和 server-side 都支持 (⭐120)

    https://github.com/Blazored/Typeahead

    • Sotsera.Blazor.Toaster  - Toast 提示框组件 (⭐90)

    https://github.com/sotsera/sotsera.blazor.toaster

    Demo 演示

    https://blazor-toaster.sotsera.com/

    • Blazored.Menu - 菜单组件 (⭐67)

    https://github.com/Blazored/Menu

    • Blazor-DragDrop - 拖放组件 (⭐79)

    https://github.com/Postlagerkarte/blazor-dragdrop

    Demo 演示

    https://blazordragdrop.azurewebsites.net/

    • BlazorTable - 带有排序、分页、筛选的表格组件 (⭐84)

    https://github.com/IvanJosipovic/BlazorTable

    Demo 演示

    https://blazortable.netlify.app/

    • Blazor-Charts - SVG 表格组件 (⭐45)

    https://github.com/Misfits-Rebels-Outcasts/Blazor-Charts

    Demo 演示

    https://www.webassemblyman.com/blazor/blazorcharts.html

    • NodaTimePicker - 时间选择器组件 (⭐39)

    https://github.com/nheath99/NodaTimePicker

    Demo 演示

    https://nodatimepicker.z13.web.core.windows.net/

    • BlazorDateRangePicker - 范围日期选择组件 (⭐41)

    https://github.com/jdtcn/BlazorDateRangePicker

    Demo 演示

    https://blazordaterangepicker.azurewebsites.net/

    • BlazorGoogleMaps - 谷歌地图组件 (⭐43)

    https://github.com/rungwiroon/BlazorGoogleMaps

    • Blazor.SignaturePad - 签名面板（画图） (⭐22)

    https://github.com/Mobsites/Blazor.SignaturePad

    Demo 演示

    https://signaturepad.mobsites.com/

    • BlazorQuery - Blazor 版 jQuery  (⭐40)

    https://github.com/kevinjpetersen/BlazorQuery

    用 jQuery 的方式操作 DOM，ajax 请求等等。该项目还在紧急开发中

    示例代码：

    @page "/" @inject BlazorQueryDOM DOM<h1>Hello, DOM!</h1> <h1>Hello, Blazor!</h1>@code {protected override async Task OnAfterRenderAsync(){await DOM.Select("h1").CSS("background-color", "red");} } @page "/" @inject BlazorQueryDOM DOM<h1>Hello, DOM!</h1> <h1>Hello, Blazor!</h1>@code {protected override async Task OnAfterRenderAsync(){await DOM.Select("h1").Text("Now this text is changed");} }

    • Blazor-Dom-Confetti - 扔五彩纸屑 (⭐40)

    https://github.com/ctrl-alt-d/blazor-dom-confetti

    • Telerik UI for Blazor - Telerik UI 组件库 (收费)

    https://www.telerik.com/blazor-ui

    • TwitterShareButton - Twitter 分享按钮 (⭐2)

    https://github.com/jsakamoto/Toolbelt.Blazor.TwitterShareButton

    • Blazor.LoadingIndicator - 加载指示器 (⭐44)

    https://github.com/h3x4d3c1m4l/BlazorProgressIndicator

    • BlazorMonaco - 微软 Monaco Editor （VSCode 核心）组件 (⭐10)

    https://github.com/serdarciplak/BlazorMonaco

    Demo 演示

    https://serdarciplak.github.io/BlazorMonaco/

    书籍 / Books

    • Blazor Revealed （Blazor 揭秘）

    Blazor Revealed, Building Web Applications in .NET(Published February, 2019).

    国外：https://www.apress.com/gp/book/9781484243428    京东：https://item.jd.com/41737176374.html      当当：http://search.dangdang.com/?key=Blazor%20Revealed&act=input

    电子书：

    PDF：http://file.allitebooks.com/20190205/Blazor%20Revealed.pdf     ePub：http://file.allitebooks.com/20190205/Blazor%20Revealed.epub

    • Blazor Quick Start Guide: Build web applications using Blazor, EF Core, and SQL Server （Blazor 快速入门指南：使用Blazor、EF Core和SQL Server构建web应用程序）

    亚马逊：https://www.amazon.in/gp/product/178934414X/ref=awesome_blazor    京东：https://item.jd.com/41499035732.html

    电子书：

    https://e.jd.com/30506217.html

    电子书 / E-Books

    • Blazor Succinctly - 免费的从0开始学习 Blazor 框架的电子书。

    https://www.syncfusion.com/ebooks/blazor-succinctly

    • Blazor, A Beginners Guide - Blazor 初学者指南。

    https://www.telerik.com/campaigns/blazor/wp-beginners-guide-ebook

    • Blazor for ASP.NET Web Forms developers

    一本来自微软的免费电子书。

    https://dotnet.microsoft.com/learn/aspnet/architecture#blazor-for-web-forms-devs-ebook-swim

    • Using CSLA 5: Blazor and WebAssembly

    本书介绍了新的Blazor UI框架，包括如何创建服务器端和客户端WebAssembly项目，如何实现身份验证和授权，以及如何使用数据绑定。然后介绍CSLA.NET如何支持Blazor，包括浏览完整的示例应用程序。

    https://store.lhotka.net/using-csla-5-blazor-and-webassembly

    • An Introduction to Building Applications with Blazor

    如何开始使用这个令人兴奋的易于使用的 Microsoft C# 框架创建应用程序

    https://www.amazon.com/Introduction-Building-Applications-Blazor-applications-ebook/dp/B07WPQTT6H

    总结

    以上是生活随笔为你收集整理的[推荐]大量 Blazor 学习资源（二）的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。