IDialogService Interface

Allows you to create and show dialogs in code.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IDialogService

Remarks

The dialog service allows you to create and show dialogs (DxMessageBox objects) in code. To use the service, inject it with the [Inject] attribute and declare a DxDialogProvider on the page.

<DxDialogProvider />
@code {
    [Inject] IDialogService DialogService { get; set; }
}

Use methods implemented by the interface to create alert and confirmation dialogs.

AlertAsync(MessageBoxOptions)

Creates and shows an alert dialog that displays the OK button.

<DxDialogProvider />
<DxButton Text="Show a message box window" Click="@OpenConfirmDialogAsync" />

@code {
    [Inject] IDialogService DialogService { get; set; }

    private async Task OpenConfirmDialogAsync() {
        await DialogService.AlertAsync(new MessageBoxOptions() {
            Title = "Error",
            Text = "Unable to process the request. Please try again later or contact support.",
            RenderStyle = MessageBoxRenderStyle.Danger
        });
    }
}

ConfirmAsync(MessageBoxOptions)

Creates and shows a confirmation dialog that displays OK and Cancel buttons.

<DxDialogProvider />
<DxButton Text="Show a message box window" Click="@OpenConfirmDialogAsync" />

@code {
    [Inject] IDialogService DialogService { get; set; }
    private bool? Result { get; set; } = null;

    private async Task OpenConfirmDialogAsync() {
        Result = await DialogService.ConfirmAsync(new MessageBoxOptions() {
            Title = "Error",
            Text = "Unable to process the request. Please try again later or contact support.",
            RenderStyle = MessageBoxRenderStyle.Danger,
            OkButtonText = "Contact Support",
            CancelButtonText = "Try Later",
        });
    }
}

Run Demo: Message Box - Dialog Service

Display Multiline Text

For security reasons, the message box encodes the Text property value. To display multiple lines of text in the message box, specify the CssClass property as follows:

<style>
    .my-messagebox {
        white-space: pre-line;
    }
</style>

<DxDialogProvider RenderStyle="MessageBoxRenderStyle.Danger" />

<DxButton Text="Show a message box window"
          Click="@OpenConfirmDialogAsync" />

@code {
    [Inject] IDialogService DialogService { get; set; }

    private async Task OpenConfirmDialogAsync() {
        await DialogService.ConfirmAsync(new MessageBoxOptions() {
            Title = "Unsaved Changes",
            Text = "A data item has been modified.\r\nDo you want to save changes?",
            RenderStyle = MessageBoxRenderStyle.Warning,
            OkButtonText = "Save",
            CancelButtonText = "Don't Save",
            CssClass = "my-messagebox",
        });
    }
}