Crear HTML Helper - MVC4

Recordando que un Html Helper se traduce en código html cuando se muestra en una página podemos crear un control personalizado dándolo la funcionalidad que necesitamos con ayuda de javascript por ejemplo e incluso css.

Para esto debemos crear una página estática y dentro de esta los métodos que necesitemos, luego de esto se debe modificar el archivo Views>Shared>Web.config para agregar el Namespace de la nueva clase para poder hacer uso del Helper desde las Vistas.

El nuevo Helper:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;
 
namespace MvcInventarioEquipos.App_Code
{
    public static class HtmlExtensions
    {
 
        /// <summary>
        /// Caja de texto con formateo del texto
        /// </summary>
        /// <typeparam name="TModel"></typeparam>
        /// <typeparam name="TProperty"></typeparam>
        /// <param name="htmlHelper"></param>
        /// <param name="expression"></param>
        /// <param name="transformacion">U (upper), L (lower), C (capitalize)</param>
        /// <returns></returns>
        public static MvcHtmlString nDeveloperTextBox<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string transformacion)
        {
            var body = expression.Body;
            string nombreElemento = string.Empty;
            string opcionStyle = string.Empty;
            string opcionJS = string.Empty;
 
            if ((body as MemberExpression) != null)
            {
                nombreElemento = (body as MemberExpression).Member.Name;
            }
 
            var valorMetaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            string valorInput = valorMetaData.SimpleDisplayText;
 
            switch (transformacion.ToUpper())
            {
                case "U":
                    opcionJS = "this.value.toUpperCase();";
                    opcionStyle = "uppercase";
                    break;
                case "L":
                    opcionJS = "this.value.toLowerCase();";
                    opcionStyle = "lowercase";
                    break;
                case "C":
                    opcionJS = "this.value.charAt(0).toUpperCase() + this.value.substring(1).toLowerCase();";
                    opcionStyle = "none";
                    break;
                default:
                    opcionJS = "null";
                    opcionStyle = "none";
                    break;
            }
 
            string html = string.Format("<input class=\"text-box single-line\" id=\"{0}\" name=\"{0}\" type=\"text\" value=\"{1}\" style=\"text-transform:{2};\" onblur=\"javascript:this.value={3}\"/>", nombreElemento, valorInput, opcionStyle, opcionJS);
            return MvcHtmlString.Create(html);
        }
 
    }
 
}

Web.config:

  <system.web.webPages.razor>
    <host factoryType
="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType
="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace
="System.Web.Mvc" />
        <add namespace
="System.Web.Mvc.Ajax" />
        <add namespace
="System.Web.Mvc.Html" />
        <add namespace
="System.Web.Optimization"/>
        <add namespace
="System.Web.Routing" />
        <add namespace
="MvcInventarioEquipos.App_Code"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Uso del Helper:

Al escribir @Html. podemos ver que el nuevo helper esta en la lista junto a los demás.



  

Además podemos ver que este muestra la descripción que le dimos en el summary y en el param de nuestro Helper.

  

Esta línea de código crea un input que transforma a mayúsculas lo que el usuario ingrese:

@Html.nDeveloperTextBox(model => model.Etiqueta, "U")