Tutorial: Uso avanzado del control Wizard de ASP.NET

Actualización: noviembre 2007

El control Wizard de ASP.NET simplifica muchas de las tareas asociadas a la creación de formularios y la recolección de datos proporcionados por el usuario. En este tutorial, utilizará el control Wizard para crear un formulario que recopila la información de dirección de un usuario, le permite solicitar o rechazar las actualizaciones por correo electrónico y le vuelve a presentar los datos y las opciones en un paso final de confirmación. Las tareas ilustradas en este tutorial incluyen:

  • Editar el diseño de un paso del asistente.

  • Agregar un paso personalizado al asistente.

  • Capturar mediante programación un evento del asistente.

  • Ramificar el asistente en función de las opciones del usuario.

  • Mostrar los datos del usuario en un paso de finalización.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Microsoft Visual Web Developer.

  • .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer), puede usar ese sitio Web y pasar a la sección "Agregar un control Wizard a la página", que se encuentra más adelante en este tutorial. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevositio Web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

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

  4. En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites.

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Agregar un control Wizard a la página

Para agregar un control Wizard a la página

  1. Cambie a la vista Diseño.

  2. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control Wizard hasta la página.

Recopilar la información de nombre y dirección

A continuación, configurará cada paso del asistente para recopilar los datos del usuario, solicitar una dirección de correo electrónico y mostrar los datos recopilados en el paso de finalización.

En primer lugar, recopile el nombre, la dirección, la ciudad, el estado y el código postal del usuario.

Para configurar el primer paso

  1. Arrastre uno de los identificadores situados en el borde del control Wizard para ampliar el control a aproximadamente el doble de su tamaño predeterminado.

  2. Haga clic en el texto subrayado Paso 1 del control Wizard y, a continuación, haga clic en el área de edición situada a la derecha de Paso 1, en el control Wizard.

    Ahora puede editar el área de presentación para el paso 1.

  3. Escriba Name.

  4. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control TextBox junto al texto.

  5. En la ventana Propiedades, cambie ID del control TextBox de TextBox1 a Name.

  6. Repita el proceso, agregando títulos y controles TextBox (recuerde asignar un nombre a los controles, porque necesitará hacer referencia a ellos más tarde) para recopilar:

    • Address

    • City

    • State

    • PostalCode

  7. Guarde el archivo.

Agregar una opción de actualización por correo electrónico

En esta parte del tutorial, permitirá al usuario elegir si desea recibir actualizaciones por correo electrónico.

Para agregar una opción de actualización por correo electrónico

  1. Haga clic en Paso 2.

  2. Haga clic en el área modificable situada a la derecha de Paso 2 y escriba Would you like to receive e-mail updates?.

  3. Bajo la pregunta, escriba: Yes.

  4. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control RadioButton junto a la palabra Yes.

  5. Escriba No.

  6. Arrastre otro RadioButton desde el Cuadro de herramientas hasta el control situado junto a la palabra No.

Agregar un paso personalizado para recopilar una dirección de correo electrónico

En esta sección, agregará al asistente un paso personalizado que recopila la dirección de correo electrónico del usuario. Después, agregará código para omitir este paso si el usuario decide no recibir actualizaciones por correo electrónico.

Agregar un paso personalizado para recopilar el correo electrónico del usuario

  1. Haga clic con el botón secundario en el control Wizard fuera de las áreas de edición y haga clic en Mostrar etiqueta inteligente.

  2. En el cuadro de diálogo Tareas del asistente, elija Agregar o quitar pasos del asistente.

    Aparecerá el Editor de la colección WizardStep.

  3. En la lista desplegable Agregar del botón Agregar, haga clic en Paso del asistente.

  4. Haga clic en Aceptar.

    El control Wizard muestra el nuevo paso.

  5. Haga clic en el nuevo paso para cambiarlo al modo de edición.

  6. En el área modificable, escriba E-mail address.

  7. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control TextBox hasta el control situado junto a las palabras E-mail Address.

  8. En Propiedades, cambie el Id. del control TextBox a EmailAddress, ya que necesitará hacer referencia a él en el código más tarde.

Agregar un paso de finalización

Ahora puede agregar un paso de finalización que presentará los datos de nuevo al usuario.

Para agregar un paso de finalización

  1. Haga clic con el botón secundario en el control Wizard y, a continuación, haga clic en Mostrar etiqueta inteligente.

  2. En el menú Tareas del asistente del control, elija Agregar o quitar pasos del asistente.

    Aparecerá el Editor de la colección WizardStep.

  3. En la lista Agregar, haga clic en Paso del asistente.

    El área Propiedades muestra los atributos del nuevo paso.

  4. En la ventana Propiedades, establezca la propiedad StepType en Complete.

  5. Haga clic en Aceptar.

    El control Wizard agrega el nuevo paso.

  6. Haga clic en el nuevo paso del control y, a continuación, haga clic en el área modificable situada a la derecha del nuevo paso.

  7. Desde el grupo Estándar del Cuadro de herramientas, arrastre un control Label hasta el nuevo paso.

  8. Presione ENTRAR para crear una nueva línea.

  9. Repita el paso 7 cinco veces más, para agregar un total de seis controles Label que corresponden a:

    • Nombre

    • Dirección

    • Ciudad

    • Región o estado

    • Código postal

    • Dirección de correo electrónico

  10. Guarde el archivo.

Antes de ejecutar el asistente, debe rellenar las etiquetas del paso de finalización con los valores que el usuario suministró en los tres primeros pasos del asistente.

Agregar código para el paso de finalización

En este tutorial, el paso de finalización muestra los datos del usuario. Para garantizar que se muestran los datos, las etiquetas del paso se rellenan mediante programación. Para mostrar los datos, debe escribir código para el evento Load de la página.

Para agregar código

  1. Cambie a Default.aspx y, en la vista Diseño, haga doble clic en la superficie de diseño.

    El editor de código se abre para la página y crea un esquema del método Page_Load.

  2. Agregue el código resaltado siguiente para rellenar el paso de finalización.

    Private Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    Label1.Text = Name.Text
    Label2.Text = Address.Text
    Label3.Text = City.Text
    Label4.Text = State.Text
    Label5.Text = PostalCode.Text
    Label6.Text = EmailAddress.Text
End Sub

    void Page_Load(object sender, EventArgs e)
{
    Label1.Text = Name.Text;
    Label2.Text = Address.Text;
    Label3.Text = City.Text;
    Label4.Text = State.Text;
    Label5.Text = PostalCode.Text;
    Label6.Text = EmailAddress.Text;
}

  3. Guarde el archivo.

Probar el control Wizard

Para probar el control Wizard

  1. Visualice Default.aspx en la vista Diseño.

  2. Abra el menú Tareas del asistente del control y seleccione Paso 1 en la lista desplegable Paso.

  3. Presione CTRL+F5 para ejecutar la página.

    Nota:

    Al ejecutar la página desde la vista Diseño, es posible que el explorador se inicie en el paso activo del asistente, que no es necesariamente el primer paso. Asegúrese de que la propiedad ActiveStepIndex del asistente se ha establecido en 0 en la ventana Propiedades antes de iniciar la página.

  4. Escriba la información de nombre y dirección.

  5. Haga clic en Siguiente.

  6. Seleccione cualquiera de las opciones del correo electrónico.

    Más adelante en el tutorial, escribirá código para controlar la opción de correo electrónico.

  7. Escriba una dirección de correo electrónico.

  8. Haga clic en Finalizar.

    Los datos especificados se muestran en la página.

En la siguiente sección, agregará el código necesario para omitir el tercer paso de recopilación del correo electrónico si el usuario decide no proporcionar una dirección de correo electrónico.

Agregar código para omitir el paso de correo electrónico

Ahora que las partes de recolección de datos y diseño del asistente se han completado, agregará la lógica que permite al usuario omitir el paso que recopila la dirección de correo electrónico si no desea recibir actualizaciones por correo electrónico. Esto se consigue controlando el evento NextButtonClick del control Wizard. Cuando se controla el evento, se comprueba primero si el asistente está actualmente en el paso en el que el usuario realiza una elección. En ese caso, compruebe qué control RadioButton está seleccionado. Si el usuario ha seleccionado No, avance la propiedad ActiveStepIndex del control Wizard para omitir el paso del asistente que solicita la dirección de correo electrónico del usuario.

Para agregar código para omitir el tercer paso

  1. Haga clic en el control Wizard. En la ventana Propiedades, escriba Wizard1_NextButtonClick para la propiedad NextButtonClick y presione ENTRAR.

    La ventana del editor de código se abre con la página de código subyacente.

  2. Agregue el siguiente código resaltado que busca el paso correcto, determina qué control RadioButton está seleccionado y especifica si se debe omitir el paso 3 del asistente.

    Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
   Handles Wizard1.NextButtonClick
   If Wizard1.ActiveStepIndex = 1 Then
       If RadioButton1.Checked Then
           ' Collect e-mail address.
           Wizard1.ActiveStepIndex = 2
       Else
           Wizard1.ActiveStepIndex = 3
       End If
   End If
End Sub

    void Wizard1_NextButtonClick(object sender, 
    System.Web.UI.WebControls.WizardNavigationEventArgs e)
{
     if (Wizard1.ActiveStepIndex == 1)
     {
        if (RadioButton1.Checked)
            // Collect ee-mail address.
        {
           Wizard1.ActiveStepIndex = 2;
        } 
        else 
        {
           Wizard1.ActiveStepIndex = 3;
        }
     }
}

    Establecer la propiedad ActiveStepIndex hace que el asistente vaya directamente al paso especificado.

  3. Guarde el archivo.

Probar la capacidad de omitir un paso

Para probar la omisión de un paso del asistente mediante programación

  1. Visualice Default.aspx en la vista Diseño.

  2. Abra el menú Tareas del asistente del control y seleccione Paso 1 en la lista desplegable Paso.

  3. Presione CTRL+F5 para ejecutar la página.

  4. Escriba la información de nombre y dirección.

  5. Haga clic en Siguiente.

  6. En Paso 2, active la casilla No.

  7. Haga clic en Siguiente.

    Llega al paso de finalización.

  8. Utilice el botón Atrás del explorador para volver al primer paso o cierre el explorador y presione CTRL+F5 para ejecutar de nuevo la página.

  9. Escriba la información de nombre y dirección en el primer paso.

  10. Haga clic en Siguiente.

  11. En Paso 2, active la casilla Yes.

  12. Haga clic en Siguiente.

  13. Llega al paso de recopilación de la dirección de correo electrónico.

  14. Escriba una dirección de correo electrónico.

  15. Haga clic en Siguiente.

  16. Llega al paso de finalización.

Pasos siguientes

El control Wizard simplifica la creación de formularios para recopilar los datos del usuario. Además de la información proporcionada aquí, puede tener otras preguntas relativas a los formularios y a la aplicación de un aspecto y un funcionamiento diferentes al control Wizard. Por ejemplo, podría:

Vea también

Referencia

Información general sobre Wizard (Control de servidor Web)

  • Last updated on