Based on my research, the correct way to code a checkbox in MVC is as follows.
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
This will render a checkbox, render a label for the checkbox, and make the label clickable, which means clicking the label also toggles the checkbox.
But what about the case where there are multiple checkboxes for a single view-model field? (For example, maybe each checkbox represents a bit within an integer value.) Or, better yet, what about radio buttons, where there are always several options associated with the same field?
In these cases, there seems to be issues with the code above. Either not all elements would be associated with the same field, or multiple elements with the same ID would be rendered.
I have been researching this for a while now. I have found many solutions; however, they all seem to either not have a clickable label, or they require a bunch of custom and/or non-standard coding. Some avoid the use of RadioButtonFor/LabelFor completely, choosing instead to code the raw HTML.
Coding the raw HTML is fine, but didn't the designers of MVC not anticipate that we may need multiple radio buttons for the same field? And, if they did, how did they intended it to be coded?
EDIT:
After researching this some more, the code below is the best way I've found to code radio buttons. This code assumes I've defined an enum for each of my radio options.
@Html.RadioButtonFor(m => m.Gender, Gender.Male, new { id = "gender-male" })
@Html.LabelFor(m => m.Gender, Gender.Male.ToString(), new { @for = "gender-male" })
@Html.RadioButtonFor(m => m.Gender, Gender.Female, new { id = "gender-female" })
@Html.LabelFor(m => m.Gender, Gender.Female.ToString(), new { @for = "gender-female" })
Maybe this is the best I can expect, but it still troubles me a little.
Why is so much customization for basic stuff such as IDs required? Again, didn't Microsoft anticipate that we'd want multiple radio buttons associated with the same field?
if the enum name isn't the same as the description I want for the radio button label, this approach doesn't seem to support field attributes such as
[Display(Name = "")]
.
(I guess the correct handling of multiple checkboxes will be deferred to another question.)
In my opinion, i believe nothing to be done from Microsoft side to handle the case you are talking about.
starting from the Html code, how in html, the multi radio buttons will be presented?
above is a sample I brought it from W3cSchools,
if you want to toggle the radio button by clicking the label, this can be done in two ways in html
first way is to use the for tag in the label
second way is to put the radio input inside a label tag
as you can see, its combination of tags to get the radio button toggles when you click on the label, Microsoft i think kept it simple and flexible to the developer to choose what to do and in the way he likes it.
now, to get the same result in Mvc, either you hard code each radio button you have in one of these 2 methods mentioned above, or to make it more easy, write your own Mvc Html extension, and I recommend the second method.
hope this will help you
Ok, let's do some research. First of all, you don't need unique id to toggle checkbox/radio by clicking a label. Actually you don't need id at all! All you have to do is wrap your input inside
<label>
tag:So far so good, ASP.NET MVC provides you ability to code your own html helpers, let's write one for
Enum
model field!Imagine, we've got some registration model:
Damn! I've just copy-pasted tutorial model o_O. What we want now - is to get user's gender, so we add a
Gender
enum:and add
Gender
field ofGender
type to our model (wish, c# had aGender
access modifier!)Now, time to use some asp.net magic and write our html helper:
and usage of that will look like:
So pretty, isn't it? Of course you can add hella lot's of customization, like rendering radiobuttons with unique mvc-style id's, all kindes of html attributes etc. but this is just a sample, ass kick to right way.
Next, we also want to render checkboxlist!
And again, simple usage:
Btw, it makes sence just for enums marked with
Flags
attribute, and of course you'll have troubles with model binding - it requires custom binder. But it's another question, and i hope Jon Skeet can answer it :)