DialogService

The DialogService is a service that can be used to show dialogs. It can be injected into a page or component and is used to show different type of dialogs.

For a component to be useable by the DialogService, it needs to implement IDialogContentComponent<T>.

The DialogService is automatically registered in the DI container with the .AddFluentUIComponents() method call.

Dialog provider

Dialogs are rendered by the <FluentDialogProvider />. This component needs to be added to the main layout of your application/site. You typically do this in the MainLayout.razor file at the end of the <main> section like this:

<main>
    <nav>
        <!-- -->
    </nav>
    <div class="content">
        <article id="article">
            @Body
        </article>
    </div>
    <FluentDialogProvider />
</main>

IMPORTANT!!

For the <FluentDialogProvider/> to work properly, it needs interactivity! If you are using "per page" interactivity or Server Side Rendering (ASP.NET Core 8 or above), make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

See the following pages for examples on how to use the DialogService with the different types of dialogs.

• Regular dialogs
• Message boxes
• Panels
• Splash screens

Exchange data between dialog and calling component

There are two ways to exchange data between the dialog and the component which calls the dialog. The first is by capturing the returned IDialogReference from one of the DialogService.Show...Async methods and then use that reference to get the dialog's result (of type DialogResult). The second is by using an EventCalback parameter as part of the DialogParameters.

Using async/await with an IDialogReference

You can use the DialogService.Show...Async() methods to show a dialog. When the type of dialog supports data exchange with the callingcomponent, these methods return an IDialogReference which can be used to get the dialog's result. The DialogResult contains the data that was passed to and altered in the dialog. It also contains a Cancelled property which indicates if the dialog was cancelled or not.

A typical implementation could look something like this:

DialogParameters<SimplePerson> parameters = new()
{
    Title = $"Hello {simplePerson.Firstname}",
    PrimaryAction = "Yes",
    PrimaryActionEnabled = false,
    SecondaryAction = "No",
    Width = "500px",
    Height = "500px",
    Content = simplePerson,
    TrapFocus = _trapFocus,
    Modal = _modal,
};

IDialogReference dialog = await DialogService.ShowDialogAsync<SimpleDialog, SimplePerson>(parameters);
DialogResult? result = await dialog.Result;

if (result.Data is not null)
{
    SimplePerson? simplePerson = result.Data as SimplePerson;
    Console.WriteLine($"Dialog closed by {simplePerson?.Firstname} {simplePerson?.Lastname} ({simplePerson?.Age}) - Canceled: {result.Cancelled}");
}
else
{
    Console.WriteLine($"[DialogService] Dialog closed - Canceled: {result.Cancelled}");
}

Using an EventCallback

You can exchange data between the component that opened the dialog and the dialog component by using the DialogParameters.Content parameter to specify the type of data and providing a callback function to the DialogParameters.OnDialogResult method.
Any changes you make to the data in the Dialog component will be reflected in the Data object in the calling component when the dialog is closed.
You can use the CreateDialogCallback method in the Dialogservice to create the callback function.
Typically a call would look like this:

OnDialogResult = DialogService.CreateDialogCallback(this, HandleIt),

An typical implemtation could look something like this:

private async Task HandleIt(DialogResult result)
{
    if (result.Cancelled)
    {
        //Handle the cancellation
        return;
    }
    if (result.Data is not null)
    {
        //Handle the data
    }
    //Handle closing the dialog
    await Task.Run(() => ...);
}