Razor templates: EditorFor y DisplayFor

Cuando realizamos una aplicación siempre intentamos lograr la máxima re-utilización del código que escribimos. Al trabajar con web ASP.NET MVC debemos trasladar esto a los distintos ámbitos de la misma, como lo es el código C#, las vistas y el código JavaScript necesario.
Muchas veces cometemos el error de hacer nuevas vistas según las necesidades que van surgiendo, sin revisar las que ya estaban creadas ni la forma en que estaban hechas, generando de esta forma código duplicado (además de resolver nuevamente problemas que ya se había resuelto anteriormente) lo que repercute en tiempo desaprovechado.

Para esto podemos utilizar el concepto de vistas parciales, las cuales nos permiten incluir en una vista una parte común que es compartida por varias. Sin embargo, cuando estamos trabajando con aplicaciones Web, en las cuales hay ingreso de información y visualización de detalles, hay dos funcionalidades muy útiles que podemos aprovechar EditorFor (mediante Editor Templates) y DisplayFor (mediante Display Templates).

ASP.NET MVC se caracteriza por ofrecernos puntos de extensión de sus funcionalidades permitiendo personalizar nuestra aplicación. Este es el objetivo de los templates de Razor que podremos usar bajo las dos formas antes mencionadas, la primera para edición/creación y la segunda para detalle.
En sí tanto EditorFor como DisplayFor ya están disponibles para utilizar con cualquier tipo de objeto soportado de forma nativa por el framework (como propiedades string relacionadas a un TextBox). Lo que podemos hacer nosotros con nuestra aplicación es extender dicha funcionalidad y agregar soporte para las clases que creamos.

Comencemos con un Editor Template. Para ello vamos a trabajar con un modelo ArticleModel, que tendrá las siguientes propiedades:

  • Id
  • Name
  • Price
  • Stock

Muchas cosas en ASP.NET MVC están bajo una convención de nombres y ubicaciones, como lo es en este caso. Las vistas Editor Template que creemos deben estar en una dirección conocida para el framework. Podemos optar por las siguientes opciones:

  • ~/Views/Controlador/EditorTemplates/NombreTemplate.cshtml
  • ~/Views/Shared/EditorTemplates/NombreTemplate.chstml

NOTA: Hay que mencionar que el nombre del archivo de Template que coloquemos deberá coincidir con el de la clase a la que aplicará.

La primera ubicación será apropiada si un Template en particular solo se usará dentro del ámbito de un solo controlador. Si se deberá usar en varios, la segunda opción sin dudas es más apropiada.

En este caso creamos una nueva vista en la ubicación ~/Views/Article/EditorTemplates/ArticleModel.cshtml

VistaArticleModel
Editor Template ArticleModel.cshtml

Cabe recordar que los Editor Template se utilizan tanto para la creación como para la edición. Por esto a la hora de escribirlos habrá que tener en cuenta que el modelo puede ser nulo.

Una vez que tenemos el Editor Template, solo debemos crear un formulario (en este ejemplo asociado a una acción Create) y agregar la siguiente línea. El framework buscará en las ubicaciones preestablecidas el Template coincidente.

UsoEditorFor
Uso del EditorFor

Es hora de ejecutar la aplicación y ver si funciona correctamente. Como primera medida al acceder a la vista vemos que la visualización es la esperada:

FormularioEditorFor
Visualización del formulario usando el Editor Template creado

Probemos hacer un POST y que los datos lleguen correctamente al controlador, solo para validar que el funcionamiento es correcto:

PostFormularioEditorFor
Datos correctos en el POST asociado

Nuevamente, vemos que el resultado es el correcto.
Ahora sigamos con un Display Template, el cual usaremos para mostrar el detalle del mismo modelo. También en este caso tendremos dos ubicaciones disponibles para guardar este tipo de Template (aplican las mismas consideraciones explicadas para los Editor Template):

  • ~/Views/Controlador/DisplayTemplates/NombreTemplate.cshtml
  • ~/Views/Shared/DisplayTemplates/NombreTemplate.chstml

En este caso creamos una nueva vista en la ubicación ~/Views/Article/DisplayTemplates/ArticleModel.cshtml

VistaArticleModelDisplayFor
Display Template ArticleModel.cshtml

En esta vista deberemos agregar toda aquella información que deseamos visualizar como detalle de una clase determinada. Para usarlo debemos agregar la siguiente línea en la vista de detalle:

UsoDisplayFor
Uso del DisplayFor

Si probamos acceder a la vista desde el navegador (pasando un modelo generado en el controlador) veremos que nuevamente el resultado es el correcto:

ResultadoDetalleDisplayFor
Resultado correcto utilizando el Display Template creado

Como podemos ver, es sencillo agregar nuevos Templates tanto de tipo Editor como Display. Tan solo debemos crear las vistas necesarias con su contenido y posteriormente realizar las invocaciones necesarias. Esto nos permite, además de un alto grado de re-utilización, definir como queremos que sea la visualización asociada a cada clase que debamos usar a lo largo de toda la aplicación. Son muchos los problemas que nos podemos evitar con esto, como inconsistencias en como la información se muestra en distintas partes, problemas resueltos que vuelven a aparecer, dificultad para aplicar cambios, entre otros.

A su vez, logramos mantener ordenadas las distintas vistas según su propósito, como se puede ver en la siguiente imagen:

OrganizacionTemplates
Organización de vistas Templates

Espero que les sea útil y lo puedan implementar en sus proyectos!

Anuncios

2 comentarios en “Razor templates: EditorFor y DisplayFor

  1. Hola diego, tienes alguna entrada con algún ejemplo de un maestro-detalle?, se puede hacer un maestro-detalle con vistas parciales?, no encuentro la forma de realizar un maestro-detalle agregando elementos a una lista tratando de optimizar código?, alguna ayuda Diego. Saludos!.

    Me gusta

  2. Hola Jorge. La verdad que no tengo nada como ejemplo, lo que te puedo comentar es simplemente uno de los ejemplos encontrados en Google: http://miguelerm.github.io/posts/2013/04/22/maestro-detalle-aspnet-mvc4/
    La recomendación es armar bien los inputs hidden que tendrán el contenido de los distintos elementos del detalle, a la vez de trabajar bien con los índices de los mismos (sobre todo cuando agregas y sacas elementos, ya que el índice siempre debe arrancar desde cero y ser consecutivo).

    Cualquier cosa me avisas, saludos!

    Me gusta

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