ASP.NET MVC 5 でのラジオ ボタンのグループ化

質問:

ASP.NET MVC 5 アプリケーションでは、フォームには複數のラジオ ボタンのセットがあります。各グループは質問を表しますが、コード スニペットはグループを 1 つだけ生成するため、最初の質問のみがラジオ ボタンを選択し、他の質問は選択解除されます。ラジオ ボタンを質問ごとに正しくグループ化するには、どうすれば解決できますか?

回答:

ラジオ ボタンを質問ごとにグループ化するには、提供されたコード內のいくつかの問題に対処する必要があります。 :

• 重複した ID: ラジオ ボタンに一意の ID が設定されていることを確認してください無効な HTML を防止します。
• 名前屬性の重複: 複數のグループを作成する場合は、名前屬性の重複を避けてください。代わりに、同じ name 屬性を割り當ててラジオ ボタンをグループ化します。
• 間違ったプロパティへのバインド: ラジオ ボタンを、関連付けられている質問プロパティに適切にバインドします。

変更コード:

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

表示モデル:

ラジオ ボタンにバインドして表示するプロパティを含むビュー モデルを作成します。

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

この変更されたコード:

• ラジオ ボタンを正しいプロパティ (リスト內の質問のインデックス)。
• ラジオ ボタンに一意の ID を作成し、一貫した命名規(guī)則を使用します。
• より適切な編成とデータ表現のためにビュー モデルを使用します。

以上がASP.NET MVC 5で質問ごとにラジオボタンを正しくグループ化する方法は?の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。