Programación de ASP.NET Web Pages (Razor) con Visual Studio

Artículo
03/18/2024

En este artículo se explica cómo puede usar Visual Studio o Visual Web Developer Express para programar sitios web de ASP.NET Web Pages (Razor).

Temas que se abordarán

Lo que debe instalar (si es que debe instalar algo) para trabajar con ASP.NET Web Pages en su versión de Visual Studio.

Cómo agregar compatibilidad con ASP.NET Web Pages a Visual Web Developer 2010 Express.

Cómo usar características de Visual Studio para trabajar con las páginas de ASP.NET Razor, incluidos IntelliSense y el depurador.

Versiones de software utilizadas en el tutorial

ASP.NET Web Pages (Razor) 3

Visual Studio 2013

WebMatrix 3

Este tutorial también funciona con ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 y WebMatrix 2.

Puede programar ASP.NET Web Pages con sintaxis de Razor mediante WebMatrix o muchos otros editores de código. También puede usar Microsoft Visual Studio, que es un entorno de desarrollo integrado (IDE) completo que proporciona un conjunto eficaz de herramientas para crear numerosos tipos de aplicaciones (no solo sitios web). Para trabajar con páginas de ASP.NET Razor, puede utilizar Visual Studio 2017.

Dos características especialmente útiles que proporciona Visual Studio para programar con páginas web de ASP.NET Razor son:

IntelliSense. La característica IntelliSense integrada en Visual Studio es más completa que IntelliSense en WebMatrix.
Depurador. El depurador le permite solucionar problemas del código al detener un programa mientras se ejecuta, examinar variables y recorrer el código línea a línea.

Uso de Visual Studio con diferentes versiones de ASP.NET Web Pages

Para desarrollar aplicaciones web de ASP.NET en Visual Studio 2017, instale la carga de trabajo ASP.NET y desarrollo web.

Visual Studio 2012 y Visual Studio 2013 incluyen compatibilidad con ASP.NET Web Pages. (Los paquetes necesarios para compatibilidad de ASP.NET Web Pages se instalan al instalar Visual Studio.)

Visual Studio 2010 no incluye compatibilidad de forma predeterminada para ASP.NET Web Pages. Para usar ASP.NET Web Pages con Visual Studio 2010, debe instalar el paquete ASP.NET MVC. Para obtener ASP.NET Web Pages 2, instale ASP.NET MVC 4.

En la tabla siguiente se resume la compatibilidad con ASP.NET Web Pages en las distintas versiones de Visual Studio.

	Visual Studio 2010	Visual Studio 2012	Visual Studio 2013
ASP.NET Web Pages 2	Instalar ASP.NET MVC 4	(Incluido)	(Incluido)
ASP.NET Web Pages 3		Actualizar a ASP.NET Web Pages 3 con NuGet	(Incluido)

Para trabajar con Visual Studio 2010, consulte Instalación de compatibilidad con ASP.NET Web Pages en Visual Studio 2010.

Inicio de Visual Studio desde WebMatrix

Si ha iniciado un proyecto en WebMatrix y desea cambiar a Visual Studio, WebMatrix proporciona un botón para abrir fácilmente el proyecto en Visual Studio. Debe tener Visual Studio instalado en el equipo para que este botón esté habilitado. En la siguiente imagen se muestra el botón en WebMatrix.

launch Visual Studio

Al hacer clic en el botón, el proyecto se abre en Visual Studio. Puede pasar de WebMatrix a Visual Studio y viceversa sin problemas. Recibirá una notificación si los archivos han cambiado en el otro entorno y debe volver a cargarlos para tener los cambios más recientes.

Creación de un sitio de ASP.NET Razor en Visual Studio

Para crear un sitio web de ASP.NET Razor en Visual Studio:

Abierto Visual Studio.
En el menú Archivo, elija Nuevo sitio web.
En el cuadro de diálogo Nuevo sitio web, seleccione el lenguaje que va a usar (Visual C# o Visual Basic).
Seleccione la plantilla Sitio web ASP.NET (Razor).
Haga clic en OK.

El nuevo proyecto aparece y se rellena con algunas páginas web predeterminadas que le ayudan a comenzar.

Usar IntelliSense

Ahora que ha creado un sitio, puede ver cómo funciona IntelliSense en Visual Studio.

En el sitio web que acaba de crear, abra la página Default.cshtml.
Después de las etiquetas <h3> de la página, escriba @ServerInfo. (incluido el punto). Observe cómo muestra IntelliSense los métodos disponibles para el asistente ServerInfo en una lista desplegable.
Seleccione el método GetHtml en la lista y presione Entrar. IntelliSense rellena automáticamente el método. (Al igual que con cualquier método en C#, debe agregar los caracteres () después del método.) El código completo del método GetHtml tiene el aspecto del ejemplo siguiente:
```
@ServerInfo.GetHtml()
```
Presione Ctrl+F5 para ejecutar la página. Este es el aspecto de la página cuando se muestra en un explorador:
Cierre el explorador.

Uso del depurador

En la parte superior de la página Default.cshtml, después de la línea que comienza por Page.Title, agregue la siguiente línea de código:
```
var myTime = DateTime.Now.TimeOfDay;
```
En el margen gris del editor a la izquierda del código, haga clic junto a esta nueva línea para agregar un punto de interrupción. Un punto de interrupción es un marcador que indica al depurador que deje de ejecutar el programa en ese momento para que pueda ver lo que sucede.
Quite la llamada al método ServerInfo.GetHtml y agregue una llamada a la variable @myTime en su lugar. Esta llamada muestra el valor de la hora actual devuelto por la nueva línea de código.
Presione F5 para ejecutar la página en el depurador. La página se detiene en el punto de interrupción establecido. En la imagen siguiente se muestra el aspecto de la página en el editor con el punto de interrupción (en amarillo).
En la barra de herramientas Depurar, haga clic en el botón Depurar paso a paso por instrucciones (o presione F11) para ejecutar la siguiente línea de código. Cada vez que haga clic en este botón, avanzará la ejecución a la siguiente línea de código.
Examine el valor de la variable myTime manteniendo el puntero del mouse sobre ella o inspeccionando los valores mostrados en las ventanas Variables locales y Pila de llamadas. Visual Studio muestra el valor de la variable.
Cuando haya terminado de examinar la variable y de recorrer el código, presione F5 para continuar ejecutando la página sin detenerse en cada línea. Cuando haya terminado de recorrer todo el código, el explorador muestra la página.

Para más información sobre el depurador y sobre cómo depurar código en Visual Studio, consulte Tutorial: Depuración de páginas web en Visual Web Developer.

Uso de Razor en proyectos de ASP.NET MVC con Visual Studio

La sintaxis de Razor también se usa ampliamente en proyectos de ASP.NET MVC. MVC es una forma eficaz basada en patrones para crear sitios web dinámicos. Si el sitio de ASP.NET Web Pages resulta difícil de mantener, es posible que desee tener en cuenta la posibilidad de convertirlo en una aplicación ASP.NET MVC. Para ver un ejemplo de creación de una aplicación de MVC, consulte Introducción a ASP.NET MVC 5.

Instalación de compatibilidad con ASP.NET Web Pages en Visual Studio 2010

En esta sección se muestra cómo instalar Visual Web Developer Express 2010 y las herramientas de ASP.NET Web Pages para Visual Studio.

Si aún no tiene el Instalador de plataforma web, descárguelo desde la siguiente dirección URL:

https://www.microsoft.com/web/downloads/platform.aspx
Ejecute el Instalador de plataforma web.
Haga clic en la pestaña Productos.
Busque ASP.NET MVC 4 (para ASP.NET Web Pages 2) y haga clic en Agregar. Estos productos incluyen herramientas de Visual Studio para crear sitios web de ASP.NET Razor.
Haga clic en Install (Instalar) para completar la instalación.