Blazor 怎么集成 Ant Design Blazor

来源:这里教程网 时间:2026-02-21 17:36:00 作者:

Blazor 集成 Ant Design Blazor 很直接,核心就三步:装包、注册服务、加组件容器。不需要改底层框架,也不用写大量胶水代码,官方支持完善,.NET 6 及以上都能用。

安装 AntDesign NuGet 包

在项目根目录运行命令(推荐用 .NET CLI):

如果是新项目,先创建:
dotnet new blazorwasm -o MyApp
dotnet new blazorserver -o MyApp
再添加包:
dotnet add package AntDesign
国内用户可指定源加速:
dotnet add package AntDesign --source https://nuget.cnblogs.com/v3/index.json

安装后会自动引入 CSS 和 JS 资源(0.17.0+ 版本支持 JS 初始化器自动注入,无需手动加 script 标签)。

在 Program.cs 中注册服务

打开

Program.cs
,在构建 host 的地方加入两行关键配置:

builder.Services.AddAntDesign();
—— 启用全部 Ant Design 组件和主题支持
(可选但推荐)
builder.Services.AddScoped<imessageservice messageservice>();</imessageservice>
INotificationService
等,用于弹窗提示

注意:Server 项目和 WebAssembly 项目都用同一套注册方式,无需区分。

在 App.razor 中添加 AntContainer

这是渲染 Ant Design 组件的必要根容器,否则部分组件(如 Tooltip、Dropdown、Modal)可能无法正确挂载或定位:

App.razor
文件末尾(
<routes></routes>
后面)加上:
<antcontainer></antcontainer>
确保它和
<routes></routes>
处于同一层级,且有交互渲染模式(如
@rendermode="RenderMode.InteractiveAuto"

不加这个容器,菜单下拉、气泡提示等浮层类组件大概率失效或错位。

补充:_Imports.razor 和样式引用

为了让组件在任意 .razor 文件中直接使用,别忘了在

_Imports.razor
里加一行:

@using AntDesign

如果用的是旧版(wwwroot/index.html(WASM)或

_Host.cshtml
(Server)里引入资源:

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

新版基本不用管——包安装后自动处理。

基本上就这些。跑起来后,就能直接用

<button></button>
<table></table>
这类组件了,样式和交互都开箱即用。

相关推荐