How do I show confirmation dialog before deleting/updating?

You can show the confirmation dialog box before deleting a row in a table. The following code example shows the confirmation dialog box on delete button click.

<button @onclick="@onDelete">Delete</button>

@if (Show)
{
    <div class="modal" tabindex="-1" role="dialog" style="display: @(Show ? "block" : "none")">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Dialog</h5>
                </div>
                <div class="modal-body">
                    <p>You have unsaved changes in this page. Do you still want to leave this page? </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @onclick="@(()=> this.Show=false)">Ok</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="@(()=> this.Show=false)">Close</button>
                </div>
            </div>
        </div>
    </div>
}
@code {

    public bool Show { get; set; } = false;

    private void onDelete()
    {
        this.Show = true;
    }
}

View Sample in GitHub