Adding same classes to all html.textbox on asp.net mvc

Question

I have a project in ASP.NET MVC 4 wich recently has been visually improved with the use of Bootstrap.

Although I'm pretty pleased with it, there is one think I'm not very satisfied with.

I've had to add

new { @class = "form-control input-sm" } 

To all my Html.TextBox helper calls. And I was wondering if there is a more graceful way to do this... maybe overriding the default TextBox helper?

Any insight in this will be much appreciated.

Answer 1

Edit

Its actually doable - to override extension method. For reference see: How to override an existing extension method.

Views are created in "ASP" namespace; so in order for your extension method to override default extension methods in System.Web.Mvc.Html (namely static class InputExtensions) you have to declare your overrides in "ASP" namespace as well. So in your MVC project define class InputExtensionOverride.cs like this:

using System;
using System.Collections.Generic;
using System.Linq.Expressions;
using System.Web.Mvc;

namespace ASP {
  public static class InputExtensionsOverride {
    public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression) {
      return InputExtensionsOverride.TextBoxFor<TModel, TProperty>(htmlHelper, expression, (string)null);
    }

    public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes) {
      return InputExtensionsOverride.TextBoxFor<TModel, TProperty>(htmlHelper, expression, (string)null, htmlAttributes);
    }

    public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes) {
      var dictionary = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
      return InputExtensionsOverride.TextBoxFor<TModel, TProperty>(htmlHelper, expression, (string)null, dictionary);
    }

    public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string format) {
      return InputExtensionsOverride.TextBoxFor<TModel, TProperty>(htmlHelper, expression, format, ((IDictionary<string, object>)null));
    }

    public static MvcHtmlString TextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string format, IDictionary<string, object> htmlAttributes) {
      htmlAttributes = SetCommonAttributes<TModel, TProperty>(htmlHelper, expression, ref htmlAttributes);
      return System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, format, htmlAttributes);
    }

    private static IDictionary<string, object> SetCommonAttributes<TModel, TProperty>(HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, ref IDictionary<string, object> htmlAttributes) {
      if (htmlHelper == null) {
        throw new ArgumentNullException("htmlHelper");
      }

      if (expression == null) {
        throw new ArgumentNullException("expression");
      }

      if (htmlAttributes == null) {
        htmlAttributes = new Dictionary<string, object>();
      }

      if (!htmlAttributes.ContainsKey("class")) {
        htmlAttributes.Add("class", "form-control input-sm");
      }

      return htmlAttributes;
    }
  }

}

In your view there is no change - i.e.:

@using (Html.BeginForm()) {
   @Html.TextBoxFor(m => m.SomeProperty)
}

will generate text box with your "form-control input-sm" css class.

Answer 2

I think you should simply add class for input field using jquery.

$('input[type=text]').addClass('form-control input-sm');

Adding custom helper class for textbox won't be helpfull since you have to change code again in many plcaces.

As example, if this is your custom helper textboxfor

public static class MyHtmlHelpers
{
    public static MvcHtmlString MyTextBoxFor<TModel, TProperty>(
         this HtmlHelper<TModel> helper, 
         Expression<Func<TModel, TProperty>> expression)
    {
        return helper.TextBoxFor(expression, new { @class = "form-control input-sm" }) 
    }
}

You'll have to convert TextBoxFor into this MyTextBoxFor

@Html.MyTextBoxFor(model => model.FirstName)