C# Avanzado - Crear un HTML helper method para sitio web con MVC framework

Dejamos un poco de lado la preguntas de entrevistas para hacer un pequeño post sobre un tema muy util a la hora de crear sitios webs utilizando MVC framework. La idea detrás de este concepto es la de crear extensiones para la clase HtmlHelper y de esta manera generar componentes compartidos en nuestro proyecto.

Crear la extensión

Para crear la extensión a la clase HtmlHelper lo primero que vamos a hacer es crear un Extension Method (pueden buscar en mi blog un post al respecto). Este método sera el encargado de crear el componente HTML que se va a mostrar en nuestro sitio web. Para este ejemplo voy a mostrar como hacer un componente HTML que genera una filtro para una lista. Este filtro no es mas que un abecedario, cada letra cuenta con un link que hará un filtro sobre una lista. Habiendo presentado esto muestro como debería quedar nuestro Extension Method.

namespace WebUI.HtmlHelpers
{
    public static class Paginator
    {
        public static MvcHtmlString PageLink(this HtmlHelper html, List<char> col, Func<char, string> GetURL)
        {
            StringBuilder result = new StringBuilder();
            TagBuilder tag = new TagBuilder("a");
            tag.MergeAttribute("href", GetURL('*'));
            tag.InnerHtml = "ALL";
            result.Append(tag.ToString());
            result.Append(" | ");
            foreach (var letter in col)
     {
                tag = new TagBuilder("a");
                tag.MergeAttribute("href", GetURL(letter));
                tag.InnerHtml = letter.ToString().ToUpper();
                result.Append(tag.ToString());
                result.Append(" | ");
     }

            return MvcHtmlString.Create(result.ToString());
        }
    }
}

Como podemos ver el method debe ser static al igual que la clase que lo contiene. El valor de retorno de nuestro método es del tipo MvcHtmlString que no es ni mas ni menos que un HTML-encoded string. Como parámetros nuestro método debe recibir (como condición para los Extension Method) al HtmlHelper, recordamos que esta es la clase donde nuestro método va a extender. El segundo parámetro como ya había mencionado anteriormente es la lista de caracteres que queremos mostrar en nuestro componente de HTML y finalmente como tercer parámetro vamos a recibir un Funk que utilizaremos para seleccionar dentro de nuestra lista y generar el componente Link, pero eso lo vamos a ver en un minuto.

Lo que vamos a hacer en este método es muy sencillo, vamos a generar mediante un string el HTML plano que queremos que nuestro componente muestre. Para esto mediante la clase TagBuilder vamos a ir generando los tags necesarios. En este caso estamos creando links pero recuerden que ustedes pueden hacer el componente que necesiten. Una vez que tengamos completo nuestro string que representa el HTML plano que queremos mostrar por pantalla llamamos al método estático Create que expone la clase MvcHtmlString para generar nuestro valor de retorno.

  
<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.Routing" />
        <add namespace="WebUI.HtmlHelpers" />
       </namespaces>
    </pages>
  </host>
</system>

Seguido a esto debemos indicarle a Razor que tenga en cuenta nuestro componente. Para hacer esto debemos incluir en el Web.Config el namespace de nuestro Extension Method para que el mismo sea accesible. Para esto solo debemos hacer lo que hice en el código que podemos ver arriba.

Utilizar nuestro metodo

Ahora que tenemos nuestro método disponible (por que lo incluimos en el Web.Config) solo debemos incluirlo en nuestra Vista y lo vamos a hacer como se muestra a continuación.

@{
    var collection = new List<char> { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o','p','q','r','s','t',
    'u','v','w','x','y','z'};
    @Html.PageLink(collection, x => Url.Action("Index", new { start = x }))
}

Como podemos ver solo debemos llamar a la clase @Html y automáticamente va a tener nuestro método. Al mismo le pasamos los parámetros que hemos definido oportunamente. Como ya había adelantado nuestro parámetro Func es una expresión Lambda para seleccionar en nuestra colección y generar el componente ActionLink.

Esta es una manera sencilla de generar componentes comunes a nuestro sitio web mediante estos HtmlHelpers. Espero que este pequeño aporte les sirva, recuerden que este es un ejemplo muy simple de lo que se puede hacer con estos Helpers pero sepan que el poder de esta herramienta esta en la construcción personalizada de componentes HTML y como ya saben cualquier duda que tengan no tienen mas que preguntar.