Confirmation modal dialog

I want to add a confirmation dialog when a user clicks a delete button.
Can this be done with the Radzen Blazor components or do I need to create my own component using Bootstrap modal: https://getbootstrap.com/docs/4.0/components/modal/

I'm having trouble finding a good Blazor example.

Check this thread: How to show a message yes/no before delete record?

Thanks @enchev that is what I'm looking for.
I did a search before posting but didn't find that page.

I do have some trouble understanding how to get this piece working:

async Task ShowSimpleDialog() => await DialogService.OpenAsync("Simple Dialog", ds =>
    @<RadzenCard Style="padding: 20px;">
        <p Style="margin-bottom: 10px;">Confirm?</p>
        <div class="row">
            <div class="col-md-12">
                <RadzenButton Text="Ok" Click="() => ds.Close(true)" Style="margin-bottom: 10px; width: 150px" />
                <RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary" Style="margin-bottom: 10px; width: 150px" />
            </div>
        </div>
    </RadzenCard>);
}

When I put this in the code block of myPage.razor I don't get compile errors which I do get when I put the code in myPage.razor.cs.
My delete method is in myPage.razor.cs, but it has no access to ShowSimpleDialog().

How do I change the code of ShowSimpleDialog() to make it work in my code-behind file or even better as a generic ConfirmDelete component?

I found the solution for you.

First, you have to create a component for the dialog layout. In the component, please add the line
@inject Radzen.DialogService ds;

Then put your <RadzenCard> code to the component. Let say the component name is "CustomDialog".

Finally, change your DialogService.OpenAsync line to:
async Task ShowSimpleDialog() => await DialogService.OpenAsync<CustomDialog>("Simple Dialog",null);

If your component need to be passed parameters, change the null to the parameter dictionary.

1 Like