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
.NET version: .NET 9 MudBlazor version: 8.0.11 Project type: Blazor Server App
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.
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();
}