1

I am trying to get a message to show up using the a card with actions from Ant Design Blazor; however, for some reason I am getting an error that says "Keyword this is not available in the current context".

This is specifically due to the following RenderFragment:

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

The full code for the page is below. This was created using .Net 5 on Visual Studio 2019 using the Blazor Server

    @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://learn.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");
        }
    }

Any thoughts on the way to resolve this or a resource to explain what is happening here?

TsTeaTime
  • 881
  • 1
  • 13
  • 34

1 Answers1

2

You are on the right track, but you missed one thing - you need to add a container component named <AntContainer /> to the App.razor component.

So, in order to display a message using the Message component, you need to make sure that the <AntContainer /> component has been added to App.Razor.

Then use for example like this:

@inject MessageService _message

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

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

More details:

AntBlazor Docs - Message Component

This issue on AntBlazor's Github page

abberdeen
  • 323
  • 7
  • 32