Closed thechasboi closed 11 years ago
Pretty much the same way as you'd do it with regular radio buttons. Show me what you have tried and I'll help you out to finish it up.
The problem he was having was attempting to use @Html.Bootstrap().RadioButtonListFor(m => m, m => choices, item => item.Value, item => item.Text) in an editor template for bool? (nullable boolean). It appeared that passing in something for choices in there would not create anything and was just returning a blank string (Specifically, we were passing in a SelectList that was pregenerated, but not part of the model, with null, true and false values).
The rest of the template was displaying right (just the form-group div wrapper), but the actual radio button list was not displaying.
I believe when he extracted it from the editor and tried it directly in the form, he was getting an exception related to a null value. I don't know if that was from the choices SelectList not being passed in right, or the SelectList containing a value that is null...
RadioButtonListFor
takes an IEnumerable
as a second parameter. If the editor template is for bool?
, RadioButtonListFor
is not the helper to use. You'd have to use regular Html.Bootstrap().RadioButton("")
.
Here is an example:
YesNo.cshtml placed in folder EditorTemplates
:
@model bool?
@Html.Bootstrap().RadioButton("", true).IsChecked(Model.HasValue && Model.Value).Label().LabelText("Yes")
@Html.Bootstrap().RadioButton("", false).IsChecked(Model.HasValue && !Model.Value).Label().LabelText("No")
@Html.Bootstrap().RadioButton("", "").IsChecked(!Model.HasValue).Label().LabelText("Maybe")
ViewModel contains the following property:
public bool? Active { get; set; }
How it will be used in the view:
@Html.EditorFor(x => x.Active, "YesNo")
Customize it further if needed.
Dmitry
Thanks for all the help. What you gave creates a great template. I have another issue with your radio buttons. Whether it is from the editorfor template or from a set that is inserted onto the view there is a situation where the radio buttons do not work properly. What I mean is that if you are on the page and you click "Yes" or any other radio button in the collection the "Yes" will be selected. If you try and change the answer to No the radio button will not be selected until you click it several times and if you click too fast it will unselect itself and select Yes. This goes with radiobuttonfor as well. THanks for the reply. I am using FF 23.1
There does appear to be an issue with the HTML being output for radio boxes. All radio buttons are getting the same ID first of all, which really shouldn't be happening, and the labels all have a class of "radio" specified and a "for" specified which means that each on points to only at the first item. See bootstraps sample.
I forgot to account for this in the first example. Here is an updated version of the template:
@model bool?
@{var fieldName = ViewData.TemplateInfo.HtmlFieldPrefix;}
@Html.Bootstrap().RadioButton("", true).Id(fieldName + "_yes").IsChecked(Model.HasValue && Model.Value).Label().LabelText("Yes")
@Html.Bootstrap().RadioButton("", false).Id(fieldName + "_no").IsChecked(Model.HasValue && !Model.Value).Label().LabelText("No")
@Html.Bootstrap().RadioButton("", "").Id(fieldName + "_maybe").IsChecked(!Model.HasValue).Label().LabelText("Maybe")
Dmitry
Please find the output code for radio buttons below. It seems the ID is always the same. Since we are using
Another question might be how can I change the id of an html element? Thanks for the reply.
I've tested this last version and it was working fine for me. The ids of the radio buttons were unique.
See how there is an extension method .Id(fieldName + "_yes")
and similar on each .RadioButton()
? That's what assures that ids will be unique. And this is how you have control over id
tag of radio button.
If something still does not work for you, show me exactly what code you are using and what html output you are getting.
Do you guys still have issues with this? Please do let me know if I can help. Meanwhile I'll close the issue.
Thanks for the template. It works pretty great but I would like to remove the default ampersand from the label. Thanks for the reply.
what "default ampersand"? Please show html markup and point to the ampersand you are talking about
Sorry I meant default star. The star next to the label that is made. Thanks for the reply.
just use extension method on the label .ShowRequiredStar(false)
How can I use your wonderful tool to create an editorfor template that has a yes, no, and don't know option radio button list? Thanks for the reply.