10

In razor if I had something like:

@Html.EditorFor(model => model.name) or even: @Html.CheckBoxFor(m => m.RememberMe)

How would I add a css class or an id to them? I have been reading about helpers, but would I have to make a helper for every single element? is there no easy way to add a class or id to razor form elements?

Mathew Thompson
  • 55,877
  • 15
  • 127
  • 148
TheWebs
  • 12,470
  • 30
  • 107
  • 211

3 Answers3

14

You cannot do that with the EditorFor helper simply because you don't know what template will be used. You could achieve it but you will need to write a custom editor template. For example this could be achieved by overriding the default editor template and taking into account the second parameter which represents an additional view data.

Here's an example of how such a custom editor template could look for string types (~/Views/Shared/EditorTemplates/string.cshtml):

@Html.TextBox(
    "", 
    ViewData.TemplateInfo.FormattedModelValue,
    ViewData
)

and then you could use it like that:

@Html.EditorFor(model => model.name, new { @class = "myclass" })

With the CheckBoxFor helper you could do that:

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "myclass" })
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Ah, it's time for me to retire for today? You're all over the place now :) Didn't see your answer until I posted mine. – von v. Apr 17 '13 at 14:05
  • @vonv., and yet, it's yours that got upvoted even if posted 2 minutes later :-) – Darin Dimitrov Apr 17 '13 at 14:06
  • With this blog post, since its pointed at MVC2 work for MVC 3? – TheWebs Apr 17 '13 at 14:08
  • 1
    @KyleAdams, of course that it will work for MVC 3 and even 4. Things haven't changed at all in regards to templates since MVC 2. In my answer I have just adapted the template to the Razor syntax but of course if you are using the WebForms view engine it will be the same as the blog post. By the way I strongly recommend you reading the series of blog posts on the subject by Brad Wilson. They are very good. – Darin Dimitrov Apr 17 '13 at 14:09
  • Yeah, I guess it's because the "active" tab is the default tab and that shows the most recent answer too if none of the older posts have comments in them. Well +1 to you for always answering "more completely". You provide a better wiki ;) – von v. Apr 17 '13 at 14:09
  • I assume this concept work on textboxfor and or any other type of input? – TheWebs Apr 17 '13 at 14:23
  • @KyleAdams, yes, any helper such as TextBoxFor, DropDownListFor, ListBoxFor, TextAreaFor, CheckBoxFor and RadioButtonFor. – Darin Dimitrov Apr 17 '13 at 14:34
4

It's easy for CheckboxFor, you can do it like this:

@Html.CheckBoxFor(m => m.RememberMe, new { @class="your_class", @id="the_id" })

It's a bit trickier with EditorFor as it is NOT supported out of the box. What I mean is you can create a template for each type and then do a TextBoxFor adding html attributes (same syntax as with CheckBoxFor). You may have to do it for each type you want supported.

von v.
  • 16,868
  • 4
  • 60
  • 84
0

Because EditorFor isn't type-specific, you can't use it on those.

For CheckBoxFor, you can use:

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "myClass", id = "myID" })

Note the @ before class because that's a reserved keyword in C#

Mathew Thompson
  • 55,877
  • 15
  • 127
  • 148