DmitryEfimenko / TwitterBootstrapMvc

Fluent implementation of ASP.NET-MVC HTML helpers for Twitter Bootstrap.
Apache License 2.0
222 stars 79 forks source link

EditorFor nullable boolean #83

Closed thechasboi closed 11 years ago

thechasboi commented 11 years ago

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.

DmitryEfimenko commented 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.

i8beef commented 11 years ago

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...

DmitryEfimenko commented 11 years ago

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.

thechasboi commented 11 years ago

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

i8beef commented 11 years ago

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.

DmitryEfimenko commented 11 years ago

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")
thechasboi commented 11 years ago

Dmitry

Please find the output code for radio buttons below. It seems the ID is always the same. Since we are using

thechasboi commented 11 years ago

Another question might be how can I change the id of an html element? Thanks for the reply.

DmitryEfimenko commented 11 years ago

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.

DmitryEfimenko commented 11 years ago

Do you guys still have issues with this? Please do let me know if I can help. Meanwhile I'll close the issue.

thechasboi commented 11 years ago

Thanks for the template. It works pretty great but I would like to remove the default ampersand from the label. Thanks for the reply.

DmitryEfimenko commented 11 years ago

what "default ampersand"? Please show html markup and point to the ampersand you are talking about

thechasboi commented 11 years ago

Sorry I meant default star. The star next to the label that is made. Thanks for the reply.

DmitryEfimenko commented 11 years ago

just use extension method on the label .ShowRequiredStar(false)