Dialog

A dialog will overlay your current app content, providing the user with either information, a choice, or other tasks.

See Dialog API for parameter documentation.

Note

The Dialog is dependant on IDialogService and MudDialogProvider

Check the Installation page for instructions regarding default setup.

Usage

Suppose you define a MudDialog in TermsOfServiceDialog.razor. To show the dialog you simply call:

DialogService.Show<TermsOfServiceDialog>("Terms");

The advantage of having the dialog in its own razor component is obviously the ability to reuse it throughout your code-base. You can pass parameters to your dialog on show which allow you to load the dialog with custom data.

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject IDialogService DialogService


<MudButton @onclick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
    Open Simple Dialog
</MudButton>
@code {

    private void OpenDialog()
    {
        DialogService.Show<DialogUsageExample_Dialog>("Simple Dialog");
    }
}

Configuration

The dialogs default behavior can be changed in two ways, either globaly with parameters in the <MudDialogProvider/> or pass down the DialogOptions class when you open the dialog.

1. Global Settings

In the file where you added <MudDialogProvider/> we can pass down different options as parameters. See installation page for more information regarding this.

<MudDialogProvider
    FullWidth="true"  //Sets the dialog to its full width even if content is smaller
    MaxWidth="MaxWidth.ExtraSmall"    //Sets the max width of the dialog
    CloseButton="true"    //If true adds closebutton to the dialog header
    DisableBackdropClick="true"   //If true, clicking the backdrop/overlay will not close the dialog
    NoHeader="true"   //If true disabled the dialog header
    Position="DialogPosition.Center"  //Sets the dialog postion
</

2. Per Dialog (on open)

Below we pass along the DialogOptions class when we open the dialog, this can be done per dialog or you can predefine a bunch of them that you use for specific cases in your system.

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject IDialogService Dialog

<MudButton OnClick="@((e) => OpenDialog(maxWidth))">Open MaxWidth Dialog</MudButton>
<MudButton OnClick="@((e) => OpenDialog(closeButton))" Color="Color.Primary">Close Button Dialog</MudButton>
<MudButton OnClick="@((e) => OpenDialog(noHeader))" Color="Color.Secondary">No header Dialog</MudButton>
<MudButton OnClick="@((e) => OpenDialog(disableBackdropClick))" Color="Color.Tertiary">Disable backdrop dialog</MudButton>
<MudButton OnClick="@((e) => OpenDialog(fullScreen))" Color="Color.Info">Full Screen Dialog</MudButton>
@code {
    DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true };
    DialogOptions closeButton = new DialogOptions() { CloseButton = true };
    DialogOptions noHeader = new DialogOptions() {  NoHeader = true };
    DialogOptions disableBackdropClick = new DialogOptions() { DisableBackdropClick = true };
    DialogOptions fullScreen = new DialogOptions() { FullScreen = true, CloseButton = true };

    private void OpenDialog(DialogOptions options)
    {
        Dialog.Show<DialogUsageExample_Dialog>("Custom Options Dialog", options);
    }
}

3. Per Dialog (from dialog)

The title and the options can also be modified from the dialog component itself by calling SetTitle and SetOptions on the MudDialogInstance object.

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject IDialogService DialogService

<MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
    Options Dialog
</MudButton>
@code {

    private void OpenDialog()
    {
        DialogService.Show<DialogSetOptionsExample_Dialog>("Options Dialog");
    }
}

Templating and Passing Simple Data

In this section we will demonstrate how you can build one dialog but use it for multiple purposes.

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject IDialogService DialogService


<MudButton @onclick="DeleteUser" Variant="Variant.Filled" Color="Color.Error">Delete Records</MudButton>
<MudButton @onclick="Confirm" Variant="Variant.Filled" Color="Color.Success">Remove Email</MudButton>
<MudButton @onclick="Download" Variant="Variant.Filled" Color="Color.Warning">Slow Computer</MudButton>
@code {

    private void DeleteUser()
    {
        var parameters = new DialogParameters();
        parameters.Add("ContentText", "Do you really want to delete these records? This process cannot be undone.");
        parameters.Add("ButtonText", "Delete");
        parameters.Add("Color", Color.Error);

        var options = new DialogOptions() { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };

        DialogService.Show<DialogTemplateExample_Dialog>("Delete", parameters, options);
    }

    private void Confirm()
    {
        var parameters = new DialogParameters();
        parameters.Add("ContentText", "Are you sure you want to remove thisguy@emailz.com from this account?");
        parameters.Add("ButtonText", "Yes");
        parameters.Add("Color", Color.Success);

        DialogService.Show<DialogTemplateExample_Dialog>("Confirm", parameters);
    }

    private void Download()
    {
        var parameters = new DialogParameters();
        parameters.Add("ContentText", "Your computer seems very slow, click the download button to download free RAM.");
        parameters.Add("ButtonText", "Download");
        parameters.Add("Color", Color.Info);

        DialogService.Show<DialogTemplateExample_Dialog>("Slow Computer Detected", parameters);
    }
}

Passing Data

Here is a little more advanced use case, we will use the same dialog but feed it with different server data and then mimmic a delete operation.

Server1

Server2

Server3

Server4

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using MudBlazor.Examples.Data.Models

@inject IDialogService DialogService

<div class="d-flex flex-wrap">
    @foreach (var item in Servers)
    {
        <MudPaper Class="d-flex align-center pa-2 mx-2 my-2">
            <MudText>@item.Name</MudText>
            <MudButton Variant="Variant.Text" Color="Color.Error" OnClick="@((e) => DeleteServer(item))">Delete</MudButton>
        </MudPaper>
    }
</div>
@code {

    async Task DeleteServer(Server server)
    {
        var parameters = new DialogParameters { ["server"]=server };

        var dialog = DialogService.Show<DialogPassingDataExample_Dialog>("Delete Server", parameters);
        var result = await dialog.Result;

        if (!result.Cancelled)
        {
            //In a real world scenario we would reload the data from the source here since we "removed" it in the dialog already.
            Guid.TryParse(result.Data.ToString(), out Guid deletedServer);
            Servers.RemoveAll(item => item.Id == deletedServer);
        }
    }

    //Pretend we are loading this data from a database or API
    public List<Server> Servers { get; } = new List<Server>
    {
        new Server{ Id = Guid.NewGuid(), Name = "Server1", Location = "Denmark", IpAddress = "193.254.123.1" },
        new Server{ Id = Guid.NewGuid(), Name = "Server2", Location = "Sweden", IpAddress = "127.0.0.1" },
        new Server{ Id = Guid.NewGuid(), Name = "Server3", Location = "Russia", IpAddress = "173.164.2.1" },
        new Server{ Id = Guid.NewGuid(), Name = "Server4", Location = "Germany", IpAddress = "193.168.1.1" },
    };
}

Scrollable Dialog

Quick example on how to give your dialog scrollable content.

Page.razor
Dialog.razor
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@inject IDialogService DialogService

<MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
    Scrollable Dialog
</MudButton>
@code {
    bool license_accepted = false;

    async Task OpenDialog()
    {
        var result = await DialogService.Show<DialogScrollableExample_Dialog>("MudBlazor License").Result;

        if (!result.Cancelled)
        {
            license_accepted = (bool)(result.Data ?? false);
        }
    }
}

Inlining Dialog

You can inline MudDialog directly in another component which of course makes most sense for small dialogs that are not re-used somewhere else. The advantage is that you can easily share code and data between dialog and owning component via bindings.
This example also shows how to override the dialog title with a render fragment.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<div class="d-flex">
    <MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
        Edit rating
    </MudButton>
    <MudRating SelectedValue="rating" Disabled="true" Class="mt-1 ml-3" />
</div>

<MudDialog @bind-IsVisible="visible">
    <TitleContent>
        <MudText Typo="Typo.h6">
            <MudIcon Icon="@Icons.Material.Filled.Edit" Class="mr-3"/> Edit rating
        </MudText>
    </TitleContent>
    <DialogContent>
        <p>How awesome are inline dialogs?</p>
        <MudRating @bind-SelectedValue="rating" Class="mt-3"/>
    </DialogContent>
    <DialogActions>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Submit" Class="px-10">Close</MudButton>
    </DialogActions>
</MudDialog>
@code { 
    private bool visible;
    private int rating;
    private void OpenDialog() => visible = true;
    void Submit() => visible = false;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙