Blazor: ¿mostrar el cuadro de diálogo de confirmación antes de eliminar / actualizar?

Te damos el arreglo a este enigma, al menos eso esperamos. Si continuas con dudas puedes escribirlo en el apartado de preguntas y con placer te responderemos

Solución:

@inject IJSRuntime JsRuntime


...


@code 
    async Task DeleteSymbol(string id)
    
        bool confirmed = await JsRuntime.InvokeAsync("confirm", "Are you sure?");
        if (confirmed)
        
            // Delete!
        
    

Creé un componente popconfirm simple.

 

        @if (Show)
        
            

                @Message
                No
                Yes
            

        
        @Title
    
    @code 
        public bool Show  get; set; 
        [Parameter] public string Title  get; set;  = "Delete";
        [Parameter] public string Class  get; set;  = "btn btn-danger";
        [Parameter] public string Message  get; set;  = "Are you sure?";
        [Parameter] public EventCallback ConfirmedChanged  get; set; 

        public async Task Confirmation(bool value)
        
            Show = false;
            await ConfirmedChanged.InvokeAsync(value);
        

        public void ShowPop()
        
            Show = true;
        
    

CSS

.pop-container
    position: relative;


.popconfirm
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: lightblue;
    width: 250px;
    position: absolute;
    top: -50px;
    padding: 10px;
    border-radius: 8px;

Uso

@code

    public void Test(bool test)
    
        Console.WriteLine(test);
    

Usé la respuesta de @ Egill y la extendí un poco más para que se ajustara a mis requisitos. Esto es lo que necesitaba.

1. El botón eliminar como imagen. (usando íconos de iones)

2. El fondo deshabilitado
3. Ventana emergente en el centro de la pantalla.

Usando RenderFragments para los requisitos particulares.

Esto es con lo que terminé.

Componente:

    

    
        @if (ButtonContent != null)
        
            @ButtonContent
        
        else
        
            @Title
        
    
    @if (Show)
    
        

            

                

                    

                        @if (MessageTemplate != null)
                        
                            @MessageTemplate
                        
                        else
                        
                            @Message
                        
                    
                
                

                    

                        Yes
                    
                    

                        No
                    
                
            
        
    


@code 
    public class MessageTemp
    
        public string msg  get; set; 
    

    public bool Show  get; set; 

    [Parameter]
    public string Title  get; set;  = "Delete";

    [Parameter]
    public string Class  get; set;  = "btn btn-danger";

    [Parameter]
    public string YesCssClass  get; set;  = "btn btn-success";

    [Parameter]
    public string NoCssClass  get; set;  = "btn btn-warning";

    [Parameter]
    public string Message  get; set;  = "Are you sure?";

    [Parameter]
    public EventCallback ConfirmedChanged  get; set; 

    [Parameter]
    public RenderFragment ButtonContent  get; set; 

    [Parameter]
    public RenderFragment MessageTemplate  get; set; 

    public async Task Confirmation(bool value)
    
        Show = false;
        await ConfirmedChanged.InvokeAsync(value);
    

    public void ShowPop()
    
        Show = true;
    

CSS:

.pop-container 
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(132, 4, 4, 0.77);


.popconfirm 
    color: white;
    background-color: gray;
    border-style: solid;
    border-width: 1px;
    border-color: lightblue;
    padding: 10px;
    border-radius: 15px;
    min-width: 250px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


.pop-message-card, .pop-message-card div 
    background-color: rgba(0, 0, 0, 0.00) 


.gradient-to-gray 
    background: linear-gradient(0deg,#000000,#888);
    color: #fff;


.btn-yes 
    background-color: darkgreen;
    color: limegreen;
    width: 100%;


.btn-no 
    background-color: darkred;
    color: lightcoral;
    width: 100%;

Uso:

        
            
        
        
            

                

                    Delete Record?
                
                

                    

                        This will delete the record!

                        Are you sure?
                    
                
            
        

Sección de Reseñas y Valoraciones

Si te sientes impulsado, tienes el poder dejar un tutorial acerca de qué le añadirías a esta noticia.

Utiliza Nuestro Buscador