Demonstra Passo a passo: Criando um controle ASP.NET assistente básico

  • Artigo

Criar uma série de formulários para coletar dados de usuários é uma tarefa comum para o desenvolver sites da Web.O controle Wizard do ASP.NET simplifica muitas das tarefas associadas à criação de formulários e à coleta de entradas dos usuários, fornecendo um mecanismo que permite a você criar facilmente etapas, adicionar uma nova etapa ou reordenar as etapas.Neste passo a passo, você usará o controle Wizard do ASP.NET para simplificar a coleta dados realizando uma série de etapas independentes, sem precisar escrever código ou fazer persistir os dados do usuário entre as etapas do formulário.Você criará um assistente simples que coleta um nome de usuário e uma endereço de email e, em seguida, apresenta-os ao usuário na etapa de conclusão.Tarefas ilustradas nesta explicação passo a passo incluem:

  • Adicionar um controle Wizard à sua página.

  • Adicionar texto e controles a uma etapa do assistente.

  • Acessar dados do assistente entre as etapas.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • Visual Studio ou Visual Web Developer.

Criando o Site Web

Se você já tiver criado um site da Web (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você pode usar esse site da Web e pular para "Adicionar um controle Wizard" mais adiante nessa explicação passo a passo.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra Visual Web Developer (ou Visual Studio).

  2. No menu File, clique em NewWeb Site.

    The Novo site caixa de diálogo é exibida.

  3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

  4. Na caixa Location, insira o nome da pasta onde você deseja manter as páginas do seu site.

    Por exemplo, digite o nome da pasta C:\WebSites.

  5. Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Adicionando um Controle Wizard

Para adicionar um controle Wizard

  1. Abra a página Default.aspx e vá para modo Design.

  2. A partir da guia Padrão da Caixa de ferramentas, arraste um controle Wizard para a página.

    O controle aparecerá com duas etapas padrão já no local.Clicando nas etapas permitirá que você edite o texto e os controles exibidos durante essa etapa.

Editando as Etapas do Assistente

Quando o controle Wizard é arrastado para a página, duas etapas predefinidas são mostradas.Para esta explicação passo a passo, você irá edição as duas etapas e adicionar uma etapa de conclusão que mostra o resultado das duas primeiras etapas: um nome de usuário e um endereço de email.

Para editar a primeira etapa do assistente

  1. Arraste uma das alças da borda do controle Wizard para aumentar o controle mais ou menos duas vezes seu tamanho padrão.

  2. Clique no texto sublinhado Step 1 no controle Wizard.

  3. Clique na área edição do controle Wizard.

    Agora você pode editar a área de exibição da etapa.

  4. Digite Name:.

  5. Arraste um controle TextBox para a área ativa do assistente, ao lado do texto que você acabou de digitar.

Agora você pode editar a segunda etapa para coletar o endereço de email do usuário.

Para editar a segunda etapa do assistente

  1. Clique em Step 2 no controle Wizard.

  2. Clique na área edição do controle Wizard.

  3. Digite Email:.

  4. Arraste um controle TextBox para a área ativa do assistente, ao lado do seu rótulo de e-mail.

  5. Salve o arquivo.

Adicionando uma Etapa de Conclusão

Você agora criará uma etapa de conclusão que atua como o ponto final de seu assistente.A etapa Complete não possui opções de navegação.

Para adicionar uma etapa de conclusão

  1. Clique com o botão direito do mouse no controle Wizard.

  2. Escolha Show Smart Tag.

  3. Na caixa de diálogo Wizard Tasks escolha Add/Remove Wizard Steps.

    O WizardStep Collection Editor aparece.

  4. A partir da lista suspensa Add no botão Add, selecione Wizard Step.

    A área Properties agora mostra a nova etapa.

  5. conjunto o Títulopropriedade como Finished.

  6. Defina a propriedade StepType como Complete.

  7. Clique em OK.

Agora você pode editar a nova etapa de conclusão.Para este passo a passo, configure a etapa de conclusão para mostrar os dados inseridos pelo usuário nas etapas anteriores.

Para editar a etapa de conclusão

  1. Clique com o botão direito do mouse no controle Wizard e escolha Show Smart Tag.

  2. Na caixa de diálogo Wizard Tasks, use a lista suspensa Step para escolher a etapa Finished.

    Observação:

    O nome na lista suspensa será o nome que você deu a etapa ao criá-la, neste exemplo, Finished.

  3. Arraste um controle Label para dentro do assistente, deixando o nome padrão, Label1.

  4. Arraste outro controle Label para dentro do assistente, deixando o nome padrão, Label2.

  5. Salve o arquivo.

A etapa de conclusão exibirá os dados inseridas pelo usuário.Use o evento Load da página para atribuir os valores das duas primeiras etapas aos controles labels adicionados na etapa de conclusão.

Para mostrar os dados do usuário

  1. Retorne para Default.aspx e, no modo de exibição de design, clique duas vezes na superfície de design.

    Agora a página contém um método Page_Load que está oculto para você.

  2. Adicione o seguinte código realçado.

    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. Salve o arquivo.

Testando o Controle Wizard

Agora você pode testar o controle Wizard.

Para testar o controle wizard

  1. Visualize a página Default.aspx em modo Design.

  2. Exiba o menu Wizard Tasks no controle e selecione Step 1 a partir da lista suspensa Step.

  3. Clique no controle Wizard e pressione CTRL+F5.

  4. Digite um nome para o controle TextBox do nome para Step 1.

  5. Clique em Next.

  6. Digite um endereço de email no controle TextBox do email para Step 2.

  7. Clique em Finish.

    Seu dados serão exibidos.

Próximas etapas

O controle Wizard simplifica a criação de formulários para reunir dados de usuário.Além do que foi visto aqui, você pode ter outras perguntas sobre a coleta de dados de usuários e sobre o uso de formulários.Por exemplo, você pode desejar:

Consulte também

Referência

Visão Geral Sobre Controle de Servidor Web do Wizard