When using .net MVC RadioButtonFor (), how do you group, can you make only one choice?

Question

I have a dead end, I have a strongly typed view that this loop has for generating radio objects:

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

It displays great, but since the names do not match, you can select more than 1 radio lens. How can I group them, so only 1 radio object can be selected?

Any help would be appreciated!

Answer 1

The first parameter of Html.RadioButtonFor () should be the name of the property you are using, and the second parameter should be the value of this particular switch. Then they will have the same value of the name attribute, and the assistant will select this radio button if / if it matches the value of the property.

Example:

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

Here is a more specific example:

I made a quick MVC project called "DeleteMeQuestion" (DeleteMe prefix, so I know I can delete it later when I forget about it).

I made the following model:

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

The model has a simple range validator, just for fun. Then I made the following controller:

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

Finally, I made the following view, which uses the model:

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

As far as I understand your context, you have questions with a list of available answers. Each answer will dictate the next question. Hope this makes sense from my TODO model and comments.

This gives you radio buttons with the same name attribute, but different identification attributes.

Answer 2

In my case, I had a set of switches that should have been in a group. I just included the "Selected" property in the model. Then, in the loop to output the ham, just do ...

 @Html.RadioButtonFor(m => Model.Selected, Model.Categories[i].Title) 

Thus, the name will be the same for all switches. When the form is submitted, the "Selected" property is equal to the category name (or identifier or any other), and this can be used to update the binding on the corresponding radio object, like this ...

 model.Categories.Find(m => m.Title.Equals(model.Selected)).Selected = true; 

Not the best way, but it works.

Answer 3

In cases where the name attribute is different, the easiest way to manage a radio group is through jQuery. When an option is selected, use jQuery to override other options.