google analytics

lunes, 24 de noviembre de 2014

Usando el RenderSection en MVC, aprendiendo a colocar el código en su lugar

Una buena práctica al diseñar una página web para obtener un buen rendimiento en la carga de esta, es cargar los archivos .css al inicio de la página y los scripts al final de esta. Lamentablemente hoy en día sigue habiendo muchas páginas que al renderizarse terminan mostrando los estilos o scripts en muchas partes de la página generando un pobre rendimiento o muchas veces rompiendo código. Normalmente esto sucede al usar vistas parciales que contienen sus propios scripts y al renderizarse en la página que las contiene, estos scripts son renderizados en la posición de su vista parcial.


Está claro que hay casos en el que es necesario cargar ciertos scripts al inicio de la página cuando queremos tener cierta funcionalidad. Un ejemplo claro sería cuando quieres implementar AMD usando Require.js y en este caso es necesario declarar Jquery al inicio de la página para que funcione.

Veamos un ejemplo:

Master Page:
Partial Page:
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Index


En este código mostramos una página maestra y una pagina parcial. En la página maestra en la línea 12 se referencia al bundle que contiene la librería de jquery, y en la página parcial en la línea 9 se utiliza jquery para lanzar un alert cuando la página este lista. Si ejecutamos debería "en teoría" mostrarse el alert de hola cuando se halla cargado la página, pero sucede esto:


Y se le damos a continue vemos el código total de la página renderizada


Si nos fijamos en la imagen, el código de la vista parcial es añadido antes del final del código de la página maestra y como en la página parcial se hace uso de jquery, cosa que recién se declara al final de la página maestra, es por eso que obtenemos este error.

Felizmente ASP .NET MVC nos permite poder ordenar nuestros scripts de nuestra páginas de una manera ordenada. Si vemos nuevamente el código de la página maestra, en la línea 13 encontramos esta línea:

  @RenderSection("scripts", required: false)

Esta linea de código hacemos uso de la función RenderSection. Esta función nos permite mapear nuestros scripts de nuestra páginas parciales en este parte de la página maestra. Esta función tiene dos sobrecargas en las cuales tiene los siguientes parámetros:

- name: Este será el nombre de la sección con el cual vamos a identificar esta parte de la página que contendrá los scripts que le pasemos.
- required: Es un booleano que sirve para indicar si la sección es requerida o no.

De vuelta al problema inicial, necesitamos que el código js de nuestra vista parcial se pinte al final de todo de la página principal. Para eso hacemos lo siguiente:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Index

@section scripts{ }

Como podemos ver en el código en la linea 7, se ha añadido @section scripts donde scripts es el nombre de la sección que antes había declarado en la página principal. Luego he abierto y cerrado llaves y dentro de esas llaves puse el código js de la página parcial. El resultado es el siguiente:


Y el html renderizado sería el siguiente:

De esta manera MVC coge todos los section que tengan scripts al costado y este los pinta en la página principal donde halla declarado @RenderSection con el nombre scripts. Está claro que la página principal u otra página pueda tener varios @RenderSection y @section con diferentes nombres y en la ubicación que quieran. Espero les sea útil. Hasta la próxima :D

13 comentarios:

  1. Estupenda explicación, gracias!!

    ResponderEliminar
  2. Los @section no funcionan en vistas parciales

    ResponderEliminar
  3. Muy buena explicación amigo, mas claro ni el agua. Gracias.

    ResponderEliminar
  4. Excelente explicaciòn simple y precisa!!! Mucha gracias

    ResponderEliminar
  5. Me ayudaste a recordar, justo lo que necesitaba. saludos

    ResponderEliminar
  6. Que pasa cuando los archivos de rescripto de la vista parcial los tienes en archivos independientes?

    ResponderEliminar
  7. Agradecido por la explicación, los ejemplos con impagenes fueron de mucha ayuda para mi.

    Saludos!!!

    ResponderEliminar
  8. 2021 y sigue siendo de utilidad! tremen2

    ResponderEliminar
  9. 2021 y sigue siendo de utilidad! tremen2

    ResponderEliminar
  10. 2021 y sigue siendo de utilidad! tremen2

    ResponderEliminar
  11. Muchas Gracias, excelente.

    ResponderEliminar