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

Windows Azure - Instalación y primeros pasos

Hola, hoy vamos a hablar de un tema que tenía pendiente y seguro muchos de ustedes ya habrán escuchado pero nunca se hallan puesto a trastear con esto, hablo de Windows Azure. Como sabrán Windows Azure es la plataforma en la nube que nos proporciona Microsoft para crear y consumir servicios en la nube y tener nuestro negocio en la nube de una manera fácil y escalable. Click aquí para más información.

Pero bueno iremos a lo que nos interesa, ¿cómo empezar con esto? ¿cuánto me costará? ¿por que es necesario registrar mi tarjeta de crédito?, muchas preguntas que me hice antes de empezar, felizmente Microsoft nos regala 150$ para probar Windows Azure, los pasos son los siguientes:

- Nos creamos una cuenta de prueba http://azure.microsoft.com/es-es/

Regresando a una de las preguntas que hacia, ¿por qué Microsoft quiere mi tarjeta de crédito?. Pff yo también tengo cierto recelo en esto pero por lo que leí es una forma de Microsoft de asegurarse e identificarte ya que te abre acceso a sus centro de datos y no cometas diabluras (cosa que a lo mejor puede ser cierta o no), a ver si los entendidos en estos comentan por acá :)

Pero bueno seguimos con el tema, nos inscribimos dejamos nuestra tarjeta de crédito.

Y al final después de haber hecho todo correctamente debemos tener la siguiente ventana:

Ya que tenemos el panel de windows azure  vamos a la parte de maquinas virtuales.

Le damos a crear una maquina virtual y tenemos dos opciones

Creación rápida: Esta opción nos permite crear una maquina virtual sin SO, es decir una VM de 0 donde podemos indicar el SO que queremos instalar.

De la galería: Esta opción nos permite escoger una VM ya preconfiguradas como vemos en la imagen, para este post crearemos una VM desde la galería:

Para este ejemplo seleccionaremos una VM con Windows Server 2012 R2 Datacenter y le damos siguiente mostrándose la siguiente ventana:

Esta ventana nos sirve para configurar los datos de esta VM además en la parte de arriba sale un dropdrownlist que nos permite seleccionar la fecha de lanzamiento de la versión de la imagen disponible. Aunque es recomendable utilizar siempre la ultima versión, esto puede ser útil cuando no hemos hecho pruebas de nuestra aplicación en determinadas versiones y no estamos seguros de que pueda funcionar correctamente

Luego damos siguiente y tenemos la siguiente ventana:

Esta ventana nos indica que se va a crear un servicio en la nube. Este servicio en la nube nos permitirá administrar nuestra maquina virtual en la nube.  Luego toca ponerle el nombre a la dos, a través de este nombre junto a .cloudapp.net vamos a poder acceder a nuestra máquina virtual

Luego escogemos la reunión, este tema es muy importante ya que debemos escoger una región que esté cerca a donde tu o tu aplicación se va a usar con mucha más frecuencia, de esta manera evitamos que nuestro servidor se demore mucho en devolver información dando saltos hasta que llegue a donde estemos. La cuenta de almacenamiento es el disco duro y por lo pronto lo dejaremos así. Le damos siguiente

Y por último click al visto bueno de la parte de abajo en la derecha y ya está, nuestra VM se está creando

Esto puede tardar varios minutos ya que se esta inicializando nuestra máquina virtual con el SO y todos sus servicios. Una vez finalizada se muestra la siguiente ventana:

Y si se fijan en la parte de abajo ya podemos conectarnos a ella y si damos doble click en el nombre de la máquina en el listado de maquinas virtuales vemos la siguiente ventana

Acá tenemos varias opciones para administrar nuestra VM, cosa que veremos en el siguiente post para no alargar más este. Espero les sirva para iniciar en el mundo de Windows Azure. Hasta el siguiente post :)