Ant Design Blazor 显示消息回调不起作用答案

【问题标题】：Ant Design Blazor Show message Callback not workingAnt Design Blazor 显示消息回调不起作用
【发布时间】：2021-04-23 23:27:08
【问题描述】：

我正在尝试使用带有 Ant Design Blazor 操作的卡片来显示消息；但是，由于某种原因，我收到一条错误消息，提示“关键字在当前上下文中不可用”。

这具体是由于以下 RenderFragment：

private RenderFragment actionEdit =@<Template><Button Type="primary" Icon="edit" OnClick="ShowMessage" /></Template>;

页面的完整代码如下。这是使用 Blazor 服务器在 Visual Studio 2019 上使用 .Net 5 创建的

    @page "/"
    @inject MessageService _message
    <PageContainer Title="Template">
        <Card>
            <Alert Message="Welcome to the Blazor - Ant Design Template"
                   Type="success"
                   ShowIcon
                   Banner
                   Style="margin: -12px; margin-bottom: 24px" />
            <Text Strong>
                <a target="_blank" rel="noopener noreferrer" href="https://https://antblazor.com/en-US/components">
                    Ant Design Blazor - Use this library for UI Components
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0">
                    Blazor Introduction
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://medium.com/swlh/using-npm-packages-with-blazor-2b0310279320">
                    NPM WebPack
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://github.com/Azure-Samples/ms-identity-blazor-server/tree/main/WebApp-OIDC/MyOrg/blazorserver-singleOrg">
                    Authentication
                </a>
            </Text>
        </Card>
        <div>
            <Card Style="width:300px;" Bordered Cover=@image Actions="new[] { actionSetting, actionEdit }">
                <CardMeta Title="Meta Card" Description="Create Some Cards" />
            </Card>
        </div>
    </PageContainer>
    @code
    {
        private RenderFragment actionSetting =@<Template><Button Type="primary" Icon="setting" /></Template>;
        private RenderFragment actionEdit =@<Template><Button Type="primary" Icon="edit" OnClick="ShowMessage" /></Template>;
        private RenderFragment image = @<ImageCard source="/Images/58adc5e81f9a190b00c2fc4f_lo.png" />;
    
    
        private void ShowMessage(MouseEventArgs e)
        {
            _message.Info("test");
        }
    }

关于解决此问题的方法或解释这里发生的事情的资源有什么想法吗？

【问题讨论】：

你能提供完整的错误信息吗？还有，这是什么版本？

标签： c# blazor antd .net-5 ant-design-pro

【解决方案1】：

您在正确的轨道上，但您错过了一件事 - 您需要将一个名为 <AntContainer /> 的容器组件添加到 App.razor 组件。

因此，为了使用 Message 组件显示消息，您需要确保 <AntContainer /> 组件已添加到 App.Razor。

然后像这样使用：

@inject MessageService _message

<Button Type="primary" Icon="edit" OnClick="ShowMessage" />

@code
{
    private void ShowMessage(MouseEventArgs e)
    {
        _message.Info("test");
    }
}

更多细节：

AntBlazor Docs - Message Component

This issue on AntBlazor's Github page

【讨论】：