Lorsque vous utilisez .net MVC RadioButtonFor (), comment regrouper les éléments afin de ne pouvoir effectuer qu'une seule sélection?

Question

Celui-ci m'a laissé perplexe, j'ai une vue fortement typée qui a cette boucle pour générer des radiobuttons:

 <% foreach (QuestionAnswer qa in Model.QuestionAnswers)
   { %>
    <%= Html.RadioButtonFor(model => model.QuestionAnswers[(int)qa.QuestionID - 1].AnswerValue, "Checked" ) %>
    <%= Html.Encode(qa.OptionValue) %>
<% } %>
 

Le rendu est correct, mais comme les noms ne sont pas identiques, vous pouvez sélectionner plus d’un radiobutton. Comment puis-je les regrouper de sorte qu'un seul radiobutton puisse être sélectionné?

Toute aide serait appréciée!

Answer 1

Le premier paramètre de Html.RadioButtonFor() doit être le nom de la propriété que vous utilisez, et le second paramètre doit être la valeur du bouton radio. Ils auront alors la même valeur d'attribut de nom et à l'aide d'sélectionnez le bouton radio quand/si elle correspond à la valeur de la propriété.

Exemple:

<div class="editor-field">
    <%= Html.RadioButtonFor(m => m.Gender, "M" ) %> Male
    <%= Html.RadioButtonFor(m => m.Gender, "F" ) %> Female
</div>

Voici un exemple plus spécifique:

J'ai fait une rapide MVC projet nommé "DeleteMeQuestion" (DeleteMe préfixe donc je sais que je peux le supprimer plus tard, après que je l'oublie).

J'ai fait le modèle suivant:

namespace DeleteMeQuestion.Models
{
    public class QuizModel
    {
        public int ParentQuestionId { get; set; }
        public int QuestionId { get; set; }
        public string QuestionDisplayText { get; set; }
        public List<Response> Responses { get; set; }

        [Range(1,999, ErrorMessage = "Please choose a response.")]
        public int SelectedResponse { get; set; }
    }

    public class Response
    {
        public int ResponseId { get; set; }
        public int ChildQuestionId { get; set; }
        public string ResponseDisplayText { get; set; }
    }
}

Il y a un simple portée du programme de validation du modèle, juste pour le plaisir. Ensuite, j'ai fait le contrôleur suivant:

namespace DeleteMeQuestion.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index(int? id)
        {
            // TODO: get question to show based on method parameter 
            var model = GetModel(id);
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(int? id, QuizModel model)
        {
            if (!ModelState.IsValid)
            {
                var freshModel = GetModel(id);
                return View(freshModel);
            }

            // TODO: save selected answer in database
            // TODO: get next question based on selected answer (hard coded to 999 for now)

            var nextQuestionId = 999;
            return RedirectToAction("Index", "Home", new {id = nextQuestionId});
        }

        private QuizModel GetModel(int? questionId)
        {
            // just a stub, in lieu of a database

            var model = new QuizModel
            {
                QuestionDisplayText = questionId.HasValue ? "And so on..." : "What is your favorite color?",
                QuestionId = 1,
                Responses = new List<Response>
                                                {
                                                    new Response
                                                        {
                                                            ChildQuestionId = 2,
                                                            ResponseId = 1,
                                                            ResponseDisplayText = "Red"
                                                        },
                                                    new Response
                                                        {
                                                            ChildQuestionId = 3,
                                                            ResponseId = 2,
                                                            ResponseDisplayText = "Blue"
                                                        },
                                                    new Response
                                                        {
                                                            ChildQuestionId = 4,
                                                            ResponseId = 3,
                                                            ResponseDisplayText = "Green"
                                                        },
                                                }
            };

            return model;
        }
    }
}

Enfin, j'ai fait le point de vue suivant qui permet d'utiliser le modèle:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<DeleteMeQuestion.Models.QuizModel>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm()) { %>

        <div>

            <h1><%: Model.QuestionDisplayText %></h1>

            <div>
            <ul>
            <% foreach (var item in Model.Responses) { %>
                <li>
                    <%= Html.RadioButtonFor(m => m.SelectedResponse, item.ResponseId, new {id="Response" + item.ResponseId}) %>
                    <label for="Response<%: item.ResponseId %>"><%: item.ResponseDisplayText %></label>
                </li>
            <% } %>
            </ul>

            <%= Html.ValidationMessageFor(m => m.SelectedResponse) %>

        </div>

        <input type="submit" value="Submit" />

    <% } %>

</asp:Content>

Comme je comprends votre contexte, vous avez des questions à une liste de réponses. Chaque réponse doit dicter la question suivante. J'espère que ça a du sens à partir de mon modèle et commentaires TODO.

Cela vous donne les boutons de la radio avec le même nom d'attribut, mais différents attributs ID.

Answer 2

Dans les cas où l'attribut name est différent, il est plus facile de contrôler le groupe radio via JQuery. Lorsqu'une option est sélectionnée, utilisez JQuery pour désélectionner les autres options.