[推薦]大量 Blazor 學習資源（二）

開發者精選資訊發表於2020-05-28
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 有兩個原則：

  1. 保持簡單
  2. 可擴充套件

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: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)

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 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)

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 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

京東：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

掃碼關注微信公眾號《開發者精選資訊》

相關文章