BankMan101
BankMan101

Reputation: 281

MudBlazor Dialog not opening, No errors thown

I am using mudblazor 6.10.0, I am having an issue with the Dialog not showing up, even if I use an out of the box dialog it does not open. I do not get an error on the console and no error occurs in the code, but the dialog simply never shows. The button click calls the ToggleOpen code but dialog does not show.

my component

@using Microsoft.AspNetCore.Components
@using MudBlazor

<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">
            <MudIcon Icon="@Icons.Material.Outlined.Edit" Class="mr-3 mb-n1"/>
            Changes made by @User.Name
        </MudText>
    </TitleContent>
    <DialogContent>
        <MudTextField Disabled="true"  Label="Before" @bind-Value="User.Change" Multiline="true" />
    </DialogContent>
    <DialogActions>
        <MudButton Color="Color.Primary" OnClick="Close">Ok</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter] 
    public UserChange User { get; set; }
   
    private void Close() => MudDialog.Close(DialogResult.Ok(true));
}

With the calling parent component

@page "/"

@using MudBlazor
@inject UserChangesService UserChangesService
@inject IDialogService DialogService

<MudText Typo="Typo.h2" Color="Color.Info">Welcome</MudText>
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudCard>
            <MudCardHeader>
                <CardHeaderContent>
                    <MudText Typo="Typo.h5" Color="Color.Info">Recent changes</MudText>
                </CardHeaderContent>
                <CardHeaderActions>
                    <MudIconButton Icon="@Icons.Material.Outlined.FindInPage" Color="Color.Tertiary" />
                </CardHeaderActions>
            </MudCardHeader>
            <MudCardContent>
                @if (!_loading)
                {
                    <MudTable Striped="true" Dense="true" FixedHeader="true" Items="@_changes">
                        <HeaderContent>
                            <MudTh><strong> User </strong></MudTh>
                        </HeaderContent>
                        <RowTemplate>
                            <MudTd>@context.User</MudTd>
                            <MudTd><MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => ToggleOpen(context))">View</MudButton></MudTd>
                        </RowTemplate>
                    </MudTable>
                }
            </MudCardContent>
        </MudCard>
    </MudItem>

</MudGrid>

@code {
    private List<UserChange> _changes;
    private UserChange _selectedChange;
    private bool _loading;

    public void ToggleOpen(AuditHistory auditHistory)
    {
        var parameters = new DialogParameters<AuditChangeDialog>();
        parameters.Add(x => x.user, auditHistory);
        DialogService.Show<UserChangeDialog>("Changes", parameters);
    }
    
    protected override async Task OnInitializedAsync()
    {
        _loading = true;
        _changes = (await UserChangesService.GetAllAsync()).ToList();
        StateHasChanged();
        _loading = false;
    }
}

Upvotes: 4

Views: 2921

Answers (1)

maciek
maciek

Reputation: 1109

You need to add <MudDialogProvider/> to MainLayout.razor as per instructions. https://mudblazor.com/getting-started/installation#manual-install-add-components

Upvotes: 6

Related Questions