Compartir a través de

Tutorial: Crear una aplicación web simple

  • Artículo

Actualización: noviembre 2007

En este tutorial, creará una aplicación Web simple para utilizarla como base para una prueba Web en Tutorial: Registrar y ejecutar una prueba Web.

Para crear una prueba Web de ejemplo, debería utilizar una aplicación Web en la que pueda realizar cambios arbitrarios.

En este tutorial realizará las tareas siguientes:

  • Creará una aplicación Web simple.

  • Probará la aplicación Web manualmente.

Requisitos previos

Para este tutorial, necesitará:

  • Microsoft Visual Studio 2005

Crear una aplicación Web

Para crear la aplicación Web

  1. En Microsoft Visual Studio 2005, en el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  2. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  3. En el cuadro Ubicación, seleccione Sistema de archivos y, a continuación, escriba el nombre de la carpeta en la que desea guardar su aplicación Web. El nombre de la parte final de la carpeta debe ser ColorWebApp\ColorWebApp. Por ejemplo, escriba el nombre de carpeta C:\WebSites\ColorWebApp\ColorWebApp.

    Nota:

    Incluya el nombre dos veces para poder agregar un proyecto de prueba Web a la primera carpeta y separarlo de la propia aplicación Web situada en la segunda carpeta.

  4. En la lista Lenguaje, elija el lenguaje de programación con el que prefiera trabajar.

    Nota:

    Escribirá una cantidad mínima de código en este tutorial.

  5. Haga clic en Aceptar.

Agregar controles a la aplicación Web

Para agregar controles a la aplicación Web

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y seleccione Ver diseñador.

    Se mostrará una página en blanco.

  2. Si el cuadro de herramientas no está visible haga clic en Ver y, a continuación, haga clic en Cuadro de herramientas.

  3. En el grupo Estándar, arrastre un control RadioButtonList a la página.

    Se agregará un control RadioButtonList a la superficie de diseño.

  4. En el panel de etiquetas inteligentes Tareas de RadioButtonList, haga clic en el vínculo EditItems.

    Aparecerá el Editor de la colección ListItem.

    Nota:

    Otra forma de hacer que aparezca el Editor de la colección ListItem es editar la colección Items en la ventana Propiedades.

  5. Haga clic en Agregar para agregar un nuevo elemento.

  6. En Propiedades ListItem:

    1. Cambie la propiedad Text a Red.

    2. Establezca la propiedad Selected en True.

  7. Haga clic en Agregar para agregar otro elemento.

  8. En Propiedades ListItem, cambie la propiedad Text a Blue.

  9. Haga clic en Aceptar para cerrar el Editor de la colección ListItem.

  10. Arrastre un control Button a la página y cambie la propiedad Text a Submit.

  11. En el menú Archivo, haga clic en Guardar todo.

Agregar páginas a la aplicación Web

Para agregar páginas a la aplicación Web

  1. En el menú Sitio Web, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en la plantilla Web Forms, asígnele el nombre Red.aspx y, a continuación, haga clic en Agregar.

  3. En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar a la vista de diseño.

  4. Arrastre un control Label a la página. Establezca la propiedad Text en Red y la propiedad ForeColor en Red.

  5. En el menú Sitio Web, haga clic en Agregar nuevo elemento.

  6. En el cuadro de diálogo Agregar nuevo elemento, haga clic en la plantilla Web Forms, asígnele el nombre Blue.aspx y, a continuación, haga clic en Agregar.

  7. En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar a la vista de diseño.

  8. Arrastre un control Label a la página. Establezca la propiedad Text en Blue y la propiedad ForeColor en Blue.

  9. En el menú Archivo, haga clic en Guardar todo.

Agregar funcionalidad a la aplicación Web

Para agregar funcionalidad a la aplicación Web

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y haga clic en Ver diseñador.

  2. Haga doble clic en el control ButtonSubmit. Visual Studio cambia al código de la página y crea un esquema del controlador de eventos para el evento Click del control Button.

  3. Agregue el código siguiente al controlador de eventos:

    if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

    If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

  4. En el menú Archivo, haga clic en Guardar todo.

Probar la aplicación Web manualmente

Para probar la aplicación Web manualmente

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y, a continuación, haga clic en Establecer como página de inicio.

  2. Presione CTRL+F5 para ejecutar la aplicación Web en el explorador. Verá la primera página.

  3. Haga clic en Red y, a continuación, haga clic en Submit. Si la aplicación funciona correctamente, irá a la página con el control Label que indica Red.

  4. Vuelva a la primera página.

  5. Haga clic en Blue y, a continuación, haga clic en Submit. Si la aplicación funciona correctamente, irá a la página con el control Label que indica Blue.

Pasos siguientes

En este tutorial, ha creado una aplicación Web simple y la ha probado manualmente. Ahora, está preparado para crear una prueba Web que le permita probar esta aplicación. Para obtener más información, vea Tutorial: Registrar y ejecutar una prueba Web.

Vea también

Tareas

Tutorial: Registrar y ejecutar una prueba Web

Otros recursos

Visita guiada sobre la creación de sitios Web en Visual Web Developer