Programación de ASP.NET páginas web (Razor) mediante Visual Studio

por Tom FitzMacken

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).

Qué aprenderá:

• Lo que necesita instalar (si 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 funcionalidades de Visual Studio para trabajar con páginas Razor de ASP.NET, incluyendo IntelliSense y el depurador.

Versiones de software usadas 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 páginas web 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 muchos tipos de aplicaciones (no solo sitios web). Para trabajar con páginas Razor de ASP.NET, puede usar Visual Studio 2017.

Dos características especialmente útiles que Visual Studio proporciona para programar con ASP.NET páginas web de 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 de su código deteniendo un programa mientras se ejecuta, examinando variables y avanzando línea por línea a través del código.

Uso de Visual Studio con diferentes versiones de ASP.NET páginas web

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

Visual Studio 2012 y Visual Studio 2013 incluyen compatibilidad con ASP.NET Páginas web. (Los paquetes necesarios para admitir ASP.NET Web Pages se instalan al instalar Visual Studio).

Visual Studio 2010 no incluye compatibilidad de forma predeterminada para ASP.NET Páginas web. 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 distintas versiones de Visual Studio.

Para trabajar con Visual Studio 2010, consulte Instalación de compatibilidad para páginas web de ASP.NET 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 imagen siguiente se muestra el botón en WebMatrix.

Al hacer clic en el botón, el proyecto se abre en Visual Studio. Puede cambiar entre WebMatrix y Visual Studio sin problemas. Recibirá una notificación si los archivos han cambiado en el otro entorno y deben volver a cargarse para obtener los cambios más recientes.

Creando un sitio de ASP.NET Razor en Visual Studio

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

1. Abre Visual Studio.

2. En el menú Archivo , haga clic en Nuevo sitio web.

   

3. En el cuadro de diálogo Nuevo sitio web , seleccione el lenguaje que se va a usar (Visual C# o Visual Basic).

4. Seleccione la plantilla ASP.NET sitio web (Razor).

   

5. Haz clic en Aceptar.

El nuevo proyecto existe y se rellena con algunas páginas web predeterminadas para ayudarle a empezar.

Uso de IntelliSense

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

1. En el sitio web que acaba de crear, abra la página Default.cshtml .

2. Después de las <h3> etiquetas de la página, escriba @ServerInfo. (incluido el punto). Observe cómo IntelliSense muestra los métodos disponibles para el ServerInfo asistente en una lista desplegable.

   

3. Seleccione el GetHtml método de la lista y presione Entrar. IntelliSense rellena automáticamente el método . (Al igual que con cualquier método en C#, debe agregar () caracteres después del método). El código completado del GetHtml método tiene el siguiente aspecto:

   @ServerInfo.GetHtml()
   

4. Presione Ctrl+F5 para ejecutar la página. Este es el aspecto de la página cuando se muestra en un explorador:

   

5. Cierre el explorador.

Uso del depurador

1. En la parte superior de la página Default.cshtml , después de la línea que comienza con Page.Title, agregue la siguiente línea de código:

   var myTime = DateTime.Now.TimeOfDay;
   

2. 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.

   

3. Quite la llamada al ServerInfo.GetHtml método y agregue una llamada a la @myTime variable en su lugar. Esta llamada muestra el valor de hora actual devuelto por la nueva línea de código.

4. 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).

   

5. En la barra de herramientas de depuración, haga clic en el botón Entrar (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.

   

6. Examine el valor de la myTime variable 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.

   

7. Cuando haya terminado de examinar la variable y recorrer el código, presione F5 para continuar ejecutando la página sin detenerla en cada línea. Cuando haya terminado de recorrer todo el código, el explorador muestra la página.

Para obtener 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 páginas web de ASP.NET resulta difícil de mantener, es posible que desee considerar la posibilidad de convertirlo en una aplicación ASP.NET MVC. Para obtener un ejemplo de creación de una aplicación MVC, consulte Introducción a ASP.NET MVC 5.

Instalación de compatibilidad para Páginas Web de ASP.NET 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.

1. 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

2. Ejecute el Instalador de plataforma web.

3. Haga clic en la pestaña Productos .

   

4. Busque ASP.NET MVC 4 (para ASP.NET Páginas web 2) y haga clic en Agregar. Estos productos incluyen herramientas de Visual Studio para crear ASP.NET sitios web de Razor.

   

5. Haga clic en Instalar para completar la instalación.