[推荐]大量 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 学习资源（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Magicodes.SwaggerUI
- 下一篇： Sql Server之旅——第八站 看公