Tag: Vistas

ActionLink y RedirectToAction para áreas en ASP.NET MVC

En las últimas entradas de este blog estuvimos viendo distintos puntos asociados a los helpers en ASP.NET MVC. Uno de los puntos importantes que vimos en “Helpers en ASP.NET MVC, reutilizando código en nuestras vistas” es el poder quitar código repetitivo o simplificar ciertas operaciones.

Allí recordé el comentario que había dejado @maxilovera en la entrada “Áreas en ASP.NET MVC – Una forma de organizar nuestras aplicaciones“:

Solamente hay que acordarse del parámetro de @area en los links para no volverse loco con las redirecciones. Aquí podría armarse un helper para facilitar la codificación

Este comentario venía a raíz de que para el Html Helper ActionLink como para las redirecciones (método RedirectToAction en los controladores) usando áreas, debíamos acordarnos de establecer como un atributo diferenciado el área a usar:

Area - ActionLink — Ejemplo de uso de áreas en el armado de un link

Area - RedirectToAction — Ejemplo de uso de áreas en la redirección

Esto puede ser propicio a olvidarnos de declarar ese atributo, además de que es algo repetitivo a realizar constantemente. Así que veamos cómo mejorar la situación con lo aprendido en los post’s anteriores.

Lo primero que vamos a definir es que para esta solución utilizaremos los Html Helpers, extendiendo lo ya definido en el namespace Html. Para ello crearemos el helper de la siguiente forma:

HelperAreas - HelperActionLink — Helper extendiendo ActionLink para áreas

Seguir leyendo “ActionLink y RedirectToAction para áreas en ASP.NET MVC” →

Crear Razor Helpers en ASP.NET MVC

Siguiendo lo visto en el post inicial sobre reutilización en nuestras vistas ASP.NET MVC y en el de Html Helpers en esta entrada veremos los Razor Helpers, la alternativa que nos permite realizarlo directamente desde nuestra vistas.

Lo primero que vamos a ver es la sintaxis del mismo. Al ser código Razor, el mismo deberá estar ubicado en una vista. La declaración es muy similar a una función, salvo que inicia con la palabra clave @helper, seguida del nombre del mismo y los parámetros que recibe. A la vez que su ámbito se define con corchetes. Luego el contenido es como si estuviéramos escribiendo una vista en Razor de forma normal.

Siguiendo con el ejemplo del post anterior vamos a ver cómo quedaría el helper en cuestión para renderizar una lista de elementos HTML con esta alternativa:

RazorHelpers - HelperEnVista — Sintaxis de un Helper Razor

Como se puede apreciar, es muy sencilla la escritura del mismo. Y el uso también lo es, veámoslo en la siguiente imagen:

Seguir leyendo “Crear Razor Helpers en ASP.NET MVC” →

Crear Html Helpers en ASP.NET MVC

Si hay algo que en general podemos estar conformes (y de mi parte muy conforme) con ASP.NET MVC es la capacidad de extensión que nos brinda en distintos puntos. Siguiendo con lo que iniciamos en el post “Helpers en ASP.NET MVC, reutilizando código en nuestras vistas“, hoy vamos a veres cómo crear nuestros propios Html Helpers en C# para facilitar la escritura de nuestras vistas, evitando tener que repetir código en las mismas.

Lo primero que vamos a comentar es que por defecto tenemos muchos helpers a disposición, son todos aquellos que usamos bajo el namespace Html. Algunos ejemplos de uso son los que podemos ver a continuación, sacados de una de las vistas asociadas a la autenticación en el template inicial de ASP.NET MVC:

Helpers - Ejemplos — ASP.NET MVC Helpers

Algunos de los más comunes y usados son (por nombrar solo algunos):

BeginForm()
EndForm()
Label()
ActionLink()
TextArea()
TextBox()
CheckBox()
RadioButton()
ListBox()
DropDownList()
Hidden()
Password()
Display()

Para mayores detalles pueden ver todos los disponibles y cómo usarlos en la documentación oficial.

Básicamente el objetivo de un helper es generar código HTML de forma simple y parametrizada, evitando repetir código (lo cual siempre es un objetivo fundamental), además de permitirnos que nuestras aplicaciones queden mucho más ordenadas, prolijas y mantenibles.

Ahora bien, veamos qué debemos hacer para crear nuestros propios helpers.

Seguir leyendo “Crear Html Helpers en ASP.NET MVC” →

Helpers en ASP.NET MVC, reutilizando código en nuestras vistas

Como generalmente suele suceder cuando estamos desarrollando nuestra aplicación, un objetivo primordial es la reutilización de la mayor cantidad posible de código, logrando de esta forma que nuestras aplicaciones queden ordenadas, prolijas y mucho más mantenibles. Además de simplificar el trabajo que realizamos al momento de escribir nuestro código.

Cuando hablamos de vistas, hay distintas alternativas que tenemos disponibles, entre ellas los helpers. Un helper es una herramienta de extensión de ASP.NET MVC que nos permite crear código HTML de forma personalizada y parametrizada. Sus principales objetivos son:

Reutilizar comportamientos comunes que se repiten a lo largo de las vistas.
Facilitar la escritura de nuestras vistas, permitiendo que determinadas porciones de código queden definidas en un solo lugar.

Si bien son similares los puntos planteados anteriormente, con el primero hacemos incapié en cuestiones donde hay una mayor cantidad de lógica asociada a variantes de visualización. Con el segundo, a aquellos aspectos donde siempre escribimos el mismo HTML pero con pequeñas variantes.

Ahora bien, cómo hacemos nuestros helpers? Aquí tenemos dos alternativas disponibles, complementarias entre si:

Html Helpers
Razor Helpers

Veamos una descripción mínima, luego haremos un post detallado para cada una.

Seguir leyendo “Helpers en ASP.NET MVC, reutilizando código en nuestras vistas” →

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).

Seguir leyendo “Razor templates: EditorFor y DisplayFor” →

Tipos de vistas en ASP.NET MVC

Las vistas son la única parte de nuestras aplicaciones a las cuales acceden los usuarios. En las mismas se darán todas las interacciones del usuario con la aplicación, por lo que deberá tener una experiencia agradable y fluida.

ASP.NET MVC nos ofrece tres tipos de vistas:

Master o Layout: son el tipo de vistas que nos permiten compartir una serie de características a través de distintas páginas. Generalmente en esta vista ponemos la base del diseño de la aplicación, el encabezado, los menúes, y las referencias comunes a ser usadas (como los archivos css del sitio, librerías JavaScript como jQuery o archivos JavaScript propios). En este tipo de vistas es donde están todas las etiquetas básicas que debe tener una página HTML.
Por defecto, un nuevo proyecto de ASP.NET MVC trae el archivo _Layout.cshtml. Sin embargo podemos crear todos los Layouts que necesitemos, como por ejemplo uno particular para los accesos realizados mediante dispositivos móviles.
En las páginas Layout debemos indicar donde se incluirán las vistas que lo utilicen. Esto se realiza mediante @RenderBody()

Sección donde se incluirán las vistas que usen el Layout
Vistas: son las que desarrollamos normalmente en nuestra aplicación, generalmente una por acción que tengamos en nuestros controladores. En las mismas podremos referenciar que Layout utilizar mediante el siguiente código (en caso de que no queramos utilizar ningún Layout, solo debemos asignarle null):

Asignar el Layout a utilizar en una vista
Vistas parciales: una funcionalidad muy útil y que a veces no la utilizamos mucho. Las vistas parciales son como las vistas normales, pero pueden ser incluidas en otras vistas. En el template de proyecto ASP.NET MVC de Visual Studio se puede observar un ejemplo de esto para la vista _LoginPartial.
Las vistas parciales son muy útiles para poder agrupar aquel contenido que necesitamos compartir entre varias vistas, pero que a su vez no debe formar parte del Layout. También tienen utilidad para modularizar aquellas vistas muy “pesadas”, como pueden serlo páginas con mucho contenido o formularios complejos, promoviendo la mantenibilidad a futuro de las mismas. Otro uso muy común es utilizarlas para renderizar contenido en una página de forma asíncrona a través de una llamada AJAX.
Un ejemplo (del trabajo final de mi carrera) donde realicé una página de documentación con todo el contenido modularizado en vistas parciales es el siguiente:

Ejemplo vistas parciales

Como se puede ver, la invocación de una vista parcial es muy sencilla. Y logra mantener de forma ordenada y prolija el contenido de nuestras vistas.

Un diagrama sencillo de como es la relación entre los distintos tipos de vistas es el siguiente:

DiagramaVistas — Diagrama de como se relacionan los distintos tipos de vistas

Aunque es un tema relativamente sencillo, nunca está de más recordar las funcionalidades que nos brinda cada tipo de vista, eligiendo cual es apropiado usar para cada necesidad.