Repasemos.. hasta ahora hemos visto como crear una página, un archivo tipo css, y las clases correspondientes para darle estilo a nuestra página.
Ahora vamos a ir un nivel más arriba y vamos a utilizar programacion del lado del servidor. Muchos de ustedes deben estar acostumbrados a la programación del lado del cliente, como por ejemplo correr aplcaciones para teléfonos, escritorio o hasta aplicaciones javascript. La diferencia importante con programacion del lado del servidor es que mucho de su código no corre en el dispositivo del cliente. El usuario final corre una página que pide al servidor, y si esa página es una página “activa”, el servidor corre ese código para generar html y valores que enviará al navegador. El navegador renderiza este html y el usuario ve el resultado.
A medida que aprendan más podrán ver que es bueno utilizar ambas metodologías tanto código del lado del cliente como del lado del servidor.
WebMatrix presenta sintaxis RAZOR para programación de págins web. En este articulo veremos vamos a ver el uso de layouts para poner todo el html comun, tales como el HEAD y el contenido del Footer en un lugar y que se genere automáticamente para su pagina, entonces cuando usted corra una página como la de peliculas simplemente tenga el contenido principal y el resto se agregara solo por usted, siempre con control absoluto de todo.
Creando la página CSHTML que utiliza RAZOR
Hasta ahora hemos creado páginas html que utiliza las extensiones .htm o .html. Estas son páginas estáticas que cuando el navegador llama a sus direcciones el servidor simplemente las envia y el navegador muestra su contenido. Los servidores no procesan las páginas en ningún momento.
Quizás hayan escuchado el término DYNAMIC o DINÁMICO, las mismas son páginas que el servidor construye basandose en html que corre en el servidor para determinar como mostrar la página. Las mismas te permitirán almacenar las películas en una base de datos, y el servidor generará el contenido acorde al que existe en la base de datos en vez de que escribas tú los titulos como hicimos en el capitulo 2.
En WebMatrix, las páginas dinámicas tienen la extensión .CSHTML o .VBHTML . Son diferentes a HTML con código escrito en c# o visual basic. Nostros utilizaremos CHTML vamos a escribir inline code esta metodología es lo que llamamos RAZOR.
Utilizando WebMatrix, vamos a New File, CSHTML la llamaremos peliculas.cshtml:
WebMatrix creará una página que parece un html básico, reemplace el contenido por el siguiente.
<div id="peliculaslista">
<ol>
<li>
<a href="#">Piratas de Silicon Valley</a>
</li>
<li>
<a href="#">Keynote Steve Ballmer</a>
</li>
<li>
<a href="#">MSP Summit</a>
</li>
<li>
<a href="#">Biografía de Bill Gates</a>
</li>
</ol>
</div>
No es parece extraño? No hay tag HTML, ni HEAD , pero adivinen que! AUN FUNCIONA! Corranlo y veamos.
El HEADER y el FOOTER
Ahora la página se ve muy similar a lo que hicimos anteriormente, pero definamos el header en el html antes del div contenedor de peliculas y al footer luego del div de las peliculas.
Creamos una nueva página la 'PageHeader.cshtml' y copien todo lo que está arriba del div de peliculas de la página default.html:
De manera similar creen una nueva página 'PageFooter.cshtml' y copien todo lo qu ese encuentra luego del div de la página default.html
Utilizando RAZOR para agregar dinámicamente el HEADER y FOOTER
Ahora que tenemos las cosas en su lugar, vamos a comenzar a utilizar RAZOR. WebMatrix nota la diferencia entre un HTML y RAZOR por que se utiliza el carácter '@' Encontes, incluiremos de la siguiente forma el header y footer.
@RenderPage("pagename")
Esto causará que el servidor cargue el HTML de “pagename” y lo coloque en esste lugar en la página que lo está llamando. Nuestra página peliculas quedará de la siguiente forma.
Y el resultado es el siguiente.
Creando la Layout Page.
Nosotros hemos creado la página y luego usado RAZOR code. Otra forma y quizás más eficiente de utilizarlo es creando un layout a ser usado como un template para cada pagina, y luego incluir el contendo que usted desee en ese. Veamos como funciona esto creamos una nueva página de tipo CSHTML y la llamamos _siteLayout.cshtml.
Remplacemos el contenido de la página que fué creada anteriormente por el siguiente. Si te parece familiar es por que es el mismo contenido que teniamos en default.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Peliculas Favoritas</title>
<link rel="stylesheet" type="text/css" href="PeliculasEstilo.css" />
</head>
<body>
<header>
<h1 class="Titulo">Lista de películas favoritas.</h1>
</header>
<div id="peliculaslista">
<ol>
<li><a href="#">Piratas de Silicon Valley</a> </li>
<li><a href="#">Keynote Steve Ballmer</a> </li>
<li><a href="#">MSP Summit</a> </li>
<li><a href="#">Biografía de Bill Gates</a> </li>
</ol>
</div>
<footer>
Este sitio fué construido con Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Descargalo YA!!!.</a>
</footer>
</body>
</html>
Ahora borremos el tag div llamado PELICULASLISTA y reemplacenlo por el siguiente código
@RenderBody()
Recuerden que habiamos mencionado que el carácter arroba le informaba a la webmatrix que corra ese código del lado del servidor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Peliculas Favoritas</title>
<link rel="stylesheet" type="text/css" href="PeliculasEstilo.css" />
</head>
<body>
<header>
<h1 class="Titulo">Lista de películas favoritas.</h1>
</header>
@RenderBody()
<footer>
Este sitio fué construido con Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Descargalo YA!!!.</a>
</footer>
</body>
</html>
Ahora de la página peliculas.csthml borren la linea de código que incluia el header y el footer , dejen simplemente el div y su contenido como cuando la habiamos creado.
Ahora debemos indicarle a webmatrix que el contenido de _sitelayout.cshtml es el que se encuentra en peliculas.cshtml.
Si creamos una página llamada _PageStart.cshtml, esta página será llamada cuando WebMatrix corra un CSTHML (o VBHTML).
Un buen uso para esto es colocar variables globales o funciones. Aquí simplemente le indicaremos que el layout de todo el sitio será dado por _siteLayout.cshtml.
Asi que sigamos y creemos la página _PageStart.cshtml.
Reemplacen el código por el siguiente.
@{
Layout = "~/_SiteLayout.cshtml";
}
Corran el sitio y miren a Peliculas.cshtml en el navegador.
Qué es lo que acabó de pasar?
1. El navegador pidió al servidor la página Peliculas.cshtml
2. El servidor vió que existía la _PageStart.cshtml asi que la corrió, esta solo tenia una linea de código que indicaba a la página layout del sitio a _SiteLayout.cshtml
3. El servidor luego creó _SiteLayout.cshtml para armar la página. Esto le brindó el head, css, body y todo lo necesario para correr un html.
4. El servidor llego ala linea de @RenderBody(), en el cual inyectó el contenido de Peliculas.cshtml
5. El servidor ahí tomó el resto de la página de _SiteLayout.cshtml, terminando lo stags body, html
6. Se entregó la página completa.
Agregamos otra página
Los beneficios de esta metodología son claros, lo demostremos creando una nueva página llamada about.cshtml.
Reemplacen el contenido con el siguiente.
<h1>Sobre MI</h1>
<h2>Gracias por visitar puerta de enlace.</h2>
Ahora miren en el navegador About.cshtml. Continuará…
Subscribe