Note
The MessageBox depends on IDialogService and MudDialogProvider
Any global configuration done on the MudDialogProvider will affect all MessageBoxes in your application.
Check the Dialog Configuration section for instructions on how to configure your dialogs globally.
Message Box
The simplest way to show a message box is to use IDialogService.ShowMessageBox. It is a purely procedural way of showing a message box and awaiting the user's decision.
The number of buttons (Yes, No, Cancel) and their text are simply controlled via providing a string or leaving them null. The result is a nullable bool which corresponds directly
to the buttons: Yes => true, No => false, Cancel => null.
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClicked" >Delete</MudButton> <MudChip T="string">@state</MudChip>
@code { [Inject] private IDialogService DialogService { get; set; } string state = "Message box hasn't been opened yet"; private async void OnButtonClicked() { bool? result = await DialogService.ShowMessageBox( "Warning", "Deleting can not be undone!", yesText:"Delete!", cancelText:"Cancel"); state = result == null ? "Canceled" : "Deleted!"; StateHasChanged(); } }
Custom Message Box
MudMessageBox can also be inlined in Razor to be able to customize all its properties with render fragments. The following example shows how we customize the Yes button's color
and icon. All visual elements of the message box can be customized. For Title there is TitleContent, for Message
there is MessageContent, etc.
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnButtonClickedAsync">Delete</MudButton> <MudChip T="string">@_state</MudChip> <MudMessageBox @ref="_mudMessageBox" Title="Warning" CancelText="Cancel"> <MessageContent> Deleting can <b><i>not</i></b> be undone! </MessageContent> <YesButton> <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete!</MudButton> </YesButton> </MudMessageBox>
@code { private MudMessageBox _mudMessageBox; private string _state = "Message box hasn't been opened yet"; private async Task OnButtonClickedAsync() { bool? result = await _mudMessageBox.ShowAsync(); _state = result is null ? "Canceled" : "Deleted!"; StateHasChanged(); } }
Multiline Message
Instead of a string message you can also use MarkupString for the message box content. This is especially useful if you want to display multiline messages or do some basic styling, like highlighting a part of the message, without having to create a full-fledged custom dialog.
This example shows how a multiline MessageBox can still be a one-liner in code, thanks to MarkupString.
<MudButton Variant="Variant.Filled" Color="Color.Info" OnClick="OnButtonClicked">I am Balrog</MudButton> <MudChip T="string">@state</MudChip>
@code { [Inject] private IDialogService DialogService { get; set; } string state = "Message box hasn't been opened yet"; private async void OnButtonClicked() { bool? result = await DialogService.ShowMessageBox( "Secure The Ring", (MarkupString) $"You <br /> Shall <br /> not <br /> <b>Pass!<b/>", yesText:"Fire Whip!", cancelText:"Smash Ground"); state= result==null ? "Returned to Moria" : "Fighting With Gandalf!"; StateHasChanged(); } }
Message Box With DialogOptions
You can also pass in custom DialogOptions to override default or global configurations. For example, allowing the message box to close on escape.
This example shows how a MessageBox can pass in custom DialogOptions to customize behavior or appearance.
<MudButton OnClick="@(() => OpenDialogAsync(_maxWidth))">Open MaxWidth Dialog</MudButton> <MudButton OnClick="@(() => OpenDialogAsync(_closeOnEscape))" Color="Color.Primary">Close On Escape Dialog</MudButton> <MudButton OnClick="@(() => OpenDialogAsync(_noHeader))" Color="Color.Secondary">No header Dialog</MudButton> <MudButton OnClick="@(() => OpenDialogAsync(_backdropClick))" Color="Color.Tertiary">Disable backdrop dialog</MudButton> <MudButton OnClick="@(() => OpenDialogAsync(_fullScreen))" Color="Color.Info">Full Screen Dialog</MudButton> <MudButton OnClick="@(() => OpenDialogAsync(_topCenter))" Color="Color.Success">Top Center Dialog</MudButton> <br /> <MudSwitch @bind-Value="_isInline" Label="Inline" LabelPosition="LabelPosition.End" Color="Color.Primary" /> <MudChip T="string">@_state</MudChip> <br /> <MudMessageBox @ref="_mudMessageBox" Title="Warning" CancelText="Cancel"> <MessageContent> Deleting can <b><i>not</i></b> be undone! </MessageContent> <YesButton> <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete!</MudButton> </YesButton> </MudMessageBox>
@code { [Inject] private IDialogService DialogService { get; set; } private MudMessageBox _mudMessageBox; private string _state = "Message box hasn't been opened yet"; private bool _isInline = true; private readonly DialogOptions _maxWidth = new() { MaxWidth = MaxWidth.Medium, FullWidth = true }; private readonly DialogOptions _closeOnEscape = new() { CloseOnEscapeKey = true }; private readonly DialogOptions _noHeader = new() { NoHeader = true }; private readonly DialogOptions _backdropClick = new() { BackdropClick = false }; private readonly DialogOptions _fullScreen = new() { FullScreen = true, CloseButton = true }; private readonly DialogOptions _topCenter = new() { Position = DialogPosition.TopCenter }; private async Task OpenDialogAsync(DialogOptions options) { bool? result; if (_isInline) { result = await _mudMessageBox.ShowAsync(options); } else { result = await DialogService.ShowMessageBox( "Warning", (MarkupString)"Deleting can <b><i>not</i></b> be undone!", yesText: "Delete!", cancelText: "Cancel", options: options); } _state = result is null ? "Canceled" : "Deleted!"; StateHasChanged(); } }