How to Make MVC3 Editor Templates Match jQueryUI Theme

Question

I'm using MVC3 and I would like to make my views be fully integrated with the jQueryUI themes. This means that for standard @Html.EditorFor fields, I would like their css classes to implement the jQueryUI theme that I have selected, and if I switch themes, that my standard MVC3 inputs change accordingly, even if not decorated with the jQueryUI enhancements?

By default, when I call @Html.EditorFor(x => Model.FirstName), the output is as follows:

<input class="text-box single-line" data-val="true" data-val-length="The First Name field must be between 3 and 50 characters in length" data-val-length-max="50" data-val-length-min="3" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="John" />

This is nice and clean, because I have all the validation attributes included. However, if I try to call @Html.EditorFor(x => Model.FirstName, new { @class = "ui-widget ui-state-default ui-widget-content" }) to apply the jQueryUI styling, the CSS classes aren't applied to the input field (they stay "text-box single-line").

I did find that if I change @Html.EditorFor() to @Html.ListBoxFor() and include the "new { @class = "..." }" with my selected css classes, it renders with the proper jQueryUI classes, but I really like the flexibility of EditorFor to use with any type of input. However, even when using just TextBoxFor, I don't like having to include the jQueryUI classes each time.

To try to overcome this, I tried creating a shared EditorTemplate that derives from System.String and manually putting in the css classes, which worked, but then I loose all the automatic functionality for validation attributes and it seems "hokey". There seems like there has got to be an easier way to automatically apply custom CSS globally to EditorFor helpers.

So my questions are:

How can I tell EditorFor to use custom CSS classes?
How can I override the EditorFor (or at a minimum the TextBoxFor) to globally apply CSS classes so I don't have to keep repeating them?
As a bonus, are there any references out there as to what the jQueryUI classes are used for (e.g. when should I apply ui-state-default vs. ui-widget-content) so that all my standard MVC3 inputs look like inputs decorated with jQueryUI enhancements?

Dangerous Dangerous · Accepted Answer · 2012-01-04T17:51:36

1) You cannot use the existing EditorFor() for specifying addtional html parameters. The parameter you are using in your example is for additional view data and not html attributes. The EditorFor() will create its own HTML attributes.

Alternatively, you can use TextBoxFor() instead and use the htmlAttributes parameter:

@Html.TextBoxFor(m => m.UserName, new { @class = "ui-widget ui-state-default ui-widget-content" })

2) The EditorFor() template can be overriden using an Editor Template. This link demonstrates how.

Basically, to create an EditorTemplate you will need to create a folder named

EditorTemplates

in the Views folder. The name of the folder must be exact and the location of the folder is relevant. If the EditorTemplates folder is placed within the Views/Account folder (if this existed say) for example then the template will only be available to the relevant account views. If you place it within the Shared folder then it will be available to all views.

In the EditorTemplates folder you should create a partial view that is named after the data type that is to be processed. For example, I am assuming that you will only want strings processed with EditorFor so I have named it String.cshtml.

Then in the partial view I have defined the following:

@inherits System.Web.Mvc.WebViewPage<string>

@Html.TextBoxFor(m => m, new { @class = "ui-widget ui-state-default ui-widget-content" })

And thats it. Anywhere that the EditorFor now processes a string you should get something like:

<input class="ui-widget ui-state-default ui-widget-content" data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />

3) Ideally, you should only really ask a single question in a Stack Overflow question and a simple google search should be able to answer this. However, here are the definitions of ui-state-default and ui-widget-content:

.ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.

.ui-widget-content: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)

Hope this helps.

How to Make MVC3 Editor Templates Match jQueryUI Theme

2 Answers