Default selection in RadioButtonFor

Question

I generate a list of radio books, and then try to select one of the options at boot time, as shown below.

Foreach cycle in view

@foreach (var myListItem in Model.MyList) { @Html.RadioButtonFor(m => m.MyType,myListItem.MyType, new {id = myListItem.MyType, @Checked = (Model.MyTypeId == myListItem.MyTypeId) }) @myListItem.MyType } 

Although HTML is generated correctly (see below). The second option is checked instead of the first, even when Model.MyTypeId = 0 .

Generated HTML to view

 <input id="0" name="MyType" value="Option One" CHECKED="True" type="radio">Option One <input id="1" name="MyType" value="Option Two " CHECKED="False" type="radio">Option Two 

Please suggest how else can I select the deafult switch option I want.

Answer 1

In fact, the HTML is incorrect. You need to do something else along these lines:

 @foreach (var myListItem in Model.MyList) { if (Model.MyTypeId == myListItem.MyTypeId) { @Html.RadioButtonFor(m => m.MyType,myListItem.MyType, new { id = myListItem.MyType, @Checked = "" }) } else { @Html.RadioButtonFor(m => m.MyType,myListItem.MyType, new { id = myListItem.MyType, }) } @myListItem.MyType } 

Although I cannot verify the exact output, it should look something like this:

 <input id="0" name="MyType" value="Option One" CHECKED type="radio"> 

You may need to use null to force it to generate CHECKED without ="" , but that would be fine too. Look, this is not a recognized value , this is the attribute itself so the second one is checked.

Answer 2

Anytime I need a list of radio buttons created from a query, I always use this RadioButtonListFor extension method. Works like a charm:

 // jonlanceley.blogspot.com/2011/06/mvc3-radiobuttonlist-helper.html public static MvcHtmlString RadioButtonListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> listOfValues) { var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); var sb = new StringBuilder(); sb.Append("<span class='RadioButtonListFor'> "); if (listOfValues != null) { // Create a radio button for each item in the list foreach (SelectListItem item in listOfValues) { // Generate an id to be given to the radio button field var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value); // Create and populate a radio button using the existing html helpers var htmlAttributes = new Dictionary<string, object>(); htmlAttributes.Add("id", id); if (item.Selected) htmlAttributes.Add("checked", "checked"); var radio = htmlHelper.RadioButtonFor(expression, item.Value, htmlAttributes); // Create the html string that will be returned to the client // eg <label<input data-val="true" data-val-required="You must select an option" id="TestRadio_1" name="TestRadio" type="radio" value="1" />Line1</label> sb.AppendFormat("<label>{0} {1}</label> ", radio, HttpUtility.HtmlEncode(item.Text)); } } sb.Append(" </span>"); return MvcHtmlString.Create(sb.ToString()); } 

Now you can create your own radio buttons from any collection you have in your memory, usually as a property of your ViewModel, for example:

 public int SelectedPaymentMethodId { get; set; } public IEnumerable<SelectListItem> PaymentMethodChoices { get { return from x in dataSourceFoo select new SelectListItem { Text = x.TextThing, Value = x.Id, Selected = (x.Id == SelectedPaymentMethodId) }; } } 

And your view looks as simple as:

 @Html.RadioButtonListFor(model => model.SelectedPaymentMethodId, Model.PaymentMethodChoices)