Add css class to Html.EditorFor in MVC 2

Question

I'm trying to add a css class to a textbox. This is what I have in my view:

<%: Html.EditorFor(m => m.StartDate) %>

I tried following the instructions at this link by making my code:

<%: Html.EditorFor(m => m.StartDate, new { @class: "datepicker" }) %>

But I get a compiler error saying:

Syntax error, ',' expected

What am I doing wrong here?

Answer 1

With MVC3, I kept banging my head because I couldn't get this to work. I didn't want to create a whole EditorTemplate for just adding one class.

Well, instead of using EditorFor, use TextBoxFor, with of course the equals sign like so:

@Html.TextBoxFor(m=> m.ZipCode, new { @class = "zip" })

Answer 2

I would HIGHLY suggest using Editor Templates. It's definitely the "right" way to style your EditorFor.

You can tell a model property to use an Editor Template in two different ways.

The first (the simplest) is to create an editor template for a certain data type - DateTime for example.
The second way to do it is to set it declaratively in your DataAnnotations by using a UIHint.

Edit
I'd also like to add that you should use the "date" type in your input field so that even when JavaScript is disabled, your user can stills see a native datepicker (only valid on modern HTML5 browsers)
<input id="meeting" type="date" value="2011-01-13"/>

Answer 3

I guess a quick and dirty way to do this would be in jQuery, yes?

$(document).ready(function () {
    $('#StartDate').addClass('datepicker');
});

Answer 4

Ideally, you should use the Editor Templates. I got around this issue by using the Editor Template inside the MvcHtmlString.Create() which will let you rebuild the actual HTML code. Of course, you'll want to copy everything in the "class" section to keep the Editor Template as useful as possible.

I tried many of the suggestions above, but eventually, I settled on this, because I think it's less complicated and it lets me continue using Editor Templates:

@MvcHtmlString.Create(Html.EditorFor(m => m.StartDate).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line datepicker\""))

Answer 5

I know this is an old question but thought I could contribute so here goes. I had the same problem and wanted to avoid making Editor Templates. I just wanted a generic handle everything solution that would allow me to specify html attributes when using Html.EditorFor in a view.

I really liked CIAs answer, but I expanded on it a bit so that you can pass in any attributes you need. I created an extra Html.EditorFor method that accepts html attributes:-

public static class EditorForExtentions
{
    public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes, bool extendAttributes)
    {
        string value = html.EditorFor(expression).ToString();

        PropertyInfo[] properties = htmlAttributes.GetType().GetProperties();
        foreach (PropertyInfo info in properties)
        {
            int index = value.ToLower().IndexOf(info.Name.ToLower() + "=");
            if (index < 0)
                value = value.Insert(value.Length - (value.EndsWith("/>") ? 2 : 1), info.Name.ToLower() + "=\"" + info.GetValue(htmlAttributes, null) + "\"");
            else if (extendAttributes)
                value = value.Insert(index + info.Name.Length + 2, info.GetValue(htmlAttributes, null) + " ");            
        }

        return MvcHtmlString.Create(value);
    }
}

You can call it in a view like this

<%=Html.EditorFor(m => m.StartDate, new { @class = "datepicker" }, true)%>

It uses the normal Html.EditorFor method to get the html string, then injects the html attributes needed.

Answer 6

There is no overload for EditorFor that allows you to set HtmlProperties. (IDictionary htmlAttributes)

This link explains how to do it:

http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

Answer 7

I was looking for a solution to apply a style to a specific box generated by the @HTML.EditorFor helper method.

The question was regarding setting a CSS class for @HTML.EditorFor but for anyone who wants to edit the style for a single element.. you can, for example, try this:

In my block, I added a style based on the ID generated by the helper: ..

<style> 
    #EnrollmentInfo_Format
    {
        width:50px;
        font: normal 100% 'Lucida Grande',Tahoma,sans-serif;
        font-size: 11px;
        color: #2e6e9e;
    }
</style>

and then in my page (i'm doing this in a partial view):

@Html.EditorFor(e => e.EnrollmentInfo.Format)

Answer 8

Here's a very simple solution: Remove the double quotes from "datepicker" and retype them back into Visual Studio and it should work.

I had the same problem. I copied/pasted sample code from the web and the code had a special type of quote which caused the "," syntax problem. I know it's really not obvious.