Introducción a ASP.NET

por Tom FitzMacken

Para el nuevo desarrollo de aplicaciones web, se recomienda Blazor.

Nota:

WebMatrix ya no se recomienda como entorno de desarrollo integrado para páginas web ASP.NET. Utilice Visual Studio o Visual Studio Code.

Esta guía y aplicación proporcionan información general sobre ASP.NET Web Pages (versión 2 o posterior) y la sintaxis de Razor, un marco de trabajo ligero para crear sitios web dinámicos. También presenta WebMatrix, una herramienta para crear páginas y sitios.

Nivel: nuevo en ASP.NET Web Pages.
Aptitudes asumidas: HTML, hojas de estilo CSS básicas.

Aprenderá lo siguiente en el primer tutorial del conjunto:

• Qué es ASP.NET Web Pages y para qué sirve.
• Qué es WebMatrix.
• Cómo instalar todo.
• Cómo crear un sitio web mediante WebMatrix.

Características y tecnologías descritas:

• Instalador de plataforma web de Microsoft.
• WebMatrix.
• Páginas .cshtml

Mike Pope escribió originalmente este tutorial. Tom FitzMacken lo actualizó para Microsoft WebMatrix 3.

Versiones de software usadas en el tutorial

• ASP.NET Web Pages (Razor) 2
• WebMatrix 3

¿Qué debe saber?

Se supone que está familiarizado con:

• HTML. No se requiere ninguna experiencia en profundidad. No se explicará HTML, pero tampoco se usará nada complejo. Proporcionaremos vínculos a tutoriales HTML donde pensemos que pueden resultar útiles.
• Hojas de estilo CSS. Igual que con HTML.
• Ideas básicas de base de datos. Si ha usado una hoja de cálculo para los datos y ha ordenado y filtrado los datos, ese es el nivel de experiencia que se da por supuesto generalmente para este conjunto de tutoriales.

También suponemos que está interesado en aprender programación básica. ASP.NET Web Pages usa un lenguaje de programación llamado C#. No es necesario tener conocimientos de programación, solo interés. Si alguna vez ha escrito JavaScript en una página web, ya tiene sobrada experiencia.

Tenga en cuenta que si ya está familiarizado con la programación, es posible que al principio este conjunto de tutoriales avance lentamente mientras ponemos al día a los nuevos programadores. Sin embargo, a medida que superemos los primeros tutoriales, habrá menos programación básica que explicar y las cosas avanzarán a un ritmo más rápido.

¿Qué necesita?

Esto es lo que necesita:

• Un equipo que ejecute Windows 8, Windows 7, Windows Server 2008 o Windows Server 2012.
• Una conexión a Internet activa.
• Privilegios de administrador (necesarios para el proceso de instalación).

¿Qué es ASP.NET Web Pages?

ASP.NET Web Pages es un marco que puede usar para crear páginas web dinámicas. Una página web HTML simple es estática; su contenido viene determinado por el marcado HTML fijo que se encuentra en la página. Las páginas dinámicas como las que se crean con ASP.NET Web Pages le permiten crear el contenido de la página sobre la marcha mediante código.

Las páginas dinámicas permiten hacer todo tipo de cosas. Puede pedir a un usuario una entrada mediante un formulario y, a continuación, cambiar lo que aparece en la página o cómo se ve. Puede tomar información de un usuario, guardarla en una base de datos y, a continuación, mostrarla más adelante. Puede enviar correo electrónico desde su sitio. Puede interactuar con otros servicios en la web (por ejemplo, un servicio de asignación) y generar páginas que integren información de esos orígenes.

¿Qué es WebMatrix?

WebMatrix es una herramienta que integra un editor de páginas web, una utilidad de base de datos, un servidor web para probar páginas y características para publicar su sitio web en Internet. WebMatrix es gratuito y es fácil de instalar y de usar. (También funciona para páginas HTML sin formato, así como para otras tecnologías como PHP).

En realidad, no tiene que usar WebMatrix para trabajar con ASP.NET Web Pages. Puede crear páginas mediante un editor de texto, por ejemplo, y probar páginas mediante un servidor web al que tenga acceso. Sin embargo, WebMatrix hace que todo sea muy fácil, por lo que estos tutoriales lo usarán en todo momento.

Acerca de estos tutoriales

Este conjunto de tutoriales es una introducción al uso de ASP.NET Web Pages. Hay un total de 9 tutoriales en este conjunto de tutoriales introductorios. Forma parte de una serie de conjuntos de tutoriales que le llevan del nivel básico de ASP.NET Web Pages a la creación de sitios web reales y profesionales.

Este primer tutorial se centra en mostrar los conceptos básicos de cómo trabajar con ASP.NET Web Pages. Cuando haya terminado, puede trabajar con conjuntos de tutoriales adicionales que sigan dónde termina este y que exploren Web Pages con más profundidad.

No nos extenderemos demasiado en las explicaciones en profundidad. Y siempre que mostremos algo en este conjunto de tutoriales elegiremos la forma que creemos más fácil de entender. Los conjuntos de tutoriales posteriores profundizan y muestran enfoques más eficaces o más flexibles (también más divertidos). Sin embargo, esos tutoriales requieren que comprenda primero los conceptos básicos.

El conjunto de tutoriales que acaba de empezar trata estas características de ASP.NET Web Pages:

• Introducción e instalación. (Eso está en el tutorial que está leyendo).
• Conceptos básicos de la programación de ASP.NET Web Pages.
• Creación de una base de datos.
• Creación y procesamiento de un formulario de entrada de usuario.
• Adición, actualización y eliminación de los datos en la base de datos.

¿Qué creará?

Este conjunto de tutoriales y los posteriores giran en torno a un sitio web en el que puede enumerar películas que le gusten. Podrá especificar las películas, editarlas y enumerarlas. Estas son algunas de las páginas que creará en este conjunto de tutoriales. La primera muestra la página de descripción de películas que creará:

Y esta es la página que le permite agregar nueva información de películas al sitio:

Los tutoriales posteriores se basan en este conjunto y agregan más funciones, como la carga de imágenes, el inicio de sesión, el envío de correo electrónico y la integración con las redes sociales.

Consulte esta aplicación que se ejecuta en Azure.

¿Desea ver que el sitio terminado se ejecuta como una aplicación web activa? Para implementar una versión completa de la aplicación en su cuenta de Azure, solo tiene que hacer clic en el botón siguiente.

Necesita una cuenta de Azure para implementar esta solución en Azure. Si aún no tiene una cuenta, tiene las siguientes opciones:

• Abrir una cuenta de Azure de forma gratuita: obtendrá créditos que puede usar para probar los servicios de Azure de pago e incluso después de que se usen, puede mantener la cuenta y usar servicios gratuitos de Azure.
• Activar las ventajas del suscriptor de MSDN: la suscripción de MSDN le proporciona créditos cada mes que puede usar para los servicios de Azure de pago.

Instalación de todo

Puede instalar todo mediante el Instalador de plataforma web de Microsoft. En efecto, instale el instalador y, a continuación, úselo para instalar todo lo demás.

Para usar Web Pages, debe tener al menos Windows XP con SP3 instalado, Windows Server 2008 o versiones posteriores.

En la página de Web Pages del sitio web de ASP.NET, haga clic en Instalar.

Se le pide que acepte los términos de licencia y la declaración de privacidad antes de instalar WebMatrix.

Haga clic en Ejecutar para iniciar la instalación. (Si desea guardar el instalador, haga clic en Guardar y ejecute el instalador desde la carpeta donde lo guardó).

Aparece el Instalador de plataforma web, listo para instalar WebMatrix. Haga clic en Instalar.

El proceso de instalación determina lo que tiene que instalar en el equipo e inicia el proceso. Dependiendo de lo que tenga que instalarse exactamente, el proceso puede tardar entre unos instantes y varios minutos. Seleccione Acepto para aceptar los términos de licencia.

Hola, WebMatrix

Cuando haya terminado, el proceso de instalación puede iniciar WebMatrix automáticamente. Si no es así, en Windows, en el menú Inicio, inicie Microsoft WebMatrix.

Al iniciar WebMatrix por primera vez, se le da la oportunidad de iniciar sesión en Microsoft Azure con su cuenta de Microsoft. Al iniciar sesión, recibirá 10 aplicaciones web gratuitas a través de Azure. Estas aplicaciones web gratuitas proporcionan una manera cómoda de probar las aplicaciones. Si aún no tiene una cuenta de Azure, pero tiene una suscripción a MSDN, puede activar las ventajas de la suscripción de MSDN. De lo contrario, puede crear una cuenta de evaluación gratuita en tan solo un par de minutos. Para obtener más información, consulte Evaluación gratuita de Azure.

No tiene que iniciar sesión ahora mismo para continuar con este tutorial. Si no inicia sesión ahora, seguirá teniendo la opción de iniciar sesión más adelante. En el último tema de esta serie de tutoriales se explica cómo implementar el sitio web en Azure; por lo tanto, tendrá que iniciar sesión para completar ese tema.

En este momento, inicie sesión con su cuenta Microsoft o seleccione Ahora no en la esquina inferior derecha.

Para empezar, creará un sitio web en blanco y agregará una página. En un tutorial posterior de este conjunto, jugará con una de las plantillas de sitio web integradas.

En la ventana de inicio, haga clic en Nuevo.

Las plantillas son archivos y páginas creados previamente para diferentes tipos de sitios web. Para ver todas las plantillas disponibles de forma predeterminada, seleccione la opción Galería de plantillas.

En la ventana Inicio rápido, seleccione Sitio vacío en el grupo ASP.NET y asigne al nuevo sitio el nombre "WebPagesMovies".

Haga clic en Next.

Si ha iniciado sesión en su cuenta Microsoft, se le dará la oportunidad de crear el sitio en Azure. Según el nombre del sitio, se sugiere el nombre predeterminado WebPagesMovies.azurewebsites.net; sin embargo, el signo de exclamación indica que este nombre no está disponible en Windows Azure. Para simplificar, seleccione Omitir para omitir la creación del sitio web en Azure en este momento. Más adelante en esta serie, publicaremos el sitio en Azure.

WebMatrix crea y abre el sitio:

En la parte superior, hay una barra de herramientas de acceso rápido y una cinta de opciones. En la parte inferior izquierda, verá el selector del área de trabajo donde puede cambiar entre tareas (Sitio, Archivos, Bases de datos, Informes). A la derecha se encuentra el panel de contenido del editor y de los informes. Y en la parte inferior verá ocasionalmente una barra de notificaciones para los mensajes.

Obtendrá más información sobre WebMatrix y sus características a medida que siga estos tutoriales.

Creación de una página web

Para familiarizarse con WebMatrix y ASP.NET Web Pages, creará una página sencilla.

En el selector del área de trabajo, seleccione el área de trabajo Archivos. Este área de trabajo le permite trabajar con archivos y carpetas. En el panel izquierdo se muestra la estructura de archivos del sitio. La cinta de opciones cambia para mostrar las tareas relacionadas con archivos.

En la cinta de opciones, haga clic en la flecha debajo de Nuevo y, a continuación, haga clic en Nuevo archivo.

WebMatrix muestra una lista de tipos de archivo. Seleccione CSHTML y, en el cuadro Nombre, escriba "HelloWorld". Una página CSHTML es una página de ASP.NET Web Pages.

Haga clic en OK.

WebMatrix crea la página y la abre en el editor.

Como puede ver, la página contiene principalmente marcado HTML normal, excepto un bloque en la parte superior que tiene este aspecto:

@{ 

}

Esto es para agregar código, como verá en breve.

Observe que las distintas partes de la página (los nombres de elemento, los atributos y el texto, además del bloque de la parte superior) están en colores diferentes. Esto se denomina resaltado de sintaxis y facilita la visualización. Es una de las características que facilita el trabajo con páginas web en WebMatrix.

Agregue contenido para los elementos <head> y <body> como en el ejemplo siguiente. (Si lo desea, puede copiar el siguiente bloque y reemplazar toda la página existente por este código).

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

En la barra de herramientas de acceso rápido o en el menú Archivo, haga clic en Guardar.

Probar la página

En el área de trabajo Archivos, haga clic con el botón derecho en la página HelloWorld.cshtml y, a continuación, haga clic en Iniciar en el explorador.

WebMatrix inicia un servidor web integrado (IIS Express) que puede usar para probar páginas en el equipo. (Sin IIS Express en WebMatrix, tendría que publicar la página en un servidor web en algún lugar antes de poder probarla). La página se muestra en el explorador predeterminado.

Tenga en cuenta que cuando se prueba una página en WebMatrix, la dirección URL del explorador se parece a http://localhost:33651/HelloWorld.cshtml.. El nombre localhost hace referencia a un servidor local, lo que significa que un servidor web que está en su propio equipo sirve la página. Como se indicó, WebMatrix incluye un programa de servidor web denominado IIS Express que se ejecuta al iniciar una página.

El número después de localhost (por ejemplo, localhost:33651) hace referencia a un número de puerto en el equipo. Este es el número del "canal" que IIS Express usa para este sitio web en particular. El número de puerto se selecciona de forma aleatoria entre el intervalo de 1024 a 65 536 al crear el sitio y es diferente para cada sitio que cree. (Cuando pruebe su propio sitio, el número de puerto será casi seguramente un número diferente al 33561). Mediante el uso de un puerto diferente para cada sitio web, IIS Express puede saber con facilidad con cuál de sus sitios está hablando.

Más adelante, al publicar el sitio en un servidor web público, ya no aparecerá localhost en la dirección URL. En ese momento, verá una dirección URL más típica, como http://myhostingsite/mywebsite/HelloWorld.cshtml en función de cuál sea la página. Aprenderá a publicar un sitio más adelante en esta serie de tutoriales.

Agregar código en el lado servidor

Cierre el explorador y vuelva a la página en WebMatrix.

Agregue una línea al bloque de código para que tenga un aspecto similar al código siguiente:

@{
   var currentDateTime = DateTime.Now;
}

Este es un poco de código de Razor. Probablemente esté claro que obtiene la fecha y hora actuales y coloca ese valor en una variable denominada currentDateTime. Obtendrá más información sobre la sintaxis de Razor en el siguiente tutorial.

En el cuerpo de la página, después del elemento <p>Hello World!</p>, agregue lo siguiente:

<p>Right now it's @currentDateTime</p>

Este código obtiene el valor que se coloca en la variable currentDateTime en la parte superior y lo inserta en el marcado de la página. El carácter @ marca el código de ASP.NET Web Pages en la página.

Vuelva a ejecutar la página (WebMatrix guarda los cambios antes de ejecutar la página). Esta vez verá la fecha y hora en la página.

Espere unos instantes y actualice la página en el explorador. La presentación de fecha y hora se actualiza.

En el explorador, examine el origen de la página. Tiene un aspecto similar al marcado siguiente:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Observe que el bloque @{ } de la parte superior no está ahí. Observe también que la presentación de fecha y hora muestra una cadena real de caracteres (1/18/2012 2:49:50 PM u otra similar), no @currentDateTime como tenía en la página .cshtml. Lo que ha sucedido es que cuando ejecutó la página, ASP.NET procesó todo el código (muy poco en este caso) que estaba marcado con @. El código generó la salida y esa salida se insertó en la página.

Este es el uso de ASP.NET Web Pages

Cuando lea que ASP.NET Web Pages genera contenido web dinámico, lo que ha visto aquí es la idea. La página que acaba de crear contiene el mismo marcado HTML que ha visto antes. También puede contener código que puede realizar todo tipo de tareas. En este ejemplo, hizo la tarea trivial de obtener la fecha y hora actuales. Como ha visto, puede intercalar código con el HTML para generar la salida de la página. Cuando alguien solicita una página .cshtml en el explorador, ASP.NET procesa la página mientras sigue en manos del servidor web. ASP.NET inserta la salida del código (si existe) en la página como HTML. Cuando se realiza el procesamiento de código, ASP.NET envía la página resultante al explorador. Todo lo que obtiene el explorador es siempre HTML. Este es un diagrama:

La idea es sencilla, pero hay muchas tareas interesantes que el código puede realizar y hay muchas maneras interesantes en las que puede agregar contenido HTML dinámicamente a la página. Además, las páginas .cshtml ASP.NET, como cualquier página HTML, también puede incluir código que se ejecuta en el propio explorador (código JavaScript y jQuery). Explorará todas estas cosas en este conjunto de tutoriales y en otros posteriores.

Próximamente

En el siguiente tutorial de esta serie, explorará la programación de ASP.NET Web Pages un poco más detalladamente.

Recursos adicionales

Cree un sitio web de ASP.NET desde cero. Este es un tutorial que trata específicamente sobre el uso de WebMatrix (no de ASP.NET Web Pages). Incluye un poco más de detalle sobre algunas de las características adicionales de WebMatrix que no trataremos en este conjunto de tutoriales.

Siguiente