Tutorial: Crear un control ASP.NET Wizard básico

Actualización: noviembre 2007

La generación de una serie de formularios para recopilar datos de usuarios es una tarea común en el desarrollo de sitios Web. El control ASP.NET Wizard simplifica muchas de las tareas asociadas con la generación de formularios y recolección de datos de usuario al proporcionar un mecanismo que permite de manera sencilla crear pasos, agregar pasos nuevos o reordenarlos. En este tutorial, utilizará el control Wizard de ASP.NET para simplificar la recolección de datos como una serie de pasos independientes sin tener que escribir código o hacer que los datos de usuario permanezcan entre los pasos de los formularios. Creará un asistente sencillo que recopila el nombre de usuario y la dirección de correo electrónico, y luego lo vuelve a presentar al usuario en el paso final. Las tareas ilustradas en este tutorial incluyen:

  • Agregar un control Wizard a su página.

  • Agregar controles y texto a un paso del asistente.

  • Obtener acceso a los datos del asistente entre pasos.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Visual Studio o Visual Web Developer.

Crear el sitio Web

Si ya ha creado un sitio web (por ejemplo, según los pasos descritos en el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede usar dicho sitio web y pasar directamente a la sección "Agregar un control del asistente", 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 (o Visual Studio).

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

    Aparecerá 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 desee trabajar.

  6. Haga clic en Aceptar.

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

Agregar un control del asistente

Para agregar un control del asistente

  1. Cambie a la vista Diseño para Default.aspx.

  2. Desde la ficha Estándar del Cuadro de herramientas, arrastre un control Wizard a la página.

    El control aparece con dos pasos predeterminados ya colocados. Haciendo clic en los pasos se puede editar el texto y los controles mostrados durante ese paso.

Editar los pasos del asistente

Cuando se arrastra el control Wizard a la página, muestra dos pasos ya predefinidos de forma predeterminada. En este tutorial, se editan los dos pasos y se agrega un paso final que muestra el resultado de los dos primeros: un nombre de usuario y una dirección de correo electrónico.

Para editar el primer paso del asistente

  1. Arrastre uno de los controles de movimiento situado en el extremo del control Wizard para aumentar el tamaño del control al doble del tamaño predeterminado.

  2. Haga clic en el texto subrayado Paso 1 en el control Wizard.

  3. Haga clic en el área de edición para el control Wizard.

    Ahora puede editar el área de visualización del paso.

  4. Escriba Nombre:.

  5. Arrastre un control TextBox al área activa del asistente, junto al texto que acaba de escribir.

Ahora puede editar el segundo paso para obtener la dirección de correo electrónico del usuario.

Para editar el segundo paso del asistente

  1. Haga clic en Paso 2 en el control Wizard.

  2. Haga clic en el área de edición para el control Wizard.

  3. Escriba Email:.

  4. Arrastre un control TextBox al área activa del asistente, junto a la etiqueta de correo electrónico.

  5. Guarde el archivo.

Agregar un paso final

Ahora creará un paso final que actúa como punto final del asistente. El paso Complete no tiene opciones de exploración.

Para agregar un paso final

  1. Haga clic con el botón secundario del mouse en el control Wizard.

  2. Elija Mostrar etiqueta inteligente.

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

    Aparecerá el Editor de la colección WizardStep.

  4. En la lista desplegable Agregar en el botón Agregar, seleccione Paso del asistente.

    El área Propiedades ahora muestra el paso nuevo.

  5. Establezca la propiedad Title en Finalizado.

  6. Establezca la propiedad StepType en Completado.

  7. Haga clic en Aceptar.

Ahora puede editar su nuevo paso final. Como práctica para este tutorial, configure el paso final de modo que muestre los datos que escribió el usuario en los pasos anteriores.

Para editar el paso final

  1. Haga clic con el botón secundario del mouse en el control Wizard y elija Mostrar etiqueta inteligente.

  2. En el cuadro de diálogo Tareas del asistente, utilice la lista desplegable Paso para elegir el paso Finalizado.

    Nota:

    El nombre en la lista desplegable será el nombre que dio al paso cuando lo creó, Finalizado en este ejemplo.

  3. Arrastre un control Label hasta el asistente, dejando el nombre predeterminado de Label1.

  4. Arrastre otro control Label hasta el asistente, dejando el nombre predeterminado de Label2.

  5. Guarde el archivo.

El paso final mostrará los datos que ha escrito el usuario. Utilice el evento Load de la página para asignar los valores de los dos primeros pasos a las etiquetas que agregó al paso final.

Para mostrar los datos del usuario

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

    La página ahora contiene un método Page_Load que es auxiliar.

  2. Agregue el siguiente código resaltado:

    Private Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) _
        Handles Me.Load
    Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
End Sub

    void Page_Load(Object sender, System.EventArgs e)
{
    Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
}

  3. Guarde el archivo.

Probar el control del asistente

Ahora puede probar el control Wizard.

Para probar el control del asistente

  1. Ver Default.aspx en vista Diseño.

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

  3. Haga clic en el control Wizard y luego presione CTRL+F5.

  4. Escriba un nombre en el control de nombre TextBox para el Paso 1.

  5. Haga clic en Siguiente.

  6. Escriba una dirección de correo electrónico en el control de correo electrónico TextBox para el Paso 2.

  7. Haga clic en Finalizar.

    Su muestran sus datos.

Pasos siguientes

El control Wizard simplifica la creación de formularios para recopilar datos del usuario. Además de lo que se ha cubierto aquí, es posible que tenga otras preguntas relacionadas con la recolección de datos de usuario y utilización de formularios. Por ejemplo, podría:

Vea también

Referencia

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

  • Last updated on