MudBlazor登录对话框无控件显示问题求助（.NET 9服务端项目）

我正在使用MudBlazor和C# .NET 9开发服务端网站，需要实现一个登录对话框用于输入用户名和密码，但目前对话框显示极小，看不到文本框和按钮。以下是我的代码实现，请帮忙排查问题。

LoginDialog.razor 代码 #

@inject IDialogService DialogService
@using MyNamespace.UserRepo;
@using Microsoft.AspNetCore.Components
@using MudBlazor

<MudDialogProvider />

<MudDialog @bind-IsOpen="_isOpen">
    <MudDialogTitle>Login</MudDialogTitle>
    <MudDialogContent>
        <MudTextField @bind-Value="_username" Label="Username" Required="true" Adornment="Adornment.Start" AdornmentIcon="mdi-account" />
        <MudTextField @bind-Value="_password" Label="Password" Required="true" Password="true" Adornment="Adornment.Start" AdornmentIcon="mdi-lock" />
    </MudDialogContent>
    <MudDialogActions>
        <MudButton OnClick="PerformLogin">Log in</MudButton>
        <MudButton OnClick="CloseDialog">Cancel</MudButton>
    </MudDialogActions>
</MudDialog>

@code {
    // [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    private bool _isOpen = true;
    private string _username = "";
    private string _password = "";

    public void OpenDialog()
    {
        _isOpen = true;
        StateHasChanged();
    }

    private void CloseDialog()
    {
        
    }

    internal async Task PerformLogin()
    {
        UserRepo.Models.User? loggedInUser = await UserRepo.Loader.LoadUsers(_username, _password);
        CloseDialog();
    }
}

MainLayout.razor 代码 #

@inherits LayoutComponentBase
@using MudBlazor
@inject IDialogService DialogService

<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1" Dense=true style="@($"background: {(_isDarkMode ? Colors.LightBlue.Darken4 : Colors.Amber.Lighten5)} !important;")">
        <MudText Typo="Typo.h5" Class="ml-3" style="@($"color: {(_isDarkMode ? Colors.Gray.Lighten5 : Colors.Brown.Darken4)} !important;")">My Name</MudText>
        <MudSpacer /> @* right side *@
        <MudButton OnClick="ShowLoginDialog" Variant="Variant.Outlined" Color="Color.Primary" Style="box-shadow: 0px 0px 8px rgba(0,0,0,0.3)">Log in</MudButton>
        <MudButton OnClick="LogOut" Variant="Variant.Outlined" Color="Color.Primary" Style="box-shadow: 0px 0px 8px rgba(0,0,0,0.3)">Log out</MudButton>
        <MudIcon Icon="@(_isDarkMode ? Icons.Material.Filled.DarkMode : Icons.Material.Filled.LightMode)" Size="Size.Medium" />
        <MudSwitch T="bool" @bind-Value="_isDarkMode" Color="Color.Primary" />
    </MudAppBar>

    <CascadingValue Value="_isDarkMode">
        @Body>
    </CascadingValue>
</MudLayout>

@code {


    private void ShowLoginDialog(MouseEventArgs args)
    {
        var parameters = new DialogParameters<LoginDialog>();
        DialogService.Show<LoginDialog>("", parameters);
    }

    private void LogOut()
    {

    }
}

核心问题 #

1. 错误的对话框实现逻辑：直接在LoginDialog.razor中使用<MudDialog>组件绑定_isOpen状态，但MudBlazor的对话框需要通过DialogService配合MudDialogInstance来管理，而非自行渲染。
2. 缺失关键的级联参数：注释掉了[CascadingParameter] MudDialogInstance MudDialog { get; set; }，导致对话框无法获取正确的渲染上下文，内容无法正常显示。
3. 冗余组件：LoginDialog.razor中的<MudDialogProvider>是多余的，MainLayout.razor已全局注册该组件。
4. 关闭逻辑为空：CloseDialog方法没有执行实际的对话框关闭操作。

修复后的代码 #

LoginDialog.razor

@using MyNamespace.UserRepo;
@using Microsoft.AspNetCore.Components
@using MudBlazor

<MudDialogTitle>Login</MudDialogTitle>
<MudDialogContent>
    <MudTextField @bind-Value="_username" Label="Username" Required="true" Adornment="Adornment.Start" AdornmentIcon="mdi-account" Margin="Margin.Normal" />
    <MudTextField @bind-Value="_password" Label="Password" Required="true" Password="true" Adornment="Adornment.Start" AdornmentIcon="mdi-lock" Margin="Margin.Normal" />
</MudDialogContent>
<MudDialogActions>
    <MudButton OnClick="PerformLogin">Log in</MudButton>
    <MudButton OnClick="CloseDialog">Cancel</MudButton>
</MudDialogActions>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; } = default!;
    private string _username = "";
    private string _password = "";

    private void CloseDialog()
    {
        MudDialog.Cancel();
    }

    internal async Task PerformLogin()
    {
        UserRepo.Models.User? loggedInUser = await UserRepo.Loader.LoadUsers(_username, _password);
        // 登录成功后传递用户名密码给父组件
        MudDialog.Close(DialogResult.Ok(new { Username = _username, Password = _password }));
    }
}

MainLayout.razor（修改ShowLoginDialog方法）

private void ShowLoginDialog(MouseEventArgs args)
{
    var parameters = new DialogParameters<LoginDialog>();
    var dialog = DialogService.Show<LoginDialog>("Login", parameters);
    
    // 可选：监听对话框关闭事件，获取登录数据
    _ = dialog.Result.ContinueWith(result =>
    {
        if (!result.Result.Canceled)
        {
            var loginData = result.Result.Data as dynamic;
            // 在这里处理登录数据
        }
    });
}

关键说明 #

• 移除LoginDialog中的<MudDialog>和<MudDialogProvider>，对话框内容直接作为组件内容由DialogService管理渲染。
• 恢复MudDialogInstance级联参数，用于控制对话框的关闭/取消操作。
• 在PerformLogin中通过MudDialog.Close()传递登录结果，方便父组件获取用户名和密码。
• 给MudTextField添加Margin="Margin.Normal"优化排版间距。

内容的提问来源于stack exchange，提问作者Daniel