Dialog

render modes

server
webassembly

Dialogs are used to show a message, confirm an action, or display a form. They are modal, meaning they block interaction with the rest of the page until they are dismissed.

Dialogs are experimental and currently work best in Chromium.

Basic Confirmation Dialog

Sample

<PureButton OnClick="ShowConfirmDialog">Show Dialog</PureButton>
<PureDialog/>
@code {
    [Inject] public required DialogService DialogService { get; set; }
    public async Task ShowConfirmDialog()
    {
        await DialogService.ShowDialog("Dialog title.", builder => builder.AddContent(0, "This is a dialog!"));
    }
}

Confirmation Dialog with Custom Button

Sample

<PureButton OnClick="ShowConfirmDialog">Show Dialog</PureButton>
<PureDialog/>
@code {
    [Inject] public required DialogService DialogService { get; set; }
    public async Task ShowConfirmDialog()
    {
        await DialogService.ShowDialog("Confirm", builder => builder.AddContent(0, "Watch out for gators!"),
        new ShowDialogOptions
        {
            AckColor = Warning, AckButton = "I understand"
        });
    }
}

Action Dialog

With Options

public async Task ShowValidatingDialog()
{
    await DialogService.ShowDialog("Action Dialog", builder => builder.AddContent(0, "Press continue to simulate a 4 second network request."),
        new ShowDialogOptions
        {
            OnConfirm = OnConfirmValidateEvent
        });
}

private async Task<DialogEventResult> OnConfirmValidateEvent(DialogResult arg)
{
    // Simulate a network request
    await Task.Delay(4000);

    // Return a dialog result that will keep the dialog open
    // To close the dialog, just return a Confirmed result:
    // `return DialogEventResult.Confirmed;`
    return new DialogEventResult
    {
        // Signal the dialog to stay open
        Interrupted = true,

        // Show a continuation dialog
        Message = "Validation failed",

        // You can also pass a RenderFragment
        //MessageFragment = MyRenderFragment
    };
}

Dialog Continuations

With Options

public async Task ShowDialog()
{
    await DialogService.ShowDialog("Dialog title.", builder => builder.AddContent(0, "This is a dialog!"),
        new ShowDialogOptions
        {
            OnConfirm = OnConfirmEvent
        });
}

private async Task<DialogEventResult> OnConfirmEvent(DialogResult arg)
{
    return new DialogEventResult
    {
        // Signal the dialog to stay open
        Interrupted = true,

        // Show a continuation dialog
        ContinueWith = new DialogInstance("component")
        {
            // Provide a RenderFragment for the 2nd dialog
            Body = b => b.AddContent(0, "This is a continuation!"),
        }
    };
}