0

In my MVC3 application, I have the following JavaScript that takes all textbox controls and all controls rendered with the .text-box .single-line classes and adds the class of ui-widget-content to make the site have a consistent appearance with my theme.

$('.text-box.single-line, textarea').not('.input-validation-error').addClass('ui-widget-content');

Though this works, it seems inefficient (adding classes after the DOM is loaded) and it causes page "flashing" (especially in FireFox).

I have read numberous articles on this topic, but can't seem to find a concise and clean solution. I know the following are options, but none seem to be as clean as MVC should be.

  1. I can change all EditorFor methods to the TextBoxFor with the new { @class = "text-box single-line ui-widget-content" } htmlAttribute, but again, this is not very clean and would require hundreds of changes to controls that use EditorFor.
  2. I can create an editor template that somehow adds the ui-widget-content class for each data type, but that seems like overkill.
  3. I thought about creating my own EditorFor, TextBoxFor, etc. methods in a custom HtmlHelper class that would override the existing methods which add the ui-widget-content class. I thought this would be the cleanest solution, but I've read that it's not recommend to override extension methods. (Source: Overriding Extension Methods)
  4. I would like to somehow tell the CSS file for the "text-box" class to simply add another CSS class to it, but I don't think that's possible (you can only add styles to a class not another class).

Are there any other options that will easily allow me to cleanly apply JQuery UI themes to existing MVC controls?

Community
  • 1
  • 1
bigmac
  • 2,553
  • 6
  • 38
  • 61
  • I think #2 is your cleanest option...one editor template will style all of your controls appropriately. I don't think it's overkill at all. – Ethan Brown Apr 02 '12 at 21:57
  • Thanks Ethan, but wouldn't I have to create editor templates for all base types (String, Int, Decimal, etc.)? – bigmac Apr 02 '12 at 22:04
  • Not necessarily, if you were willing to use the `UIHint` annotation. For example, if you have a field `Foo` in your view model, you would use `[UIHint("MyEditor")] public int Foo { get; set; }` and just make sure you call the editor template `MyEditor`. Of course you'll have to use that annotation for every field you want to use that editor, so it might not meet your needs.... – Ethan Brown Apr 02 '12 at 22:06
  • Another option could be creating a custom action filter that adds the class with custom behavior. Similar to this: http://arranmaclean.wordpress.com/2010/08/10/minify-html-with-net-mvc-actionfilter/. But my recommendation would be to create new methods (ie. ThemedEditorFor) which call the pre-existing extension methods with the added classes. Then refactor and in the future you can generate themed or unthemed elements via your HtmlHelper extensions. – Alec Apr 03 '12 at 02:07

0 Answers0