[推荐]大量 Blazor 学习资源（二）

2020 年 5 月 28 日
筆記
Asp.Net Core

继上一篇《[推荐]大量 Blazor 学习资源（一）》之后，社区反应不错，但因个人原因导致这篇文章姗姗来迟，不过最终还是来了！这篇文章主要收集一些常用组件、书籍和电子书。

资料来源：//github.com/AdrienTorris/awesome-blazor/

并非完全翻译原文，会从所有资源里提取一些我认为好一点的资源，如有需要，从上面 Github 链接获取最新内容。

组件 / Components

（推荐）Ant Design Blazor – 一套企业级的UI组件基于Ant的设计和Blazor WebAssembly。 (⭐1177)

//github.com/ant-design-blazor/ant-design-blazor

Demo 演示

//ant-design-blazor.github.io/

Bootstrap Blazor Component – Bootstrap 样式的 Blazor UI 组件库。 (⭐575)

//gitee.com/LongbowEnterprise/BootstrapBlazor

MatBlazor – Material Design 样式的 Blazor UI 组件库。 (⭐1600)

Blazorise – Blazorise 基于 Blazor 和一些 CSS 框架（Bootstrap, Bulma, AntDesign 和 Material）的 Blazor UI 组件库。 (⭐924)

//github.com/stsrki/Blazorise

Blazorise 有两个原则：

保持简单
可扩展

Demo 演示：

Bootstrap Demo //bootstrapdemo.blazorise.com/

Bulma Demo //bulmademo.blazorise.com/

AntDesign Demo //antdesigndemo.blazorise.com/

Material Demo //materialdemo.blazorise.com/

eFrolic Demo //efrolicdemo.blazorise.com/

BlazorStrap – Bootstrap 4 样式的 Blazor UI 组件库。 (⭐521)

//github.com/chanan/BlazorStrap

Demo 演示

//blazorstrap.io/

Radzen.Blazor – 原生 UI 样式的 Blazor UI 组件库，Blazor. DataGrid, DataList, Tabs, Dialog 等等。 (⭐362)

//github.com/akorchev/blazor.radzen.com

Demo 演示

//blazor.radzen.com/

Canvas – HTML5 Canvas API 的 Blazor 实现 (⭐215)

//github.com/BlazorExtensions/Canvas

ChartJs.Blazor – Blazor 实现的 ChartJs (⭐231)

//github.com/mariusmuntean/ChartJs.Blazor

Demo 演示

//www.iheartblazor.com/welcome

DevExpress Blazor UI Components – DevExpress 的 Blazor UI 组件库 (⭐191)

//github.com/DevExpress/RazorComponents

Demo 演示

//demos.devexpress.com/blazor/

BlazorContextMenu – Material Design 样式的 Blazor ContextMenu 组件 (⭐181)

//github.com/stavroskasidis/BlazorContextMenu

Demo 演示

//blazor-context-menu-demo.azurewebsites.net/

Blazored.Modal – Blazor 模态框组件 (⭐181)

//github.com/Blazored/Modal

Blazor.FlexGrid – Blazor GridView 组件 (⭐181)

//github.com/Mewriick/Blazor.FlexGrid

Grid.Blazor – 适用于 ASP.NET MVC Blazor 的 CRUD 表格组件，支持筛选、排序、搜索、分页、嵌套表格和其他 (⭐177)

//github.com/gustavnavar/Grid.Blazor

Demo 演示

//gridblazor.azurewebsites.net/

BlazorMaterial – Material 风格的 Blazor UI 组件库 (⭐131)

//github.com/BlazorExtensions/BlazorMaterial

BlazorWebFormsComponents – WebForms 可用的 Blazor UI 组件库 (⭐142)

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

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

//github.com/Blazored/Toast

BlazorInputFile – Blazor 文件上传组件 (⭐140)

//github.com/SteveSandersonMS/BlazorInputFile

Syncfusion Blazor UI Components – Syncfusion UI 组件库 (⭐105)

//github.com/syncfusion/ej2-aspnet-core-blazor-samples

Demo 演示

//blazor.syncfusion.com/

Blazored.Typeahead – 自动完成提示的文本框，支持本地和远程数据，client-side 和 server-side 都支持 (⭐120)

//github.com/Blazored/Typeahead

Sotsera.Blazor.Toaster – Toast 提示框组件 (⭐90)

//github.com/sotsera/sotsera.blazor.toaster

Demo 演示

//blazor-toaster.sotsera.com/

Blazored.Menu – 菜单组件 (⭐67)

//github.com/Blazored/Menu

Blazor-DragDrop – 拖放组件 (⭐79)

//github.com/Postlagerkarte/blazor-dragdrop

Demo 演示

//blazordragdrop.azurewebsites.net/

BlazorTable – 带有排序、分页、筛选的表格组件 (⭐84)

//github.com/IvanJosipovic/BlazorTable

Demo 演示

//blazortable.netlify.app/

Blazor-Charts – SVG 表格组件 (⭐45)

//github.com/Misfits-Rebels-Outcasts/Blazor-Charts

Demo 演示

//www.webassemblyman.com/blazor/blazorcharts.html

NodaTimePicker – 时间选择器组件 (⭐39)

//github.com/nheath99/NodaTimePicker

Demo 演示

//nodatimepicker.z13.web.core.windows.net/

BlazorDateRangePicker – 范围日期选择组件 (⭐41)

//github.com/jdtcn/BlazorDateRangePicker

Demo 演示

//blazordaterangepicker.azurewebsites.net/

BlazorGoogleMaps – 谷歌地图组件 (⭐43)

//github.com/rungwiroon/BlazorGoogleMaps

Blazor.SignaturePad – 签名面板（画图） (⭐22)

//github.com/Mobsites/Blazor.SignaturePad

Demo 演示

//signaturepad.mobsites.com/

BlazorQuery – Blazor 版 jQuery (⭐40)

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

//github.com/ctrl-alt-d/blazor-dom-confetti

Telerik UI for Blazor – Telerik UI 组件库 (收费)

//www.telerik.com/blazor-ui

TwitterShareButton – Twitter 分享按钮 (⭐2)

//github.com/jsakamoto/Toolbelt.Blazor.TwitterShareButton

Blazor.LoadingIndicator – 加载指示器 (⭐44)

//github.com/h3x4d3c1m4l/BlazorProgressIndicator

BlazorMonaco – 微软 Monaco Editor （VSCode 核心）组件 (⭐10)

//github.com/serdarciplak/BlazorMonaco

Demo 演示

//serdarciplak.github.io/BlazorMonaco/

书籍 / Books

Blazor Revealed （Blazor 揭秘）

Blazor Revealed, Building Web Applications in .NET(Published February, 2019).

国外：//www.apress.com/gp/book/9781484243428

京东：//item.jd.com/41737176374.html

当当：//search.dangdang.com/?key=Blazor Revealed&act=input

电子书：

PDF：//file.allitebooks.com/20190205/Blazor Revealed.pdf

ePub：//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应用程序）

亚马逊：//www.amazon.in/gp/product/178934414X/ref=awesome_blazor

京东：//item.jd.com/41499035732.html

电子书：

//e.jd.com/30506217.html

电子书 / E-Books

Blazor Succinctly – 免费的从0开始学习 Blazor 框架的电子书。

//www.syncfusion.com/ebooks/blazor-succinctly

Blazor, A Beginners Guide – Blazor 初学者指南。

//www.telerik.com/campaigns/blazor/wp-beginners-guide-ebook

Blazor for ASP.NET Web Forms developers

一本来自微软的免费电子书。

//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，包括浏览完整的示例应用程序。

//store.lhotka.net/using-csla-5-blazor-and-webassembly

An Introduction to Building Applications with Blazor

如何开始使用这个令人兴奋的易于使用的 Microsoft C# 框架创建应用程序

//www.amazon.com/Introduction-Building-Applications-Blazor-applications-ebook/dp/B07WPQTT6H

扫码关注微信公众号《开发者精选资讯》

Tags: Asp.Net Core