[推荐]大量 Blazor 学习资源（二）
继上一篇《[推荐]大量 Blazor 学习资源（一）》之后，社区反应不错，但因个人原因导致这篇文章姗姗来迟，不过最终还是来了！这篇文章主要收集一些常用组件、书籍和电子书。
并非完全翻译原文，会从所有资源里提取一些我认为好一点的资源，如有需要，从上面 Github 链接获取最新内容。
组件 / Components
- （推荐）Ant Design Blazor - 一套企业级的UI组件基于Ant的设计和Blazor WebAssembly。 (⭐1177)
Demo 演示
- Bootstrap Blazor Component - Bootstrap 样式的 Blazor UI 组件库。 (⭐575)
- MatBlazor - Material Design 样式的 Blazor UI 组件库。 (⭐1600)
- 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 演示
- Radzen.Blazor - 原生 UI 样式的 Blazor UI 组件库，Blazor. DataGrid, DataList, Tabs, Dialog 等等。 (⭐362)
Demo 演示
- Canvas - HTML5 Canvas API 的 Blazor 实现 (⭐215)
- ChartJs.Blazor - Blazor 实现的 ChartJs (⭐231)
Demo 演示
- DevExpress Blazor UI Components - DevExpress 的 Blazor UI 组件库 (⭐191)
Demo 演示
- BlazorContextMenu - Material Design 样式的 Blazor ContextMenu 组件 (⭐181)
Demo 演示
- Blazored.Modal - Blazor 模态框组件 (⭐181)
- Blazor.FlexGrid - Blazor GridView 组件 (⭐181)
- Grid.Blazor - 适用于 ASP.NET MVC Blazor 的 CRUD 表格组件，支持筛选、排序、搜索、分页、嵌套表格和其他 (⭐177)
Demo 演示
- BlazorMaterial - Material 风格的 Blazor UI 组件库 (⭐131)
- 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"
/>
- 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>");
}
- Blazored.Toast - Toast 提示组件，Blazor 应用和组件均可使用 (⭐147)
- BlazorInputFile - Blazor 文件上传组件 (⭐140)
- Syncfusion Blazor UI Components - Syncfusion UI 组件库 (⭐105)
https://github.com/syncfusion/ej2-aspnet-core-blazor-samples
Demo 演示
- Blazored.Typeahead - 自动完成提示的文本框，支持本地和远程数据，client-side 和 server-side 都支持 (⭐120)
- Sotsera.Blazor.Toaster - Toast 提示框组件 (⭐90)
Demo 演示
- Blazored.Menu - 菜单组件 (⭐67)
- Blazor-DragDrop - 拖放组件 (⭐79)
Demo 演示
- BlazorTable - 带有排序、分页、筛选的表格组件 (⭐84)
Demo 演示
- Blazor-Charts - SVG 表格组件 (⭐45)
Demo 演示
- NodaTimePicker - 时间选择器组件 (⭐39)
Demo 演示
- BlazorDateRangePicker - 范围日期选择组件 (⭐41)
Demo 演示
- BlazorGoogleMaps - 谷歌地图组件 (⭐43)
- Blazor.SignaturePad - 签名面板（画图） (⭐22)
Demo 演示
- 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");
}
}
- Blazor-Dom-Confetti - 扔五彩纸屑 (⭐40)
- Telerik UI for Blazor - Telerik UI 组件库 (收费)
- TwitterShareButton - Twitter 分享按钮 (⭐2)
https://github.com/jsakamoto/Toolbelt.Blazor.TwitterShareButton
- Blazor.LoadingIndicator - 加载指示器 (⭐44)
- BlazorMonaco - 微软 Monaco Editor （VSCode 核心）组件 (⭐10)
Demo 演示
书籍 / Books
- Blazor Revealed （Blazor 揭秘）
Blazor Revealed, Building Web Applications in .NET(Published February, 2019).
当当：http://search.dangdang.com/?key=Blazor Revealed&act=input
电子书：
PDF：http://file.allitebooks.com/20190205/Blazor Revealed.pdf
ePub：http://file.allitebooks.com/20190205/Blazor Revealed.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
扫码关注微信公众号《开发者精选资讯》
