blazorblazor-server-sidemudblazor

MudBlazor - MudTable doesn't open MudDialog


I'm creating a MudTable with some data, and I want to open a MudDialog to edit the row data and then save it.

<MudTable T="Company" items="@_Companies" Dense=true Hover=true Bordered=true Striped=true>
    <HeaderContent>
        <MudTh>Name</MudTh>
        <MudTh>Enabled</MudTh>
        <MudTh></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Enabled">
            @if (context.Enabled)
            {
                <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
            }
            else
            {
                <MudIcon Icon="@Icons.Material.Filled.Close" Color="Color.Error" />
            }
        </MudTd>
        <MudTd DataLabel="Actions" Class="d-flex justify-end">
            <MudIconButton Icon="@Icons.Material.Outlined.Edit" Color="Color.Primary" Size="Size.Small" OnClick="@(() => OpenDialog(context))" />
        </MudTd>
    </RowTemplate>
</MudTable>

<MudDialog @bind-Open="_dialogOpen" MaxWidth="MaxWidth.Small" CloseButton="true">
    <DialogContent>
        <MudText Typo="Typo.h6">Edit</MudText>
    </DialogContent>
    <DialogActions>
        <MudButton Color="Color.Primary" OnClick="Save">Save</MudButton>
        <MudButton OnClick="Cancel">Cancel</MudButton>
    </DialogActions>
</MudDialog>

@code {
    private IEnumerable<Company> _Companies = new List<Company>();
    private bool _dialogOpen = false;
    private Company _selectedCompany = new();

    protected override void OnInitialized()
    {
        _Companies = new List<Company>
        {
            new Company("Company1"),
            new Company("Company2"),
            new Company("Company3")
        };
    }

    private void OpenDialog(Company company)
    {
        _dialogOpen = true;
    }

    private void Save()
    {
        var original = _Companies.FirstOrDefault(c => c.Name == _selectedCompany.Name);
        if (original != null)
        {
            original.Name = _selectedCompany.Name;
            original.Enabled = _selectedCompany.Enabled;
        }
        _dialogOpen = false;
    }

    private void Cancel()
    {
        _dialogOpen = false;
    }

    public class Company
    {
        public string Name { get; set; }
        public bool Enabled { get; set; }

        public Company() {}

        public Company(string name)
        {
            Name = name;
            Enabled = true;
        }

        public Company(string name, bool enabled)
        {
            Name = name;
            Enabled = enabled;
        }
    }
}

Well, with this configuration, I can't open the MudDialog. I have RenderMode = InteractiveServer in routes. If I debug, I see that the OpenDialog is triggered in code, but the MudDialog doesn't show

I try the same in try.mudblazor.com and I see that don't open the MudDialog too.

If you want to try, you'll see that the MudDialog doesn't appears: https://try.mudblazor.com/snippet/cawJOWbBocLefKjg

Some information

.NET version: .NET 9 MudBlazor version: 8.0.11 Project type: Blazor Server App


Solution

  • MudDialog is not a regular component that can be used like that. You need to create your own razor component using MudDialog, then inject and use the IDialogService to display it.

    Here's an example, i've included how to pass data to and from the dialog.

    MudBlazor Snippet

    MainPage.razor

    @inject IDialogService DialogService
    <MudTable T="Company" items="@_Companies" Dense=true Hover=true Bordered=true Striped=true>
        <HeaderContent>
            <MudTh>Name</MudTh>
            <MudTh>Enabled</MudTh>
            <MudTh></MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Name">@context.Name</MudTd>
            <MudTd DataLabel="Enabled">
                @if (context.Enabled)
                {
                    <MudIcon Icon="@Icons.Material.Filled.Check" Color="Color.Success" />
                }
                else
                {
                    <MudIcon Icon="@Icons.Material.Filled.Close" Color="Color.Error" />
                }
            </MudTd>
            <MudTd DataLabel="Acciones" Class="d-flex justify-end">
                <MudIconButton Icon="@Icons.Material.Outlined.Edit" Color="Color.Primary" Size="Size.Small" OnClick="@(() => OpenDialog(context))" />
            </MudTd>
        </RowTemplate>
    </MudTable>
    
    @code {
        private IEnumerable<Company> _Companies = new List<Company>();
    
        protected override void OnInitialized()
        {
            _Companies = new List<Company>
            {
                new Company("Company1"),
                new Company("Company2"),
                new Company("Company3")
            };
        }
    
        private async Task OpenDialog(Company company)
        {
            var options = new DialogOptions(){ Position = DialogPosition.TopCenter };
            var parameters = new DialogParameters<DialogExample> { { x=> x.Company, company } };
            var dialog = await DialogService.ShowAsync<DialogExample>("Custom Options Dialog", parameters, options);
            var result = await dialog.Result;
        }
    }
    

    DialogExample.razor

    <MudDialog>
        <TitleContent>
            Title
        </TitleContent>
        <DialogContent>
            @Company.Name
            IsEnabled: @Company.Enabled <MudSwitch @bind-Value="Company.Enabled" />
        </DialogContent>
        <DialogActions>
            <MudButton OnClick="Cancel">Cancel</MudButton>
            <MudButton Color="Color.Primary" OnClick="Submit">OK</MudButton>
        </DialogActions>
    </MudDialog>
    
    @code {
        [CascadingParameter]
        private IMudDialogInstance MudDialog { get; set; }
    
        [Parameter]
        public Company Company { get; set; } = new Company();
        
        private void Submit() => MudDialog.Close(DialogResult.Ok(true));
    
        private void Cancel() => MudDialog.Cancel();
    }