Creating A Confirmation Modal With Blazor + MudBlazor

MudBlazor is an amazing library for Blazor. It adds a lot of controls that can create rich UI in our applications.

If you want to know how to start with MudBlazor, you can click this link. 

Sometimes we need to create modals in order to get confirmation from the user, or if we want to create modal forms to improve the user experience. To create a modal forms using MudBlazor, we need to create a new component in Blazor. We can add a new folder to save it, or just create it in the same folder where the component that will call it is located. In that case, we will create DialogConfirm.razor. In this file, we need to use MudDialog for the general structure, DialogContent to specify the confirmation message, and DialogActions to specify the action buttons that the user can utilize. Finally, in the code we need to implement MudDialog.Close and MudDialog.Cancel to close and confirm the result.

<MudDialog>
    <DialogContent>
        <MudText>Do you confirm?</MudText>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Success" Variant="Variant.Filled" OnClick="Submit">Yes</MudButton>
    </DialogActions>
</MudDialog>
@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }

    void Submit() => MudDialog.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog.Cancel();
}

We can also add some parameters in our modal. We can convert the confirmation message into a parameter, and in this way create a generic component. In the following example, we used @ButtonText to set the text in the button and ContentText to set the confirmation message. Both are parameters in the modal.

<MudDialog>
    <DialogContent>
        <MudText>@ContentText</MudText>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Success" Variant="Variant.Filled" OnClick="Submit">@ButtonText</MudButton>
    </DialogActions>
</MudDialog>
@code {
    [CascadingParameter] MudDialogInstance MudDialog {
        get;
        set;
    }
    [Parameter] public string ContentText {
        get;
        set;
    }
    [Parameter] public string ButtonText {
        get;
        set;
    }
    void Submit() => MudDialog.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog.Cancel();
}

Now that we have the modal component, we are ready to use it in other components. Using DialogService, we can open the modal and set the parameters using DialogParameters. Finally, we need to check the result from the modal to know if the user is cancelling the action or confirming it. In this case, we will call the modal in the Counter component where the user clicks on the button "Click Me":

@page "/counter"
@inject IDialogService DialogService
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Confirm">Click Me</MudButton>

@code {
    private int currentCount = 0;
    private async Task Confirm() {
        var parameters = new DialogParameters();
        parameters.Add("ContentText", "Do you want to confirm?");
        parameters.Add("ButtonText", "Yes");
        var dialogresult = DialogService.Show < DialogConfirm > ("Confirm", parameters);
        var result = await dialogresult.Result;
        if (!result.Cancelled && bool.TryParse(result.Data.ToString(), out bool resultbool)) IncrementCount();
    }
    private void IncrementCount() {
        currentCount++;
    }
}

The result is below. Run the application and navigate to counter component.

Check the repository to get the demo: Mteheran/StartingWithMudBlazor at 3-dialogAlert (github.com)