Blazor-Ant Design of Blazor快速开始

原创 已于 2025-07-25 13:22:16 修改 · 690 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Blazor #.net #c#

于 2025-06-09 11:29:51 首次发布

近期准备选用个Blazor的前端UI框架来进行系统的开发，快速实现，准备从主流的UI组件框架中进行选择，我们先来看看你Ant Design of BLazor框架如何？

概述

Ant Design Blazor 是一个基于 Blazor 框架的开源组件库，采用了 Ant Design 的设计风格。
在这里插入图片描述
在这里插入图片描述

优势

  1. 遵循 Ant Design 成熟的视觉规范，提供统一、专业的 UI 体验，覆盖按钮、表格、表单、导航等 60+ 组件，满足复杂业务场景需求
  2. 性能与稳定性。同时支持 WebAssembly（客户端）和 Server-Side（服务端）渲染模式，通过 SignalR 实现实时交互，并兼容 PWA 离线能力
  3. 开箱即用：Ant Design Pro Blazor​ 提供预设的企业级模板（如仪表盘、用户管理页），支持一键生成项目脚手架
  4. 活跃社区支持​：由 .NET 基金会背书，社区通过 GitHub、Discord 提供快速响应，版本迭代频繁

快速开始

下面我将演示通过Ant Design Blazor​脚手架来生成一个基本的项目

模板创建开始

官方提供了 dotnet new 模板来创建一个开箱即用的 Ant Design Pro 新项目：

安装模板


                

                
                
        

         

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Ant Design of Blazor 教程 从0-1搭建 1.工具篇

				
			

			

				

					千金少的博客
				

				

					09-16
					
					4416
					
				

			

		

		

			
				
1.Blazor及AntBlazor

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
	共享使用 .NET 编写的服务器端和客户端应用逻辑。
	将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
	与新式托管平台（如 Docker）集成。
使用 .NET 进行客户端 Web 开发可提供以下优势：

使用 C# 代替 JavaScript 来编写代码。
	利用现有的 .NET 库生

			
		

	



                

            
              



	

		

			

				
					
Blazor + Ant Design + .NET 5快速开发框架（2） - AntDesign的引用

				
			

			

				

					qq_32174441的博客
				

				

					02-02
					
					2182
					
				

			

		

		

			
				
搭建

AntDesign的后台搭建很简单，官网给出了详细的教程

1、现在NuGet里面搜索AntDesign，然后安装，这里我安装的版本是：0.6.0.

或者

进入应用的项目文件夹，安装 Nuget 包引用


$ dotnet add package AntDesign --version 0.6.0-*



2、在项目中注册:


services.AddAntDesign();

因为我的项目还没有添加Startup，就在Program里面注册了：builder.Services.AddA.

			
		

	



              


  
              

                


	

		

			

				
					
Ant Design Pro Blazor：企业级应用的一站式UI解决方案

				
			

			

				

					gitblog_00996的博客
				

				

					12-06
					
					893
					
				

			

		

		

			
				
Ant Design Pro Blazor 是一个基于 Blazor 的企业级应用 UI 解决方案，旨在为开发者提供一个开箱即用的 UI 模板。该项目的主要编程语言包括 HTML、C#、Less、JavaScript 和 CSS。

## 项目基础介绍

该项目是基于 Ant Design 的设计语言，通过 Blazor 技术实现的一套完整的 UI 组件库。它提供了丰富的页面模板和组件，适用于构建...

			
		

	





	

		

			

				
					
超详细ant-design-blazor快速入门指南：从安装到部署只需30分钟

				
			

			

				

					gitblog_01152的博客
				

				

					09-08
					
					1044
					
				

			

		

		

			
				
你是否还在为Blazor项目寻找一套完整的UI解决方案？是否因组件库配置复杂而望而却步？本文将带你从零开始，在30分钟内完成Ant Design Blazor的环境搭建、组件使用、主题定制到最终部署的全流程。读完本文后，你将能够：
- 快速搭建Ant Design Blazor开发环境
- 掌握核心组件的使用方法
- 定制符合项目需求的主题样式
- 完成应用的构建与部署

## 一、环境准备：5分...

			
		

	



		

			
		



	

		

			

				
					
Ant Design Pro Blazor：企业级应用的终极UI解决方案

				
			

			

				

					gitblog_00677的博客
				

				

					09-08
					
					911
					
				

			

		

		

			
				
**Ant Design Pro Blazor** 是一个开箱即用的企业级应用UI解决方案，专为Blazor框架设计。它不仅提供了丰富的UI组件和模板，还集成了多种常见的企业应用场景，帮助开发者快速搭建高质量的企业级应用。无论你是初学者还是经验丰富的开发者，Ant Design Pro Blazor都能为你提供强大的支持，让你专注于业务逻辑的实现，而不是繁琐的UI设计。

## 项目技术分析

A...

			
		

	





	

		

			

				
					
推荐使用：Ant Design Pro Blazor —— 超凡的Blazor企业级应用框架

				
			

			

				

					gitblog_00054的博客
				

				

					05-18
					
					1018
					
				

			

		

		

			
				
Ant Design Pro Blazor 是一款专为构建企业级应用程序而设计的强大Blazor框架。它提供了丰富的预设模板和组件，旨在帮助开发者快速搭建功能完善的前端界面，实现从零到一的飞跃。无论您是新手还是经验丰富的开发者，这款框架都将大大提升您的开发效率。

![Ant Design Pro Blazor Screenshot](https://user-images.githubuserc...

			
		

	





	

		

			

				
					
Ant Design Blazor Pro 更新 .NET 8

				
			

			

				

					dotNET跨平台
				

				

					11-22
					
					581
					
				

			

		

		

			
				
Ant Design Blazor Pro 是Ant Design Blazor的模板项目，包括了 Charts 和 ProLayout，现在都更新到 .NET 8了，欢迎大家更新使用！访问地址：https://pro.antblazor.com/从上图可以看到，在这次更新，我加入了很多朋友都在问的标签页，另外还在顶部加入了页面刷新和边栏收起按钮。安装模板$dotnetnew--insta...

			
		

	





	

		

			

				
					
Ant Design Blazor入门（使用ant模板初始化项目及运行github代码）

				
			

			

				

					qq_40600379的博客
				

				

					03-21
					
					4727
					
				

			

		

		

			
				
Ant Design Blazor支持MIT开源协议，Ant Design Blazor Pro支持Apache2.0开源协议。​	使用CMD安装ant模板，可以帮助我们获取到一个项目模板。​

			
		

	





	

		

			

          精选资源
				
					
Ant基于Ant Design和Blazor WebAssembly的一组企业级UI组件。-.NET开发

				
			

			

				

					05-27
				

			

		

		

			
				
Ant Design Blazor-基于Ant Design和Blazor的企业级UI组件。 Ant Design Blazor基于Ant Design和Blazor的企业级UI组件。 英文| 简体中文:sparkles:功能for专为Web应用程序设计的企业级UI。 the开箱即用的一组高质量...

			
		

	





	

		

			

				
					
Blazor + Ant Design + .NET 5快速开发框架（8）Ant Design  Icon图标库

				
			

			

				

					qq_32174441的博客
				

				

					04-23
					
					1993
					
				

			

		

		

			
				
前言

icon可以使网站一目了然，在网站中假如一个可以直接选择图标的blazor组件，由于Ant Design没提供可以直接显示图标的组件，这里打算自己弄一个，方式是把所有的icon名称拷贝下来，然后遍历显示就可以。

爬网站

我的用方式简单粗暴，直接ctrl+s把页面保存下来，然后利用正则提取。

正则表达式：<span class=\"ant-badge\" id=\"(.*?)\" _bl_(.*?)=\"\">(.*?)</span>

亲测好用，一共是420个图标，以后

			
		

	





	

		

			

          精选资源
				
					
blazor后台管理框架，AntDesign风格

				
			

			

				

					06-28
				

			

		

		

			
				
Blazor后台管理框架是基于Microsoft的.NET框架构建的，它利用WebAssembly技术在浏览器中运行...通过这个框架，开发者可以快速构建一个功能完善的后台管理系统，同时享受到Blazor的高效开发和AntDesign的优秀设计体验。

			
		

	





	

		

			

				
					
Blazorise:Blazorise 是一个构建在 Blazor 之上的组件库，支持 CSS 框架，如 Bootstrap、Bulma、AntDesign 和 Material

				
			

			

				

					07-23
				

			

		

		

			
				
Blazor 的组件
 Blazorise 是一个构建在和 CSS 框架（如 Bootstrap、Bulma 和 Material）之上的组件库。
商业支持
Blazorise 组件作为订阅的一部分提供。
 使用商业许可证，您将获得：
 访问高级主题和模板
高级论坛支持
24 或 16 小时响应时间的专用客户支持
优先修复和功能请求
支持 Blazorise
 Blazorise 是一个 Apache 2.0 许可的开源项目，其持续开发完全得益于这些出色的支持者的支持。
特别赞助商
 演示
 Blazor WebAssembly
 引导程序演示
材料演示
布尔玛演示
蚂蚁设计演示
 Blazor 服务器
引导程序演示
 Note: This project is still experimental so it's possible that some components will be

			
		

	





	

		

			

				
					
Ant Design Pro Blazor 项目教程

				
			

			

				

					gitblog_00497的博客
				

				

					09-08
					
					946
					
				

			

		

		

			
				
```
ant-design-pro-blazor/
├── src/
│   ├── AntDesign Pro/
│   │   ├── Components/
│   │   ├── Pages/
│   │   ├── Services/
│   │   ├── Shared/
│   │   ├── App.razor
│   │   ├── MainLayout.razor
│   │...

			
		

	





	

		

			

				
					
Ant Design Pro Blazor 开源项目教程

				
			

			

				

					gitblog_00368的博客
				

				

					09-08
					
					620
					
				

			

		

		

			
				
Ant Design Pro Blazor 是一个面向企业级应用的开箱即用的 UI 解决方案，它以 Blazor 框架为基础，提供了丰富的组件和模板，旨在加速 Web 应用的开发过程。这个项目结合了 Ant Design 的优美设计原则与 Blazor 的高效编程模型，使得开发者能够迅速构建出既美观又功能齐全的企业应用。

## 项目快速启动

要快速启动使用 Ant Design Pro Bla...

			
		

	





	

		

			

				
					
AntDesignBlazor试用

				
			

			

				

					三苦庵笔记
				

				

					06-08
					
					2134
					
				

			

		

		

			
				
新建一个Blazor App，命名为BlazorTest.Ant
安装依赖
打开package manager console

Install-Package Antdesign



Startup的ConfigureServices方法中加入

services.AddAntDesign();

_Host.cshtml的<head>中加入
    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="styl.

			
		

	





	

		

			

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

				
			

			

				

					weixin_39628384的博客
				

				

					11-20
					
					1213
					
				

			

		

		

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

			
		

	





	

		

			

				
					
【Blazor之关于组件库Ant Design of Blazor组件样式的修改】

				
			

			

				

					weixin_48464854的博客
				

				

					11-14
					
					2075
					
				

			

		

		

			
				
Blazor之关于组件库Ant Design of Blazor组件样式的修改

			
		

	





	

		

			

				
					
Blazor Auto模式模板来了！AntDesign Blazor 0.19.2 发布!

				
			

			

				

					dotNET跨平台
				

				

					06-25
					
					328
					
				

			

		

		

			
				
大家好，AntDesign Blazor又更新了！新增了几个小特性，修复了很多bug。最重要的工作就是给Pro模板新增的 Blazor WebApp 自动渲染模式模板。AntDesign Blazor 早在.NET8 发布时就已经支持Auto模式，但没有在模板中提供，因为觉得跟着文档配置成Auto模式并不难，但是半年来社区一直有朋友遇到配置问题，所以索性改造模板，直接把默认托管类型改为webapp...

			
		

	





	

		

			

				
					
Ant Design Pro Blazor 项目常见问题解决方案

				
			

			

				

					gitblog_00997的博客
				

				

					12-05
					
					824
					
				

			

		

		

			
				
Ant Design Pro Blazor 是一个基于 Blazor 的企业级 UI 解决方案，它提供了一个开箱即用的 boilerplate，适用于构建企业级应用程序。该项目使用了多种编程语言，主要包括：

- **C#**：Blazor 的主要编程语言，用于编写业务逻辑和数据处理。
- **HTML**：用于构建用户界面。
- **Less**：用于样式表的编写和编译。
- **JavaScr...

			
		

	





	

		

			

				
					
blazor使用Antdesign导出word

					
最新发布

				
			

			

				

					11-14
				

			

		

		

			
				
在Blazor中使用Ant Design进行Word导出，可结合第三方库`DocumentFormat.OpenXml`来实现。`DocumentFormat.OpenXml`是一个强大的用于操作Word、Excel和PowerPoint文档的库。以下是具体实现步骤和示例代码：

#### 安装依赖
首先，需要在项目中安装`DocumentFormat.OpenXml`库。可以通过NuGet包管理器来安装：
```sh
Install-Package DocumentFormat.OpenXml
```

#### 创建Word文档
在Blazor组件中，创建一个方法来生成Word文档内容，并将其保存为文件。以下是一个简单的示例：
```csharp
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace YourNamespace.Pages
{
    public partial class ExportWordPage
    {
        private async Task ExportToWord()
        {
            // 创建一个新的Word文档
            using (var memoryStream = new MemoryStream())
            {
                using (var wordDocument = WordprocessingDocument.Create(memoryStream, WordprocessingDocumentType.Document))
                {
                    // 添加一个主文档部分
                    var mainPart = wordDocument.AddMainDocumentPart();
                    mainPart.Document = new Document();
                    var body = mainPart.Document.AppendChild(new Body());

                    // 添加段落和文本
                    var paragraph = body.AppendChild(new Paragraph());
                    var run = paragraph.AppendChild(new Run());
                    run.AppendChild(new Text("这是一个从Blazor导出的Word文档示例。"));

                    // 保存文档
                    mainPart.Document.Save();
                }

                // 将内存流的位置重置到开头
                memoryStream.Position = 0;

                // 创建文件下载链接
                var fileContent = Convert.ToBase64String(memoryStream.ToArray());
                var fileName = "exported_document.docx";
                var downloadLink = $"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,{fileContent}";

                // 使用JavaScript触发下载
                await JsRuntime.InvokeVoidAsync("downloadFileFromStream", fileName, downloadLink);
            }
        }
    }
}
```

#### 添加JavaScript支持
在`wwwroot/index.html`（对于Blazor WebAssembly）或`Pages/_Host.cshtml`（对于Blazor Server）中添加以下JavaScript函数：
```html
<script>
    window.downloadFileFromStream = function (fileName, content) {
        const a = document.createElement('a');
        a.href = content;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    };
</script>
```

#### 在Ant Design组件中使用
在Ant Design的按钮组件中调用`ExportToWord`方法：
```razor
@page "/export-word"
@inject IJSRuntime JsRuntime

<AntDesign.Button OnClick="@ExportToWord">导出为Word</AntDesign.Button>
```

###

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
code-Study

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值