Blazor Server 如何为各单选按钮存储并回显选中答题结果

• 全局状态设计存在缺陷：原有代码仅维护单份临时答题状态（单个questionId、单个isCorrect值、单个全局HideShowCss样式值），没有按题目维度持久存储每道题的答题结果。一旦用户选择新题的选项，全局变量会直接被新题的状态覆盖，之前已答题目的状态直接丢失。
• 渲染逻辑耦合错误：原有提示块的渲染判断@if (item.QuestionAndAnswerId == questionId) 仅匹配全局存的最新题目ID，所有其他题目都不会进入这个判断分支，自然无法展示之前的答题提示。
• 选项值拼接不统一：部分input的value拼接时逗号后带空格、部分不带，split拆分后容易出现前后空格，导致和数据库答案匹配时出现无意义的判定失败。

后端逻辑调整 #

替换原有全局单值状态为按题目维度存储的字典结构，每次答题时仅更新对应题目的记录，不覆盖全局变量。
修改后的后端代码：

public List<QuestionAndAnswer> questions = new List<QuestionAndAnswer>();
// 替换原有单值状态为字典：Key=题目ID，Value=答题判定结果（1=正确，2=错误）
public Dictionary<int, int> answerRecords = new Dictionary<int, int>();

protected override void OnInitialized()
{
    questions = db.QuestionAndAnswer.ToList();
}

public void GetRadioButtonValue(ChangeEventArgs args)
{
    var getValue = args.Value.ToString();
    var splitValue = getValue.Split(',');
    // 统一去除拆分值的前后空格，避免匹配失败
    var getSelectedValue = splitValue[0].Trim();
    var getQuestionIdStr = splitValue[1].Trim();
    int.TryParse(getQuestionIdStr, out int QuestionId);
    
    var targetQuestion = db.QuestionAndAnswer
        .Where(x => x.QuestionAndAnswerId == QuestionId)
        .FirstOrDefault();
    if (targetQuestion == null) return;

    // 判定结果直接写入对应题目的记录，不再更新全局单值
    if (getSelectedValue == targetQuestion.Answer.Trim())
    {
        answerRecords[QuestionId] = 1;
    }
    else
    {
        answerRecords[QuestionId] = 2;
    }
}

注：原有全局变量HideShowCss、isCorrect、questionId 可以全部删除，不再需要。

前端页面调整 #

修改每道题的提示渲染逻辑，在题目循环内独立查询当前题目的答题记录，不再依赖全局单值判断。
修改后的循环渲染片段：

@foreach (var item in questions)
{
    <p>@item.QuestionDetail</p>

    <!-- 每道题独立查询自身的答题记录 -->
    @if (answerRecords.TryGetValue(item.QuestionAndAnswerId, out int recordResult))
    {
        <p>
            @if (recordResult == 1)
            {
                <span class="badge badge-success">Correct Answer</span>
            }
            else
            {
                <span class="badge badge-danger">Wrong Answer</span>
            }
        </p>
    }

    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" 
                   value="@item.Option1,@item.QuestionAndAnswerId" 
                   @onchange="GetRadioButtonValue" name="@quizIndex">@item.Option1
        </label>
    </div>
    <!-- 剩余3个选项的DOM结构与原有实现保持一致 -->

    quizIndex++;
}

• 所有选项的value拼接逻辑要保持格式统一，不要出现逗号后部分带空格、部分不带的情况，减少不必要的字符串处理成本。
• 不需要额外通过CSS类控制提示块的显隐，因为只有存在答题记录的题目才会渲染对应的提示块，未答题的题目不会生成对应DOM。

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