Blazor Server中EditForm绑定导致问卷选项联动异常求助

核心原因是所有问卷选项都绑定到了ViewModel的同一个属性，导致选择任一选项时所有问题的选中状态同步更新。以下是可行的解决思路：

1. 为每个问题单独维护选中状态 #

创建包含问题本身和选中答案的模型类，让每个问题拥有独立的绑定属性：

定义模型 #

// 带选中状态的问题模型
public class QuestionWithAnswer
{
    public int Id { get; set; }
    public string QuestionText { get; set; }
    public List<string> Options { get; set; }
    public string SelectedOption { get; set; } // 存储当前问题的选中项
}

// 问卷ViewModel
public class SurveyViewModel
{
    public List<QuestionWithAnswer> Questions { get; set; } = new();
}

Blazor组件渲染代码 #

<EditForm Model="@SurveyModel" OnValidSubmit="@SubmitSurvey">
    @foreach (var question in SurveyModel.Questions)
    {
        <div class="question-group mb-4">
            <h5>@question.QuestionText</h5>
            @foreach (var option in question.Options)
            {
                <div class="form-check">
                    <InputRadio Name="@question.Id" @bind-Value="question.SelectedOption" Value="@option" />
                    <label class="form-check-label">@option</label>
                </div>
            }
        </div>
    }
    <button type="submit" class="btn btn-primary">提交问卷</button>
</EditForm>

@code {
    private SurveyViewModel SurveyModel { get; set; } = new();

    protected override void OnInitialized()
    {
        // 从数据库加载问卷数据并转换为带选中状态的模型
        // 示例模拟数据
        SurveyModel.Questions = new List<QuestionWithAnswer>
        {
            new() 
            { 
                Id = 1, 
                QuestionText = "您的使用场景是？", 
                Options = new List<string> { "个人", "企业", "教育" } 
            },
            new() 
            { 
                Id = 2, 
                QuestionText = "您的满意度是？", 
                Options = new List<string> { "满意", "一般", "不满意" } 
            }
        };
    }

    private void SubmitSurvey()
    {
        // 遍历SurveyModel.Questions获取每个问题的选中答案，执行入库或其他逻辑
        foreach (var q in SurveyModel.Questions)
        {
            Console.WriteLine($"问题ID:{q.Id}, 选中答案:{q.SelectedOption}");
        }
    }
}

2. 关键注意事项 #

• 单选分组：使用InputRadio时，必须为每个问题设置唯一的Name属性（示例中用问题ID），确保浏览器将同一问题的选项视为一组，避免跨问题的单选冲突。
• 多选场景适配：如果是多选问题，将QuestionWithAnswer中的SelectedOption改为List<string>，并使用InputCheckbox绑定到集合，实现多选项独立选中。
• 数据持久化：提交时遍历SurveyModel.Questions，提取每个问题的Id和SelectedOption，即可对应数据库中的问卷问题与答案进行存储。

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