在 ASP.NET MVC 5 中對(duì)單選按鈕進(jìn)行分組

問題：

在 ASP.NET MVC 5 應(yīng)用程序中，一個(gè)表單具有多組單選按鈕。每個(gè)組代表一個(gè)問題，但代碼片段僅生成一個(gè)組，導(dǎo)致只有第一個(gè)問題選擇了單選按鈕，而取消選擇了其他問題。如何解決這個(gè)問題，以便按問題正確分組單選按鈕？

答案：

要按問題對(duì)單選按鈕進(jìn)行分組，需要解決所提供代碼中的幾個(gè)問題:

• 重復(fù)的 id: 確保單選按鈕的 id 唯一，以防止無效HTML。
• 重復(fù)的名稱屬性：避免重復(fù)的名稱屬性來創(chuàng)建多個(gè)組。相反，通過為單選按鈕分配相同的名稱屬性來對(duì)它們進(jìn)行分組。
• 綁定到不正確的屬性：將單選按鈕正確綁定到其關(guān)聯(lián)的問題屬性。

修改后的代碼：

@foreach (var question in Model.GeneralQuestions)
{
    <div class="well">
        <h3><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>
}

查看模型：

創(chuàng)建具有綁定到單選按鈕并顯示的屬性的視圖模型

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; }
}

視圖：

@model StudentVM
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.ID)
    @Html.DisplayFor(m => m.Name)
    for (int i = 0; i < Model.Subjects.Count; i++)
    {
        @Html.HiddenFor(m => m.Subjects[i].ID)
        @Html.DisplayFor(m => m.Subjects[i].Name)
        for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
        {
            @Html.HiddenFor(m => 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");
}

修改后的代碼：

• 將單選按鈕綁定到正確的屬性（索引列表中問題的名稱）。
• 為單選按鈕創(chuàng)建唯一的 id 并使用一致的命名約定。
• 使用視圖模型以實(shí)現(xiàn)更好的組織和數(shù)據(jù)表示。

以上是如何在 ASP.NET MVC 5 中按問題正確對(duì)單選按鈕進(jìn)行分組？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！