安装浏览器增强组件_让.NET运行在浏览器端 Ant Design Blazor-CSDN博客

前面的文章我们介绍了Blazor(一个能让 .NET 代码在浏览器运行的WebAssembly框架)，我们知道目前WEB前端的流行趋势，基本是React、Vue、Angular三驾马车的天下，新项目几乎很少使用jquery了。不过随着WebAssembly的出现，JavaScript 不再是可以在浏览器中运行的唯一语言。WebAssembly 彻底改变 Web 的编码方式，允许使用其他语言将本机应用移植到具有接近本机性能的浏览器。

web development

今天我们将介绍一个基于Blazor的UI框架Ant Design Blazor，一套基于 Ant Design 和 Blazor 的企业级组件库。在介绍开始之前我们首先回顾下什么是Blazor：

Blazor简介

Blazor 是一个开放源代码和跨平台的Web UI框架，使用 .NET 代替 JavaScript 来创建丰富的交互式 UI。Blazor支持2种运行模式：

1. Server模式：应用在ASP.NET Core应用服务器上运行，并且通过SignalR(双向通讯)进行用户交互处理。

WebAssembly 模式：Razor和HTML最终会编译成WebAssembly 运行在WebAssembly 的浏览器上。

框架有了，要做出漂亮的管理系统还是需要对各种组件布局等进行美化，所以Ant Design Blazor应运而生了，当然还有其他的Blazor UI框架，就不在此处在做累述了。

Ant Design Blazor 简介

Ant Design Blazor一套基于 Ant Design 和 Blazor 的企业级组件库，项目以 MIT 协议开源，目前github上标星2.4K，项目将Ant Design的整套风格和设计规范移植到Blazor。

Ant Design Blazor

Ant Design Blazor特性

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Blazor 组件，可在多种托管方式共享。
支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。
支持渐进式 Web 应用(PWA)
使用 C# 构建，多范式静态语言带来高效的开发体验。
⚙️ 基于 .NET Standard 2.1，可直接引用丰富的 .NET 类库。支持.NET Core 3.1，Blazor WebAssembly 3.2 正式版。
可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成。

支持的浏览器

Blazor UI支持目前主流的几款现代浏览器(谷歌、Edge、火狐、苹果Safari、欧朋浏览器等)，以及 Internet Explorer 11+(仅支持Blazor Server模式)。

浏览器支持

安装与使用

我们在VS2019新建Blazor项目(Blazor Server/Blazor WebAssembly)，然后从nuget包管理器安装AntDesign，我们可以看到最新稳定版为v0.3.0，最新版本为v0.4.0-0

nuget包管理界面

当然我们也可以从Ant Design Blazor提供的项目模板来创建项目，我们可以从VS或者命令行安装模板。

安装模板

$ dotnet new --install AntDesign.Templates::0.1.0-*

从模板创建 Ant Design Blazor Pro 项目

$ dotnet new antdesign -o 自己的项目名称

安装AntDesign后我们在 Program.cs增加注册代码

 builder.Services.AddAntDesign();

增加相关资源的引用

在根目录的_Imports.razor增加相关命令空间的导入，按需导入即可@using AntDesign@using AntDesign.Charts@using AntDesign.Pro.Layout@using AntDesign.Pro.Template@using AntDesign.Pro.Template.Models@using AntDesign.Pro.Template.Services

完成这些我们就可以在Pages目录下的.razor文件中使用AntDesign相关组件了。

效果展示

我们可以看到相关组件的显示效果基本跟AntDesign是相同

AntDesign Blazor

后记

下载体验后发现还是有些小问题，项目github上未关闭的issues还有80个左右，所以运用到实际场景估计还需要等一等，对blazor有兴趣的小伙伴们可以研究一下。最后附上github项目地址

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

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

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

github ant-design-blazor