Tutorial: Crear un sitio web con sintaxis de Razor en Visual Studio

ASP.NET Web Pages con sintaxis de Razor proporciona una sintaxis de programacin simple para escribir cdigo en pginas web donde el cdigo basado en servidor se incrusta en el formato HTML de las pginas web. El cdigo de Razor se ejecuta en el servidor antes de que la pgina se enve al explorador. Este cdigo de servidor puede crear dinmicamente contenido de cliente, es decir, puede generar formato HTML u otro contenido sobre la marcha y, a continuacin, enviarlo al explorador junto con cualquier cdigo HTML esttico que contenga la pgina. Web Pages con sintaxis de Razor proporciona una alternativa a formularios Web Forms de ASP.NET. Las pginas de formularios Web Forms se centran en controles de servidor web que generan cdigo HTML automticamente y emulan el modelo de programacin basado en eventos usado para aplicaciones cliente. En cambio, las pginas de Razor funcionan ms directamente como pginas HTML estndar, donde el propio usuario puede crear virtualmente todo el formato HTML y, a continuacin, agregar la funcionalidad alrededor de ese formato usando el cdigo del servidor. En general, las pginas de Razor son ms ligeras que las pginas de los formularios Web Forms. Por esa razn y porque la sintaxis es simple, Razor puede ser ms fcil de aprender para los programadores y ms rpido para desarrollar pginas web dinmicas. Las pginas web que incluyen contenido de Razor tienen una extensin de archivo especial (.cshtml o .vbhtml). El servidor reconoce estas extensiones, ejecuta el cdigo que est marcado con sintaxis de Razor y, a continuacin, enva la pgina resultante al explorador. Razor se introdujo inicialmente con Microsoft WebMatrix. Este tutorial muestra cmo utilizar Razor para ASP.NET cuando se usa Visual Studio.

Instalar las herramientas de Razor para ASP.NET

En esta seccin se explica cmo instalar las herramientas de Visual Studio que admiten Razor para ASP.NET. Si instal Visual Studio 2010 SP1 usando el Instalador de plataforma web de Microsoft, puede omitir esta seccin porque ya tiene las herramientas necesarias. Si instal Visual Studio 2010 SP1 descargndolo de MSDN, debe seguir este procedimiento.

Para instalar las herramientas de Razor para ASP.NET para Visual Studio
1. 2. Si an no tiene el Instalador de plataforma web, descrguelo mediante el siguiente vnculo: Instalador de plataforma web de Microsoft. Ejecute el Instalador de plataforma web.

3. 4.

Busque ASP.NET MVC 3 y haga clic en Agregar. ASP.NET MVC 3 incluye herramientas de Visual Studio para crear sitios web de Razor para ASP.NET. Haga clic en Instalar para completar la instalacin.

Crear un sitio web de Razor para ASP.NET

Despus de instalar Visual Studio 2010 SP1 y las herramientas de Razor para ASP.NET, puede crear un proyecto de sitio web de Razor para ASP.NET o un proyecto de aplicacin web. En este tutorial, crear un proyecto de sitio web.

Para crear un sitio web mediante Razor para ASP.NET

1. 2. Inicie Visual Studio. En el men Archivo, haga clic en Nuevo sitio Web.

3. 4. 5. 6. 7.

En el cuadro de dilogo Nuevo sitio web, seleccione el lenguaje que desea utilizar (Visual C# o Visual Basic). Seleccione .NET Framework 4. Seleccione la plantilla Sitio web ASP.NET (Razor). En la lista desplegable Ubicacin web, seleccione Sistema de archivos y, a continuacin, vaya a la carpeta local donde desea colocar los archivos del sitio web. Haga clic en Aceptar.

Examinar la sintaxis de Razor para ASP.NET

En esta seccin, agregar algunas instrucciones de cdigo a la pgina predeterminada del nuevo sitio web para ver a Razor para ASP.NET en accin.

Para examinar la sintaxis de Razor para ASP.NET

1. 2. Abra la pgina Default.cshtml o Default.vbhtml. En la parte superior de la pgina, despus de la lnea que empieza con agregue la siguiente lnea de cdigo: C# var weekDay = DateTime.Now.DayOfWeek; El cdigo declara una variable y la establece en el da actual de la semana. 3. Agregue la siguiente lnea de cdigo despus de la etiqueta </p> de cierre de la pgina. C# <p>Today is: @weekDay</p> Esta lnea muestra el da actual de la semana. El carcter @ inicia expresiones alineadas de Razor, bloques de instrucciones nicos y bloques de varias instrucciones. Separa el formato HTML del cdigo ejecutable. 4. Agregue el siguiente bloque de cdigo. C# @for(var i = 10; i < 16; i++) { <p style="font-size: @(i + "pt")">My font size is now: @i</p> }

Page.Title,

5.

Agregue el siguiente bloque de cdigo, que usa un bucle foreach para mostrar el nombre de cada elemento de la coleccin Request.ServerVariables, que contiene informacin sobre el servidor web. C# <ul> @foreach (var myItem in Request.ServerVariables) { <li>@myItem</li> } </ul>

6.

Presione CTRL+F5 para ejecutar la pgina. La siguiente ilustracin muestra en qu se parece la pgina al explorador.