MVC Radio Button Lists are not grouped when using the HtmlHelper class

Question

Having trouble creating a list of radio buttons that are grouped together, in MVC 3 specifically, but this also applies to MVC 2.

The problem arises when radio buttons are generated using Html helpers and the model is part of an array.

Here is the cut down version of my code.

public class CollectionOfStuff {
  public MVCModel[] Things { get; set }
}

/*This model is larger and represents a Person*/    
public class MVCModel {

  [UIHint("Hidden")]
  public string Id { get; set; }

  public string Name { get; set; }

  public bool IsSelected { get; set; }
}

/*Assigned to new CollectionOfStuff property Things*/    
var items = new[] { 
 new MVCModel() { Id="0" Name = "Name here" }, new MVCModel() { Id="1" Name = "Name there" } 
}

My parent view

@model CollectionOfStuff

@for (int i = 0; i < Model.Things.Length; i++) {
    @Html.EditorFor(m => m.Things[i]);
}

My view rendering individual MVCModel objects

@Model MVCModel

    @{
      var attr = new {
        Checked = Model.IsSelected ? "checked=checked" : ""
      };
    }

    @Html.RadioButtonFor(model => model, Model.Id, attr)

Produces this output:

<input type="radio" value="0" name="MVCModel[0]" id="MVCModel_0_" data-val-required="You need to choose" data-val="true" />
<input type="radio" value="1" name="MVCModel[1]" id="MVCModel_1_" data-val-required="You need to choose" data-val="true" />

The radio buttons are not grouped, however it has the obvious advantage of writing out the meta data for validation.

The other way is by calling:

@Html.RadioButton(name: "GroupName", value: Model.Id, isChecked: Model.IsSelected)     

Produces:

<input type="radio" value="0" name="MVCModel[0].GroupName" id="MVCModel_0__GroupName">
<input type="radio" value="1" name="MVCModel[1].GroupName" id="MVCModel_1__GroupName">

Again, this doesn't produce the desired result. It's also missing the validation meta data.

Another other option is creating a custom template, but the problem with this approach is that all the meta data required for validation is not present.

Any ideas on how I can create grouped radio buttons or obtain meta data so I can create a template myself?

Answer 1

You haven't shown how does your view model look like but you could group them by some property. So let's take an example:

public class MyViewModel
{
    [Required]
    public string SomeProperty { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

View:

@model AppName.Models.MyViewModel
@using (Html.BeginForm())
{
    <div>A: @Html.RadioButtonFor(x => x.SomeProperty, "a")</div>
    <div>B: @Html.RadioButtonFor(x => x.SomeProperty, "b")</div>
    @Html.ValidationMessageFor(x => x.SomeProperty)
    <input type="submit" value="OK" />
}

Now if you want to preselect some radio simply set the property of the view model to the corresponding value of the radio instead of writing some ugly C# code in your views:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        SomeProperty = "a" // select the first radio
    };
    return View(model);
}

Obviously this technique works with any simple property type (not only strings) and with any number of radio buttons that could be associated to this property.