[Básico][MVC]Los Helpers en MVC

Llevo bastante tiempo “desaparecido” del blog por motivos de un proyecto que me tiene bastante atareado.

En este artículo quiero hablaros del uso de los helpers existentes dentro de MVC, en que consisten, como y cuando utilizarlos.

¿Qué es un Helper de MVC?

Como indica la palabra Helper, es algo que nos va a ayudar a definir una porción de código html dentro de las vistas que queremos utilizar en nuestra aplicación MVC.

Cuando estamos escribiendo el código de nuestras vistas y pulsamos “@” aparece el intellisenses de Visual Studio indicando los métodos disponibles. Dentro de todos los métodos existentes, vamos a definir tres grandes grupos: Html, Url y Ajax.

HTML Helpers

La clase HtmlHelper nos va a permitir generar código html en tiempo de ejecución para definir controles web como: etiquetas, cajas de texto, combos, checkbox…, vamos a encontrar helpers que nos permitan definir un formulario y la acción que se va a ejecutar en el momento de pulsar submit, o nos va a permitir por ejemplo definir enlaces.

El uso de está clase te va a facilitar la escritura del código de tu vista, evitando incluso cometer errores.

¿Cómo se utiliza?

Su eso es realmente sencillo, como comentaba anteriormente al pulsar @ sale el intellisense, y al teclear “Html.” vamos a ver todos los métodos necesarios para realizar lo que necesitamos.

Dentro de esta clase vamos a encontrar helpers que nos van a ayudar a definir los formularios de nuestra vista indicando la acción que se realizará al hacer submit,

Para cada uno de los métodos vamos a encontrar 2 definiciones, por ejemplo: Html.TextBox y Html.TextBoxFor. La primera nos va a permitir generar nuestro elemento html, a través de las características que le definamos como atributos, el segundo además nos va a permitir establecer el valor de nuestro input enlazandolo al modelo o propiedad del modelo que estemos utilizando dentro de nuestra vista lo que además nos simplificará la tarea de envío de datos devueltos al servidor, ya que el dato ya estará en nuestro modelo. Ejemplos:

   1: @Html.TextBox("myTextBox1", "Ejemplo", new Dictionary<string, object> { { @"class", "textbox" }) 

   1: @Html.TextBoxFor(m=>m.MyProperty, new Dictionary<string, object> { { @"class", "textbox" }) 

¿Cómo definir un formulario?

   1: @using (Html.BeginForm("Update", "Client", FormMethod.Post}))

   2: {

   3:     

   4:     Html.TextBoxFor(m=>m.Name)

   5: }

 

Dentro de los helpers incluidos en esta clase podemos encontrar dos de bastante utilidad: RenderAction y RenderPartial. Los cuales nos van a permitir renderizar dentro de nuestra vista, otra vista o vista parcial.

RenderPartial: suele utilizarse cuando se comparten datos desde la vista que la define, por ejemplo: se quieren visualizar un conjunto de datos concretos del modelo.

RenderAction: Suele utilizarse cuando una vista es independiente de la otra y los datos que se muestran en esta segunda vienen directamente desde el controlador.

URL Helpers

La clase UrlHelper nos va a permitir generar urls para que las podamos utilizar dentro de nuestro aplicación.

El uso de esto nos va a evitar tener que escribir las urls del estilo “../../MiCarpeta/mipagina” o “~/Content/images/miimagen1.png”. Para ello disponemos de los siguientes métodos:

Url.Action: Nos va a devolver la ruta de una acción de un determinado controlador con los parametros que le indiquemos. Existen varias sobrecargas para dicha función por lo que se adapta a cualquiera de las opciones que necesitemos. De este módo podriamos utilizar:

   1: <a href=’@Url.Action(“Home”,”Home”)’>Ir a la Home</a>

Url.Content nos va a convertir una ruta relativa en una ruta absoluta, por lo que nos va a evitar escribir una url incorrecta. Ejemplo:

   1: <link rel="stylesheet" href='@Url.Content("~/Content/screen.css")' type="text/css"/>

 

AJAX Helpers

Dentro del apartado de Html Helpers hemos hablado BeginForm por ejemplo que nos permitia definir formularios para realizar la invocación a una determinada acción.

La clase AjaxHelper nos permite definir algunas características de nuestra vista pero ejecutándolas de forma asíncrona a través del uso de AJAX.

   1: @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "MyHtmlElementId" }))

   2: {

   3:  

   4:     <input type="submit" value="OK" />

   5: }

Después de presionar el boton submit de nuestro formulario se invocará de forma asincrona la acción del controlador, y cuando acabe mostrara en el elemento html cuyo ID sea MyHtmlElementId el valor devuelto por la acción.

 

Conclusiones

La utilización de estos helpers incluidos dentro del framework MVC, viene a realizar una tarea de facilitación a la hora de generar el código HTML de nuestras vistas y minimizar posibles errores al generar ciertos elementos o rutas que necesitemos.

 

Espero que os sea de utilidad.