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?
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. TheEditorFor()will create its own HTML attributes.Alternatively, you can use
TextBoxFor()instead and use thehtmlAttributesparameter: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
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:
And thats it. Anywhere that the EditorFor now processes a string you should get something like:
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:
Hope this helps.