继上一篇《[推荐]大量 Blazor 学习资源(一)》之后,社区反应不错,但因个人原因导致这篇文章姗姗来迟,不过最终还是来了!这篇文章主要收集一些常用组件、书籍和电子书。
并非完全翻译原文,会从所有资源里提取一些我认为好一点的资源,如有需要,从上面 Github 链接获取最新内容。
文章目录
1 组件 / Components
1.1(推荐)Ant Design Blazor – 一套企业级的UI组件基于Ant的设计和Blazor WebAssembly。(⭐1177)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.2 Bootstrap Blazor Component – Bootstrap 样式的 Blazor UI 组件库。(⭐575)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.3 MatBlazor – Material Design 样式的 Blazor UI 组件库。(⭐1600)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.4 Blazorise – Blazorise 基于 Blazor 和一些 CSS 框架(Bootstrap, Bulma, AntDesign 和 Material)的 Blazor UI 组件库。(⭐924)
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)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.5 Radzen.Blazor – 原生 UI 样式的 Blazor UI 组件库,Blazor. DataGrid, DataList, Tabs, Dialog 等等。(⭐362)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.6 Canvas – HTML5 Canvas API 的 Blazor 实现 (⭐215)
1.7 ChartJs.Blazor – Blazor 实现的 ChartJs (⭐231)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.8 DevExpress Blazor UI Components – DevExpress 的 Blazor UI 组件库 (⭐191)(收费)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.9 BlazorContextMenu – Material Design 样式的 Blazor ContextMenu 组件 (⭐181)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.10 Blazored.Modal – Blazor 模态框组件 (⭐181)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.11 Blazor.FlexGrid – Blazor GridView 组件 (⭐181)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.12 Grid.Blazor – 适用于 ASP.NET MVC Blazor 的 CRUD 表格组件,支持筛选、排序、搜索、分页、嵌套表格和其他 (⭐177)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.13 BlazorMaterial – Material 风格的 Blazor UI 组件库 (⭐131)
1.14 BlazorWebFormsComponents – WebForms 可用的 Blazor UI 组件库 (⭐142)
语法类似这样的:
<asp:Button AccessKey="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" />
1.15 bUnit – Blazor 组件测试 (⭐181)
举例,想要测试 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 component var cut = RenderComponent<Counter>(); // Act: find and click the <button> element to increment // the counter in the <p> element cut.Find("button").Click(); // Assert: first find the <p> element, then verify its content cut.Find("p").MarkupMatches("<p>Current count: 1</p>"); }
1.16 Blazored.Toast – Toast 提示组件,Blazor 应用和组件均可使用 (⭐147)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.17 BlazorInputFile – Blazor 文件上传组件 (⭐140)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.18 Syncfusion Blazor UI Components – Syncfusion UI 组件库 (⭐105)
https://github.com/syncfusion/ej2-aspnet-core-blazor-samples
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.19 Blazored.Typeahead – 自动完成提示的文本框,支持本地和远程数据,client-side 和 server-side 都支持 (⭐120)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.20 Sotsera.Blazor.Toaster – Toast 提示框组件 (⭐90)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.21 Blazored.Menu – 菜单组件 (⭐67)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.22 Blazor-DragDrop – 拖放组件 (⭐79)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.23 BlazorTable – 带有排序、分页、筛选的表格组件 (⭐84)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.24 Blazor-Charts – SVG 表格组件 (⭐45)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.25 NodaTimePicker – 时间选择器组件 (⭐39)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.26 BlazorDateRangePicker – 范围日期选择组件 (⭐41)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.27 BlazorGoogleMaps – 谷歌地图组件 (⭐43)
1.28 Blazor.SignaturePad – 签名面板(画图) (⭐22)
Demo 演示
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.29 BlazorQuery – Blazor 版 jQuery (⭐40)
用 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"); } }
1.30 Blazor-Dom-Confetti – 扔五彩纸屑 (⭐40)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.31 Telerik UI for Blazor – Telerik UI 组件库 (收费)
1.32 TwitterShareButton – Twitter 分享按钮 (⭐2)
https://github.com/jsakamoto/Toolbelt.Blazor.TwitterShareButton
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.33 Blazor.LoadingIndicator – 加载指示器 (⭐44)
![[推荐]大量 Blazor 学习资源(二)](https://dotnet9.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
1.34 BlazorMonaco – 微软 Monaco Editor (VSCode 核心)组件 (⭐10)
Demo 演示
书籍 / Books
1 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
电子书:
电子书 / E-Books
- Blazor Succinctly – 免费的从0开始学习 Blazor 框架的电子书。
- 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
原文出处:微信公众号【霍小平 开发者精选资讯】
原文链接:https://mp.weixin.qq.com/s/Np44VM-IGViSoyjewU9T8w
本文观点不代表Dotnet9立场,转载请联系原作者。