Dialog Service

A service to programmatically open dialogs with strongly-typed results.

Usage

Inject IDialogService and use ShowAsync<TComponent, TResult, TInput>.

Current Result: None

Code

@inject IDialogService DialogService

@code {
    private async Task OpenDialog()
    {
        var input = new UserProfile { Name = "John Doe", Username = "johndoe" };
        
        var result = await DialogService.ShowAsync<SimpleDialogContent, DialogResult, UserProfile>(
            input,
            new DialogOptions { Dismissable = true }
        );

        if (result.Success)
        {
            Console.WriteLine($"Updated: {result.UpdatedProfile.Name}");
        }
    }
}

Dialog Sizes

Use DialogOptions.Size to control the dialog width when opening via the service. Available sizes: Sm, Md, Lg, Xl, Max2xl, Max3xl, Max4xl, Max5xl, Max6xl, Max7xl, and Full (fullscreen).

Result: None

var result = await DialogService.ShowAsync<SimpleDialogContent, DialogResult, UserProfile>(
    input,
    new DialogOptions
    {
        Size = DialogSize.Xl,       // Extra large
        Dismissable = true
    }
);

// Available sizes:
// DialogSize.Sm      - max-w-sm
// DialogSize.Md      - max-w-md
// DialogSize.Default - max-w-lg (default)
// DialogSize.Lg      - max-w-lg
// DialogSize.Xl      - max-w-xl
// DialogSize.Max2xl  - max-w-2xl
// DialogSize.Max3xl  - max-w-3xl
// DialogSize.Max4xl  - max-w-4xl
// DialogSize.Max5xl  - max-w-5xl
// DialogSize.Max6xl  - max-w-6xl
// DialogSize.Max7xl  - max-w-7xl
// DialogSize.Full    - fullscreen

Stacked Dialogs

Dialogs can be opened from within other dialogs. Each new dialog stacks on top of the previous one with proper z-index management. Closing the topmost dialog reveals the one beneath it.

Result: None

// The dialog component can inject IDialogService and open new dialogs:
@inject IDialogService DialogService

<DialogHeader>
    <DialogTitle>Dialog Level @Data.Level</DialogTitle>
</DialogHeader>
<DialogBody>
    <p>Dialog content...</p>
</DialogBody>
<DialogFooter>
    <Button OnClick="OpenNested">Open Next Dialog</Button>
</DialogFooter>

@code {
    [Parameter] public NestedDialogModel Data { get; set; } = new();
    [CascadingParameter] public DialogContext Dialog { get; set; } = default!;
    @inject IDialogService DialogService

    private async Task OpenNested()
    {
        var input = new NestedDialogModel { Level = Data.Level + 1 };
        var result = await DialogService
            .ShowAsync<NestedDialogContent, string, NestedDialogModel>(input);
    }
}