继上一篇《[推荐]大量 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

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

[推荐]大量 Blazor 学习资源(二)的更多相关文章

  1. [推荐]大量 Blazor 学习资源(一)

    前言 / Introduction Blazor 是什么? Blazor 允许您使用 C# 而不是 JavaScript 构建交互式 Web UI. Blazor 应用由使用 C#.HTML 和 CS ...

  2. Redis初识、设计思想与一些学习资源推荐

    一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...

  3. Python 0(安装及初步使用+学习资源推荐)

    不足之处,还请见谅,请指出不足.本人发布过的文章,会不断更改,力求减少错误信息. Python安装请借鉴网址https://www.runoob.com/python/python-install.h ...

  4. springboot 学习资源推荐

    springboot 是什么?对于构建生产就绪的Spring应用程序有一个看法. Spring Boot优先于配置的惯例,旨在让您尽快启动和运行.(这是springboot的官方介绍) 我们为什么要学 ...

  5. Linux学习笔记——重点推荐的Linux网络在线学习资源

     首先非常感谢百度,感谢网络的搜索引擎技术,也非常感谢学习资源的贡献者和组织! 1:http://billie66.github.io/TLCL/book/zh/ 2:http://www.ha97. ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. 读书分享全网学习资源大合集,推荐Python3标准库等五本书「02」

    0.前言 在此之前,我已经为准备学习python的小白同学们准备了轻量级但超无敌的python开发利器之visio studio code使用入门系列.详见 1.PYTHON开发利器之VS Code使 ...

  8. 【RS】Automatic recommendation technology for learning resources with convolutional neural network - 基于卷积神经网络的学习资源自动推荐技术

    [论文标题]Automatic recommendation technology for learning resources with convolutional neural network ( ...

  9. Java/C++ 学习资源推荐

    列举一下我所知道的一些学习资源,希望能对大家有所帮助 Java学习资源资源: 1.尚学堂 Java300集 链接:https://study.163.com/course/introduction.h ...

随机推荐

  1. Semaphores

    信号量和P,V原语的使用可归纳为三种情形: 把信号量视为加锁标志位,其目的是为了实现对某个唯一的共享数据的互斥访问,如各个进程间的某共享变量,数据库中的某个记录. 共享数据的值与信号量本身的值没有直接 ...

  2. ACM周记

    放假一周了,虽然知识都学完了,但是使用和会用还是很难,不能在按着这个情形发展下去,这样的话肯定完成不了自己的任务,所以必须要改变自己的学习方法和学习态度,学习态度,一个星期也睡够放松够了,也玩够了,该 ...

  3. Mysql 远程连接错误排查

    1. 测试本地与远程服务器端口能否连通 telnet  远程IP  端口号 telnet 192.168.1.1 3306 2.如果是在aliyun或者aws云服务器上自建数据库 2.1 在安全组里开 ...

  4. Docker 快速安装Jenkins完美教程 (亲测采坑后详细步骤)

    一.前言 有人问,为什么要用Jenkins,在一些中小型企业?我说下我以前开发的痛点,每次开发一个项目完成后,需要打包部署,可能没有专门的运维人员,只能开发人员去把项目打成一个war包,可能这个项目已 ...

  5. Java笔记(day14-17)

    集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定. 就使用集合容器进行存储. 集合特点: 1,用于存储对象的容器. 2,集合的长度是可变的. 3,集合中不可以存储基本数据类 ...

  6. P2308 添加括号(dfs记录dp路径)

    传送门 \(一看肯定是区间DP(因为和和合并石子很相似,都要加n-1次)\) \(转移方程为(其中he[i][j]是i到j的和)\) \[dp[i][j]=min(dp[i][j],dp[i][k]+ ...

  7. 201771010113 李婷华 《面向对象程序设计(Java)》第八周总结

    一.理论知识部分 1.Java为了克服单继承的缺点,Java使用了接口,一个类可以实现一个或多个接口. 2.在Java程序设计语言中,接口不是类,而是对类的一组需求描述,由常量和一组抽象方法组成.接口 ...

  8. C#学习笔记——数据类型

    数据类型 sbyte x; //8bit,有符号,表示-128~127 bite x; //8bit,无符号,表示0~255 short x; //16bit,有符号整型 ushort x; //16 ...

  9. 【Kafka】消息队列相关知识

    目录 概述 常用消息队列 常用消息队列对比 应用场景 消息队列的两种模式 概述 消息(Message) 是指在应用系统之间传递的数据.消息可以非常简单,比如只包含文本字符串,也可以更复杂,可能包含嵌入 ...

  10. 单向环形链表解决约瑟夫环(Josephus)问题

    一.约瑟夫环问题 Josephu 问题为:设编号为1,2,- n的n个人围坐一圈,约定编号为k(1<=k<=n)的人从1开始报数,数到m 的那个人出列,它的下一位又从1开始报数,数到m的那 ...