Html Helpers ( Encapsulación )

Voy a comenzar esta entrada explicando un poco el concepto de los Helpers en ASP.NET MVC.

Los Helpers son simplemente bloques de código encapsulados para facilitar la creación y configuración de controles. Estos nos aportan también la posibilidad de la reutilización en cualquiera de nuestras vistas.

Razor, nos ofrece unos cuantos Helpers muy interesantes y que nos facilitan mucho la creación de controles típicos, pero hoy no nos centraremos en los ya definidos por Razor sino, en la creación de Helpers personalizados.

Veamos cómo crear uno:

“Antes de nada comentar que vamos a crear nuestro helper de forma global para que sea accesible desde cualquier vista, de esta forma damos mucho más sentido al principio de reutilización de estas clases.”

En el siguiente ejemplo vamos a crear un Helper para listar nuestros productos, de tal manera que en cualquier página que necesitemos realizar un listado de productos únicamente tendremos que consumirlo y tendremos como respuesta una lista ya maquetada.

@helper ListadoProductos(List<Product> Productos) {

<ul id=”LPruductos”>

@foreach( var itm in Productos) {

<li>@itm.Nombre ($@itm.Precio)</li>

}

</ul>

}

Este código lo vamos a realizar en un archivo con extensión .cshtml lo llamaremos Helpers.cshtml y lo vamos a guardar en la carpeta App_Code de nuestro proyecto, de esta
manera lo vamos a globalizar .

captura1

De esta manera, cuando queramos utilizar nuestro helper únicamente deberemos llamar a nuestros métodos de la siguiente manera.

<div>

<p>Listado de nuestros productos</p>

@Helpers.ListadoProductos(Model.Productos)

</div>

Conclusión 

Bueno, hemos visto como crear un helper aprovechando la sintaxis que nos proporciona Razor y podemos ver lo interesante que nos puede resultar para realizar lógicas globales y reutilizables .

Espero que os haya parecido interesante y de ayuda.

Ciao!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s