Blazor使用AntDesign框架遇到的问题

《1》使用Message弹出全局信息无法正常显示 ，后面是DeepSeek搜索关键信息找到答案（本项目是Blazor Web App框架，net9.0）

客户端和服务器端都要注入builder.Services.AddAntDesign();

在 Blazor WebApp 项目中，为了支持动态弹出组件（如 Ant Design 的 Message、Modal 等），你需要在 App.razor 中添加 <AntContainer /> 组件，并为它指定渲染模式（RenderMode）。以下是详细的实现步骤和注意事项：

1. 为什么需要 <AntContainer />？

  • Ant Design Blazor 的弹出组件（如 Message、Modal、Notification 等）依赖于 <AntContainer /> 组件来渲染动态内容。

  • <AntContainer /> 是一个容器组件，用于承载这些动态内容。如果没有它，弹出组件将无法正常显示。2

2下面是更换Server端App.razor代码之后信息栏就能正常弹出了，代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorAppShopDemo.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
 
    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet"> <!-- 自动引入到这里 -->
    <link antblazor-css />
    <script src="_content/AntDesign/js/ant-design-blazor.js"></script> <!-- 自动引入到这里 -->
    <script antblazor-js></script>
    <HeadOutlet />
</head>
 
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
 
    @* <Routes @rendermode="RenderMode.InteractiveAuto" /> *@ 
  <AntContainer @rendermode="RenderMode.InteractiveAuto" />
</body>
 
</html>

　《2》在Blazor中的子组件每次都重新初始化　

在 Blazor 中，组件的生命周期决定了它何时会被初始化、渲染和销毁。如果你希望 Add 组件在每次打开 Drawer 时重新初始化，而不是只在程序启动时初始化一次，可以通过以下几种方式实现：

1. 使用 @key 强制重新渲染

Blazor 提供了 @key 指令，可以通过改变 @key 的值来强制重新渲染组件。你可以在 Drawer 打开时生成一个新的 key，从而让 Add 组件重新初始化。

复制代码
<div>
    <Button Type="ButtonType.Primary" @onclick="Open">Open</Button>
    <Drawer Closable="true" @bind-Visible="visible" Placement="DrawerPlacement.Right" Title='("Basic Drawer")' OnClose="OnClose" OnOpen="OnOpen">
        @if (visible)
        {
            <Add @key="componentKey" Id=@model.ProductId OnDataReturned="HandleDataReturned"></Add>
        }
    </Drawer>
</div>

@code {
    private bool visible = false;
    private Model model = new Model();
    private Guid componentKey = Guid.NewGuid(); // 用于 @key 的唯一值

    private void Open()
    {
        visible = true;
        componentKey = Guid.NewGuid(); // 每次打开时生成一个新的 key
    }

    private void OnClose()
    {
        visible = false;
    }

    private void OnOpen()
    {
        // 可以在这里执行一些打开时的逻辑
    }

    private void HandleDataReturned()
    {
        // 处理数据返回的逻辑
    }
}
复制代码

说明：

  • 每次点击 Open 按钮时，componentKey 会生成一个新的 Guid，这会强制 Blazor 重新初始化 Add 组件。

  • @if (visible) 确保 Add 组件只在 Drawer 可见时渲染。

posted @   炽热的舞者  阅读(58)  评论(0)  编辑  收藏  举报
相关博文：
· 88_Eplan画图遇到的问题
· RabbitMQ配置和登陆
· AntDesignBlazor示例——暗黑模式
· 小试Blazor——实现Ant Design Blazor动态表单
· Blazor 自定义组件 弹出框
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示