Creando una modal de confirmación con Blazor + MudBlazor

MudBlazor es una librería increíble para Blazor, agrega muchos controles que pueden crear una interfaz de usuario enriquecida en nuestras aplicaciones.

Si queremos saber cómo empezar con MudBlazor, puedes dar un vistazo este blog enlace.

A veces necesitamos crear modales para obtener la confirmación del usuario, o si queremos crear formularios modales para mejorar la experiencia de usuario. Para crear un formulario modal usando MudBlazor, necesitamos crear un nuevo componente en Blazor. Podemos añadir una nueva carpeta para guardarla, o simplemente crearla en la misma carpeta donde se encuentra el componente que la llamará. En ese caso, crearemos DialogConfirm.razor. En este archivo, necesitamos usar MudDialog para la estructura general, DialogContent para especificar el mensaje de confirmación y DialogActions para especificar los botones de acción que el usuario puede utilizar. Finalmente, en el código necesitamos implementar MudDialog.Close y MudDialog.Cancel para cerrar y confirmar el resultado.

<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();
}

También podemos añadir algunos parámetros en nuestro modal. Podemos convertir el mensaje de confirmación en un parámetro, y de esta manera crear un componente genérico. En el siguiente ejemplo, usamos @ButtonText para establecer el texto en el botón y ContentText para establecer el mensaje de confirmación. Ambos son parámetros en el 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();
}

Ahora que tenemos el componente modal, estamos listos para usarlo en otros componentes. Usando DialogService, podemos abrir el modal y establecer los parámetros usando DialogParameters. Por último, necesitamos comprobar el resultado del modal para saber si el usuario está cancelando la acción o confirmándola. En este caso, llamaremos al modal en el componente Counter donde el usuario hace clic en el botón “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++;
    }
}

Ejecutemos la aplicación y naveguemos hasta el componente Counter y podemos ver la modal con la confirmación que hemos definido.

Puedes revisar el repositorio para obtener el código de ejemplo: Mteheran/StartingWithMudBlazor en 3-dialogAlert (github.com)

Referencia: https://www.c-sharpcorner.com/article/creating-a-confirmation-modal-with-blazor-mudblazor/