[推荐]大量 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: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");

    }

}