Crear el proyecto

por Erik Reitan

En esta serie de tutoriales se le enseñarán los conceptos básicos de la creación de una aplicación ASP.NET Web Forms mediante ASP.NET 4.5 y Microsoft Visual Studio Express 2013 para Web. Como acompañamiento a esta serie de tutoriales, hay disponible un proyecto con código fuente de C# de Visual Studio 2013.

En este tutorial creará, revisará y ejecutará el proyecto predeterminado en Visual Studio, lo que le permitirá familiarizarse con las características de ASP.NET. Además, revisará el entorno de Visual Studio.

Temas que se abordarán:

• Cómo crear un nuevo proyecto de Web Forms.
• Estructura de archivos del proyecto de Web Forms.
• Cómo ejecutar el proyecto en Visual Studio.
• Las distintas características de la aplicación Web Forms predeterminada.
• Algunos aspectos básicos sobre cómo usar el entorno de Visual Studio.

Crear el proyecto

1. Abierto Visual Studio.

2. Seleccione Nuevo proyecto en el menú Archivo en Visual Studio.

   

3. Seleccione el grupo de plantillas Plantillas ->Visual C# ->Web de la izquierda.

4. Elija la plantilla Aplicación web ASP.NET en la columna central.
   Esta serie de tutoriales se utiliza .NET Framework 4.5.2.

5. Asigne al proyecto el nombre WingtipToys y elija el botón Aceptar.

   

   Nota:

   El nombre del proyecto de esta serie de tutoriales es WingtipToys. Se recomienda que utilice este nombre de proyecto sin hacerle cambios para que el código proporcionado en toda la serie de tutoriales funcione como se espera.

6. Haga clic en el botón Cambiar autenticación. Seleccione cuentas de usuario individuales y haga clic en el botón Aceptar.

7. Seleccione la plantilla de Web Forms y haga clic en el botón Aceptar.

   

El proyecto tardará un poco en crearse. Cuando esté listo, abra la página Default.aspx.

Puede cambiar entre la vista Diseño y la vista Origen seleccionando la opción en la parte inferior de la ventana central. La vistaDiseño muestra páginas web ASP.NET, páginas maestras, páginas de contenido, páginas HTML y controles de usuario utilizando una vista WYSIWYG cercana. La vista Origen muestra el marcado HTML de la página web, que puede editar.

Sugerencia

Descripción de ASP.NET Frameworks

Formularios web de ASP.NET permite crear sitios web dinámicos con un modelo familiar controlado por eventos de arrastrar y colocar. Una superficie diseño y cientos de controles y componentes le permiten crear rápidamente sitios potentes y sofisticados sitios controlados por IU con datos. Wingtip Toy Store se basa en ASP.NET Web Forms, pero muchos de los conceptos que aprenderá en esta serie de tutoriales son aplicables a todo ASP.NET.

ASP.NET ofrece cuatro marcos de desarrollo principales:

• ASP.NET Web Forms
  El marco de Web Forms está dirigido a los desarrolladores que prefieren programación declarativa y basada en control, como Microsoft Windows Forms (WinForms) y WPF/XAML/Silverlight. Ofrece un modelo de desarrollo basado en el diseñador WYSIWYG, por lo que es popular con los desarrolladores que buscan un entorno de desarrollo rápido de aplicaciones (RAD) para el desarrollo web. Si no está familiarizado con la programación web y está familiarizado con las herramientas tradicionales de desarrollo de clientes RAD de Microsoft (por ejemplo, para Visual Basic y Visual C#), puede compilar rápidamente una aplicación web sin tener experiencia en HTML y JavaScript.
• ASP.NET MVC (Más información sobre ASP.NET MVC)
  MVC de ASP.NET está dirigido a los desarrolladores interesados en patrones y principios, como el desarrollo controlado por pruebas, la separación de preocupaciones, la inversión de control (IoC) y la inserción de dependencias (DI). Este marco fomenta la separación del nivel de lógica de negocios de una aplicación web de su capa de presentación.
• ASP.NET Web Pages (Más información sobre páginas web de ASP.NET)
  ASP.NET Web Pages está dirigido a los desarrolladores que desean una historia de desarrollo web simple, al lado de las líneas de PHP. En el modelo de páginas web, se crean páginas HTML y, a continuación, se agrega código basado en servidor a la página para controlar dinámicamente cómo se representa ese marcado. Las páginas web están diseñadas específicamente para ser un marco ligero y es el punto de entrada más sencillo en ASP.NET para personas que conocen HTML, pero es posible que no tengan gran experiencia en programación, por ejemplo, estudiantes o aficionados. También es una buena manera de que los desarrolladores web que conocen PHP o marcos similares empiecen a utilizar ASP.NET.
• Aplicación de página única de ASP.NET
  La aplicación de página única (SPA) de ASP.NET le ayuda a crear aplicaciones con interacciones significativas del lado cliente mediante HTML 5, CSS 3 y JavaScript. La actualización de ASP.NET and Web Tools 2012.2 incluye una nueva plantilla para crear aplicaciones de página única mediante knockout.js y ASP.NET Web API. Además de la nueva plantilla de SPA, también están disponibles nuevas plantillas de SPA creadas por la comunidad para su descarga.

Además de los cuatro marcos de desarrollo principales, ASP.NET también ofrece tecnologías adicionales que son importantes para conocer y familiarizarse, pero no se tratan en esta serie de tutoriales:

• ASP.NET Web API: Un marco para crear servicios HTTP que lleguen a una amplia gama de clientes, incluidos navegadores y dispositivos móviles.
• ASP.NET SignalR: Una biblioteca que facilita el desarrollo de funciones web en tiempo real.

Revisión del proyecto

En Visual Studio, la ventana Explorador de soluciones le permite administrar archivos para el proyecto. Echemos un vistazo a las carpetas que se han agregado a su aplicación en el Explorador de soluciones. La plantilla de aplicación web agrega una estructura de carpetas básica:

Visual Studio crea algunas carpetas y archivos iniciales para el proyecto. Los primeros archivos con los que trabajará más adelante en este tutorial son los siguientes:

Archivo	Propósito
Default.aspx	Por lo general, la primera página se muestra cuando la aplicación se ejecuta en un explorador.
Site.Master	Página que permite crear un diseño coherente y utilizar el comportamiento estándar para las páginas de la aplicación.
Global.asax	Un archivo opcional que contiene código para responder a eventos de nivel de aplicación y de sesión generados por ASP.NET o por módulos HTTP.
Web.config	Datos de configuración de una aplicación.

Ejecución de la aplicación web predeterminada

La aplicación web predeterminada proporciona una experiencia enriquecida basada en la funcionalidad y compatibilidad integradas. Sin cambios en el proyecto de formularios web predeterminados, la aplicación está lista para ejecutarse en el explorador web local.

1. Presione la tecla F5 mientras está en Visual Studio.
   La aplicación se compilará y mostrará en el explorador web.

   

2. Una vez completada la revisión de la aplicación en ejecución, cierre la ventana del explorador.

Hay tres páginas principales en esta aplicación web predeterminada: Default.aspx (Inicio), About.aspx y Contact.aspx. Se puede acceder a cada una de estas páginas desde la barra de navegación superior. También hay dos páginas adicionales contenidas en la carpeta Cuenta, la página Register.aspx y la página Login.aspx. Estas dos páginas permiten usar las funcionalidades de pertenencia de ASP.NET para crear, almacenar y validar las credenciales de usuario.

Fondo de ASP.NET Web Forms

ASP.NET Web Forms son páginas basadas en la tecnología de Microsoft ASP.NET, en las que el código que se ejecuta en el servidor genera dinámicamente la salida de la página web al explorador o al dispositivo cliente. Una página de ASP.NET Web Forms representa automáticamente el HTML correcto compatible con el explorador para características como estilos, diseño, etc. Web Forms es compatible con cualquier lenguaje admitido por .NET Common Language Runtime, como Microsoft Visual Basic y Microsoft Visual C#. Además, Web Forms se basa en Microsoft .NET Framework, que brinda ventajas como un entorno administrado, seguridad de tipos y herencia.

Cuando se ejecuta una página de ASP.NET Web Forms, la página pasa por un ciclo de vida en el que realiza una serie de pasos de procesamiento. Estos pasos incluyen la inicialización, la creación de instancias de controles, la restauración y el mantenimiento del estado, la ejecución del código del controlador de eventos y la representación. A medida que esté más familiarizado con la eficacia de ASP.NET Web Forms, es importante que comprenda el ciclo de vida de la página ASP.NET para que pueda escribir código en la fase del ciclo de vida adecuada para lograr el efecto que desea.

Cuando un servidor web recibe una solicitud de una página, busca la página, la procesa, la envía al explorador y, a continuación, descarta toda la información de la página. Si el usuario vuelve a solicitar la misma página, el servidor repite toda la secuencia y vuelve a procesar la página desde cero. Dicho de otra manera, un servidor no tiene memoria de las páginas que ha procesado. Las páginas no tienen estado. El marco de la página ASP.NET controla automáticamente la tarea de mantener el estado de la página y sus controles, y proporciona formas explícitas de mantener el estado de información específica de la aplicación.

Sugerencia

Características de la aplicación web en la plantilla de aplicación de Web Forms

La plantilla de aplicación de ASP.NET Web Forms proporciona un amplio conjunto de funcionalidades integradas. No solo le proporciona una instancia de las páginas Home.aspx, About.aspx y Contact.aspx, sino que también incluye la funcionalidad de pertenencia que registra a los usuarios y guarda sus credenciales para que puedan iniciar sesión en el sitio web. Esta información general proporciona más información sobre algunas de las características contenidas en la plantilla de aplicación de ASP.NET Web Forms y cómo se usan en la aplicación Wingtip Toys.

Pertenencia

ASP.NET Identity almacena las credenciales de los usuarios en una base de datos creada por la aplicación. Cuando los usuarios inician sesión, la aplicación valida sus credenciales leyendo la base de datos. La carpeta Account del proyecto contiene los archivos que implementan las distintas partes de pertenencia: registro, inicio de sesión, cambio de contraseña y autorización de acceso. Además, ASP.NET Web Forms admite OAuth y OpenID. Estas mejoras de autenticación permiten a los usuarios iniciar sesión en el sitio con credenciales existentes, desde cuentas como Facebook, Twitter, Windows Live y Google.

De forma predeterminada, la plantilla crea una base de datos de pertenencia con un nombre de base de datos predeterminado en una instancia de SQL Server Express LocalDB, el servidor de bases de datos de desarrollo que viene con Visual Studio Express 2013 para Web.

SQL Server Express LocalDB

SQL Server Express LocalDB es una versión ligera de SQL Server que tiene muchas características de programación de una base de datos de SQL Server. SQL Server Express LocalDB se ejecuta en modo de usuario y tiene una instalación rápida y sin configuración que tiene una breve lista de requisitos previos de instalación. En Microsoft SQL Server, cualquier base de datos o código Transact-SQL se puede mover de SQL Server Express LocalDB a SQL Server y SQL Azure sin realizar ningún paso de actualización. Por lo tanto, SQL Server Express LocalDB se puede usar como entorno de desarrollador para aplicaciones destinadas a todas las ediciones de SQL Server. SQL Server Express LocalDB habilita características como procedimientos almacenados, funciones definidas por el usuario y agregados, integración de .NET Framework, tipos espaciales y otros que no están disponibles en SQL Server Compact.

Páginas maestras

Una página maestra de ASP.NET define una apariencia y un comportamiento coherentes para todas las páginas de la aplicación. El diseño de la página maestra se combina con el contenido de una página de contenido individual para generar la página final que ve el usuario. En la aplicación Wingtip Toys, puede modificar la página maestra Site.master para que todas las páginas del sitio web de Wingtip Toys compartan el mismo logotipo distintivo y barra de navegación.

HTML5

La plantilla de aplicación de ASP.NET Web Forms admite HTML5, que es la versión más reciente del lenguaje de marcado HTML. HTML5 admite nuevos elementos y funcionalidades que facilitan la creación de sitios web.

Modernizr

Para los exploradores que no admiten HTML5, puede utilizar Modernizr. Modernizr es una biblioteca de JavaScript de código abierto que puede detectar si un explorador admite características HTML5 y habilitarlas si no lo hace. En la plantilla de aplicación de ASP.NET Web Forms, Modernizr se instala como un paquete NuGet.

Arranque

Las plantillas de proyecto de Visual Studio 2013 usan Bootstrap, un marco de diseño y tematización creado por Twitter. Bootstrap usa CSS3 para proporcionar un diseño con capacidad de respuesta, lo que significa que los diseños pueden adaptarse dinámicamente a los diferentes tamaños de las ventanas de los exploradores. También puede usar las características de tematización de Bootstrap para efectuar fácilmente un cambio en el aspecto de la aplicación. De forma predeterminada, la plantilla de aplicación web ASP.NET de Visual Studio 2013 incluye Bootstrap como un paquete NuGet.

Paquetes NuGet

La plantilla de aplicación de ASP.NET Web Forms incluye un conjunto de paquetes NuGet. Estos paquetes proporcionan funcionalidad con componentes en forma de bibliotecas y herramientas de código abierto. Hay una amplia variedad de paquetes que le ayudarán a crear y probar las aplicaciones. Visual Studio facilita la adición, eliminación y actualización de paquetes NuGet. Los desarrolladores también pueden crear y agregar paquetes a NuGet.

Al instalar un paquete, NuGet copia los archivos en la solución y realiza automáticamente los cambios necesarios, como agregar referencias y cambiar la configuración asociada a la aplicación web. Si decide quitar la biblioteca, NuGet quita los archivos e invierte los cambios realizados en el proyecto para que no haya desorden. NuGet está disponible en el menú Herramientas de Visual Studio.

jQuery

jQuery es una biblioteca JavaScript rápida y concisa que simplifica el recorrido de documentos HTML, el control de eventos, la animación y las interacciones Ajax para un desarrollo web rápido. La biblioteca jQuery de JavaScript se incluye en la plantilla de aplicación de ASP.NET Web Forms como un paquete NuGet.

Validación discreta

Los controles de validador integrados se han configurado para utilizar JavaScript discreto para la lógica de validación del lado del cliente. Esto reduce significativamente la cantidad de JavaScript representado insertado en el marcado de la página y reduce el tamaño general de la página. La validación discreta se agrega globalmente a la plantilla de aplicación de ASP.NET Web Forms según la configuración en el elemento <appSettings> del archivo Web.config en la raíz de la aplicación.

Entity Framework Code First

Además de las características de la plantilla de aplicación de ASP.NET Web Forms, la aplicación Wingtip Toys utiliza Entity Framework Code First, que es una biblioteca NuGet que permite el desarrollo centrado en código cuando se trabaja con datos. En pocas palabras, crea la parte de la base de datos de la aplicación en función del código que escriba. Con Entity Framework, se recuperan y manipulan datos como objetos fuertemente tipados. Esto le permite centrarse en la lógica de negocios de la aplicación en lugar de los detalles de cómo se accede a los datos.

Para obtener información adicional sobre las bibliotecas instaladas y los paquetes incluidos con la plantilla de ASP.NET Web Forms, consulte la lista de paquetes NuGet instalados. Para ello, en Visual Studio, cree un nuevo proyecto de Web Forms, seleccione Herramientas>Administrador de paquetes NuGet>Administrar paquetes NuGet para la solución y, a continuación, seleccione Paquetes instalados en el cuadro de diálogo Administrar paquetes NuGet.

Recorrido por Visual Studio

Las ventanas principales de Visual Studio incluyen el Explorador de soluciones, el Explorador de servidores (Explorador de bases de datos en Express), la Ventana de propiedades, el Cuadro de herramientas, la Barra de herramientas y la Ventana de documento.

Para obtener más información sobre Visual Studio, consulte Guía Visual para Visual Web Developer.

Resumen

En este tutorial, ha creado, revisado y ejecutado la aplicación Web Forms predeterminada. Ha revisado las distintas características de la aplicación Web Forms predeterminada y ha aprendido algunos aspectos básicos sobre cómo usar el entorno de Visual Studio. En los tutoriales siguientes, creará la capa de acceso a datos.

Recursos adicionales

Proyectos de aplicaciones web frente a proyectos de sitios web
Información general de las páginas ASP.NET Web Forms

AnteriorSiguiente