Comment regrouper correctement les boutons radio par question dans ASP.NET MVC 5 ?

Regroupement des boutons radio dans ASP.NET MVC 5

Question :

Dans une application ASP.NET MVC 5, un formulaire comporte plusieurs ensembles de boutons radio. Chaque groupe représente une question, mais l'extrait de code ne génère qu'un seul groupe, ce qui fait que seule la première question a sélectionné des boutons radio tout en désélectionnant les autres. Comment résoudre ce problème pour regrouper correctement les boutons radio par question ?

Réponse :

Pour regrouper les boutons radio par question, plusieurs problèmes dans le code fourni doivent être résolus :

• Identifiants en double : Assurez-vous d'avoir des identifiants uniques pour les boutons radio afin d'éviter les erreurs HTML.
• Attributs de nom en double : Évitez les attributs de nom en double pour créer plusieurs groupes. Au lieu de cela, regroupez les boutons radio en leur attribuant le même attribut de nom.
• Liaison à une propriété incorrecte : Liez correctement les boutons radio à leur propriété de question associée.

Code modifié :

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

Afficher Modèles :

Créez des modèles de vue avec des propriétés à lier aux boutons radio et affichez les questions.

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

Vue :

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

Contrôleur :

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

Ceci a modifié code :

• Lie les boutons radio à la propriété correcte (l'index de la question dans la liste).
• Crée des identifiants uniques pour les boutons radio et utilise des conventions de dénomination cohérentes.
• Utilise des modèles de vue pour une meilleure organisation et représentation des données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!