Blazorise Message service

Message service is used for quick user confirmation actions.

The IMessageService is a powerful helper utility built on top of Modal component and is used for showing the messages and confirmation dialogs to the user.

Quick Setup

To install and use Message service you only need to define one simple thing.

Step 1. Define wrapper component

IMessageService is automatically registered by Blazorise but it needs just one thing on your side to make it work. You need to place <MessageProvider> somewhere in your application razor code. It can be placed anywhere, but a good approach is to place it in App.razor like in the following example.

<Router AppAssembly="typeof(App).Assembly">
    <Found>...</Found>
    <NotFound>...</NotFound>
</Router>

<MessageProvider />

Examples

Basic

<Button Color="Color.Primary" Clicked="@ShowInfoMessage">Say hi!</Button>

@code {
    [Inject] IMessageService MessageService { get; set; }

    Task ShowInfoMessage()
    {
        return MessageService.Info( "This is a simple info message!", "Hello" );
    }
}

Confirm

The Confirm() method is used to show a confirmation dialog. It can be used to ask the user for confirmation before performing an action, such as deleting an item or submitting a form.

Your choice is:

<Button Color="Color.Danger" Clicked="@ShowConfirmDelete">Delete Item</Button>

<Paragraph>
    Your choice is: <Strong>@result</Strong>
</Paragraph>

@code {
    [Inject] IMessageService MessageService { get; set; }

    bool? result;

    async Task ShowConfirmDelete()
    {
        result = await MessageService.Confirm( "Are you sure you want to delete the item?", "Confirmation" );
    }
}

Choose

The Choose() method is used to show a dialog with multiple choices. It can be used to show a list of options to the user and wait for their selection.

You selected:

<Button Color="Color.Primary" Clicked="@ShowChooseDialog">Choose an option</Button>

<Paragraph>
    You selected: <Strong>@selectedOption</Strong>
</Paragraph>

@code {
    [Inject] IMessageService MessageService { get; set; }

    object selectedOption;

    async Task ShowChooseDialog()
    {
        selectedOption = await MessageService.Choose( "Make a Selection", "Choose one", options =>
        {
            options.Choices = new List<MessageOptionsChoice>
            {
                new("option-1", "Primary Option", Color.Primary),
                new("option-2", "Secondary Option", Color.Secondary),
                new("option-3", "Success Option", Color.Success)
            };
        } );
    }
}