如何在MudDialog中点击MudRadio切换显示不同组件？

直接上可行的实现方式，核心思路是用绑定变量记录选中的Radio选项，再根据这个值条件渲染对应组件：

步骤1：编写Dialog主体代码 #

创建你的MudDialog组件，通过@bind-Value将Radio组和变量绑定，然后用条件渲染切换组件：

<MudDialog>
    <DialogContent>
        <!-- Radio选择组 -->
        <MudRadioGroup @bind-Value="SelectedComponentType" Label="选择要展示的组件">
            <MudRadio Value="UserForm" Label="用户信息表单" />
            <MudRadio Value="SettingsPanel" Label="系统设置面板" />
            <MudRadio Value="PreviewCard" Label="内容预览卡片" />
        </MudRadioGroup>

        <!-- 动态渲染区域 -->
        <div class="mt-5">
            @if (SelectedComponentType == "UserForm")
            {
                <UserInfoForm />
            }
            else if (SelectedComponentType == "SettingsPanel")
            {
                <SystemSettings />
            }
            else if (SelectedComponentType == "PreviewCard")
            {
                <ContentPreview />
            }
        </div>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="CancelDialog">取消</MudButton>
        <MudButton Color="Color.Primary" OnClick="ConfirmDialog">确认</MudButton>
    </DialogActions>
</MudDialog>

步骤2：编写Dialog的逻辑代码 #

在代码块里定义绑定变量和Dialog的基础操作：

@code {
    [CascadingParameter] private MudDialogInstance DialogInstance { get; set; }

    // 记录选中的组件类型，默认选中第一个选项
    private string SelectedComponentType { get; set; } = "UserForm";

    private void ConfirmDialog()
    {
        // 提交时可以把选中的值传回父组件
        DialogInstance.Close(DialogResult.Ok(SelectedComponentType));
    }

    private void CancelDialog()
    {
        DialogInstance.Cancel();
    }
}

步骤3：定义你的自定义组件 #

比如UserInfoForm可以是这样的简单组件：

<h4>用户信息表单</h4>
<MudTextField Label="用户名" Margin="Margin.Dense" />
<MudTextField Label="邮箱" Margin="Margin.Dense" />
<MudDatePicker Label="注册日期" Margin="Margin.Dense" />

其他组件按自己的需求编写即可。

优化建议 #

如果选项较多，用switch语句替代多个@if会更清晰：

<div class="mt-5">
    @switch (SelectedComponentType)
    {
        case "UserForm":
            <UserInfoForm />
            break;
        case "SettingsPanel":
            <SystemSettings />
            break;
        case "PreviewCard":
            <ContentPreview />
            break;
        default:
            <MudAlert Severity="Severity.Info" Text="请选择一个组件类型" />
            break;
    }
</div>

也可以用枚举类型代替字符串，提升类型安全性：

public enum ComponentType
{
    UserForm,
    SettingsPanel,
    PreviewCard
}

// 然后把绑定变量改成枚举类型
private ComponentType SelectedComponentType { get; set; } = ComponentType.UserForm;

对应的Radio组件也要调整Value：

<MudRadio Value="ComponentType.UserForm" Label="用户信息表单" />

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