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 follo

Answer 1

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

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

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)