如何在 ASP.NET MVC 5 中按问题正确对单选按钮进行分组？

在 ASP.NET MVC 5 中对单选按钮进行分组

问题：

在 ASP.NET MVC 5 应用程序中，一个表单具有多组单选按钮。每个组代表一个问题，但代码片段仅生成一个组，导致只有第一个问题选择了单选按钮，而取消选择了其他问题。如何解决这个问题，以便按问题正确分组单选按钮？

答案：

要按问题对单选按钮进行分组，需要解决所提供代码中的几个问题:

• 重复的 id: 确保单选按钮的 id 唯一，以防止无效HTML。
• 重复的名称属性：避免重复的名称属性来创建多个组。相反，通过为单选按钮分配相同的名称属性来对它们进行分组。
• 绑定到不正确的属性：将单选按钮正确绑定到其关联的问题属性。

修改后的代码：

@foreach (var question in Model.GeneralQuestions)
{
    <div class="well">
        <h3 id="strong-question-QuestionString-strong"><strong>@question.QuestionString</strong></h3>
        @foreach (var answer in question.PossibleAnswers)
        {
            @Html.RadioButtonFor(
                model => model.GeneralQuestions.IndexOf(question), // Binding to index of question in list
                answer.Answer,
                new { id = $"question_{question.QuestionID}_answer_{answer.Answer}" })
            @Html.Label(answer.Answer)
            <br>
        }
    </div>
}

查看模型：

创建具有绑定到单选按钮并显示的属性的视图模型

public class QuestionVM
{
    public string QuestionString { get; set; }
    public IEnumerable<answervm> PossibleAnswers { get; set; }
}

public class StudentVM
{
    public int ID { get; set; }
    public string Name { get; set; }
    public List<subjectvm> Subjects { get; set; }
}

public class SubjectVM
{
    public string Name { get; set; }
    public List<questionvm> Questions { get; set; }
}</questionvm></subjectvm></answervm>

视图：

@model StudentVM
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.ID)
    @Html.DisplayFor(m => m.Name)
    for (int i = 0; i  m.Subjects[i].ID)
        @Html.DisplayFor(m => m.Subjects[i].Name)
        for (int j = 0; j  m.Subjects[i].Questions[j].ID)
            @Html.DisplayFor(m => m.Subjects[i].Questions[j].QuestionString)
            foreach (var answer in Model.Subjects[i].Questions[j].PossibleAnswers)
            {
                <div>
                    @Html.RadioButtonFor(
                        m => m.Subjects[i].Questions[j].SelectedAnswer,
                        answer.ID,
                        new { id = $"question_{SubjectQuestions[i].Questions[j].ID}_answer_{answer.ID}" })
                    <label for="@answer.ID">@answer.Text</label>
                </div>
            }
        }
    }
    <input type="submit" value="save">
}

控制器：

public ActionResult Edit(int ID)
{
    StudentVM model = new StudentVM();
    // Populate model with data from database
    return View(model);
}

[HttpPost]
public ActionResult Edit(StudentVM model)
{
    // Save and redirect
    return RedirectToAction("Index");
}

修改后的代码：

• 将单选按钮绑定到正确的属性（索引列表中问题的名称）。
• 为单选按钮创建唯一的 id 并使用一致的命名约定。
• 使用视图模型以实现更好的组织和数据表示。

以上是如何在 ASP.NET MVC 5 中按问题正确对单选按钮进行分组？的详细内容。更多信息请关注PHP中文网其他相关文章！