Blazor - show confirmation dialog before delete/update?

Question

In the following Blazor (server-side) code snips. How to prompt the confirmation dialog?

<tbody>
    @foreach (var r in lists)
    {
        var s = r.ID;
        <tr>
            <td>@s</td>
            <td><button class="btn btn-primary" @onclick="() => DeleteSymbol(s)">Delete</button></td>
        </tr>
    }
</tbody>

@code {
    async Task DeleteSymbol(string id)
    {
        // Get confirmation response from user before running deletion?
        // Delete!
    }
}

Answer 1

@inject IJSRuntime JsRuntime

<tbody>
...
</tbody>

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

Answer 2

I created a simple popconfirm component.

 <div class="pop-container">
        @if (Show)
        {
            <div class="popconfirm">
                @Message
                <button type="button" class="btn btn-warning" @onclick="() => Confirmation(false)">No</button>
                <button type="button" class="btn btn-primary" @onclick="() => Confirmation(true)">Yes</button>
            </div>

        }
        <button type="button" class="@Class" @onclick="ShowPop">@Title</button>
    </div>
    @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<bool> 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;
}

Usage

<Popconfirm ConfirmedChanged="Test" />
@code{

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

Answer 3

I used @Egill's answer and extended it a bit more to fit my requirement. This is what I needed.

1. The delete button as an image. (using ion-icons)

2. The background disabled
3. Popup in center of the screen.

Using RenderFragments for the particular requirements.

This is what I ended up with.

Component:

    <div>
    <button type="button" class="@Class" @onclick="ShowPop">
        @if (ButtonContent != null)
        {
            @ButtonContent
        }
        else
        {
            @Title
        }
    </button>
    @if (Show)
    {
        <div class="pop-container">
            <div class="popconfirm gradient-to-gray">
                <div class="row">
                    <div class="col">
                        @if (MessageTemplate != null)
                        {
                            @MessageTemplate
                        }
                        else
                        {
                            @Message
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <button type="button" class="btn @YesCssClass" @onclick="() => Confirmation(true)">Yes</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn @NoCssClass" @onclick="() => Confirmation(false)">No</button>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@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<bool> 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%;
}

Usage:

<ConfirmPopup Title="Delete Unit" 
    Message="Delete record?" 
    Class="btn btn-psl-delete" 
    YesCssClass="btn-yes"
    NoCssClass="btn-no"
    ConfirmedChanged="DeleteRecord">
        <ButtonContent>
            <ion-icon name="trash-outline" style="font-size:2em;color:white;"></ion-icon>
        </ButtonContent>
        <MessageTemplate>
            <div class="card pop-message-card">
                <div class="card-header">
                    Delete Record?
                </div>
                <div class="card-body">
                    <p>
                        This will delete the record!<br />
                        Are you sure?
                    </p>
                </div>
            </div>
        </MessageTemplate>
</ConfirmPopup>