Demonstra Passo a passo: Usar avançado do controle assistente do ASP.NET

  • Artigo

O controle Wizard do ASP.NET simplifica muitas das tarefas associadas à criação de formulários e coleta de entrada do usuário.Neste passo a passo, você usa o controle Wizard para criar um formulário que coleta informações de endereço de um usuário, permite que eles optem por ter ou não atualizações via e-mail e, em seguida, apresenta os dados e opções de volta para eles em uma etapa de confirmação final.Tarefas ilustradas nesta explicação passo a passo incluem:

  • Edição do layout de uma etapa do assistente (wizard).

  • Adição de uma etapa personalizada ao assistente.

  • Captura programática de um evento do assistente.

  • Ramificar o assistente com base nas opções de usuário.

  • Exibir dados do usuário em uma etapa de conclusão.

Pré-requisitos

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

  • O Microsoft Visual Web Developer.

  • O .NET Framework.

Criando o Site Web

Se você já criou um site no Visual Web Developer (por exemplo, quando trabalhou com o tópico Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você pode usar esse site e ir para "Adicionando um Controle Wizard na Página" posteriormente neste 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 o Visual Web Developer.

  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 na Página

Para adicionar um controle wizard na página

  1. Alternar para modo Design.

  2. A partir do grupo Padrão na Caixa de Ferramentas, arraste um controle Wizard para a página.

Coletando Nome e Informação Endereço

Em seguida, configure cada etapa do seu wizard para coletar os dados de usuário, prompt para um endereço de e-mail e exiba os dados coletados na etapa de conclusão.

Primeiro, colete do usuário o nome, endereço, cidade, estado e CEP.

Para configurar a primeira etapa

  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 e, em seguida, clique na área de edição à direita de Step 1 no controle Wizard.

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

  3. Digite Name.

  4. A partir do grupo Standard de Toolbox, arraste um controle TextBox para o lado do texto.

  5. Na janela Propriedades, alterar o ID of the TextBox controle TextBox1 para nome.

  6. Repita o processo, adicionando legendas e controles TextBox (lembre-se de nomear os controles porque será preciso fazer referência a eles posteriormente) para coletar:

    • Endereço

    • Cidade

    • Estado

    • CEP

  7. Salve o arquivo.

Adicionando uma Opção de Atualização de E-mail

Nesta parte do passo a passo, você permite que o usuário escolha se deseja ou não receber atualizações de e-mail.

Para adicionar uma escolha de atualização e-mail

  1. Clique em Step 2.

  2. clicar na área editável à direita da Etapa 2 e tipo deseja receive email updates?.

  3. Sob a pergunta, digite: Sim.

  4. A partir do grupo Standard de Toolbox, arraste um controle RadioButton para perto da palavra Yes.

  5. Digite No.

  6. Arraste outro RadioButton de Toolbox para o controle ao lado da palavra No

Adicionando uma Etapa Personalizado para Coletar um Endereço de E-mail

Nesta seção você adiciona uma etapa personalizada no wizard que coleta o endereço de e-mail do usuário.Posteriormente, você adicionará código para ignorar esta etapa se o usuário decidir não obter atualizações de e-mail.

Adicionando uma etapa personalizada para coletar e-mail do usuário

  1. Clique com o botão direito do mouse no controle Wizard fora das áreas de edição e clique em Show Smart Tag.

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

    O WizardStep Collection Editor aparece.

  3. Na lista suspensa Add sobre o botão Add, clique em Wizard Step.

  4. Clique em OK.

    O controle Wizard exibe a nova etapa.

  5. Clique na nova etapa para alternar o modo de edição.

  6. Na área editável, digite E-mail address.

  7. A partir do grupo Standard de Toolbox, arraste um controle TextBox para o controle ao lado das palavras E-mail Address.

  8. Em Properties, altere a ID do TextBox controle para EmailAddress porque você precisará referir-se a ele posteriormente no código.

Adicionando uma Etapa de Conclusão

Agora você pode adicionar uma etapa de conclusão que apresentará os dados do usuário de volta a eles.

Para adicionar uma etapa de conclusão

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

  2. No menu Wizard Tasks, no controle, escolha Add/Remove Wizard Steps.

    O WizardStep Collection Editor aparece.

  3. Na lista Add, clique em Wizard Step.

    A área propriedades exibe os atributos da nova etapa.

  4. Na janela Properties, defina StepType como Complete.

  5. Clique em OK.

    O controle Wizard adiciona a nova etapa.

  6. Clique na nova etapa no controle e clique na área editável à direita da nova etapa.

  7. A partir do grupo Standard de Toolbox, arraste um controle Label para a nova etapa.

  8. Pressione ENTER para criar uma nova linha.

  9. Repita a etapa 7 cinco vezes mais, para um total de seis controles Label correspondentes a:

    • Nome

    • Endereço

    • Cidade

    • Região ou Estado

    • CEP

    • Endereço de E-mail

  10. Salve o arquivo.

Antes de executar o assistente, é necessário preencher os rótulos, na etapa de conclusão, com os valores do usuário fornecidos nas três primeiras etapas do assistente.

Adicionando Código para a Etapa de Conclusão

Neste passo a passo, a etapa de conclusão exibe os dados do usuário.Para garantir que os dados serão exibidos, você preencheu os rótulos da etapa programaticamente.Para exibir os dados, você deve escrever código para a página do evento Load.

Para adicionar código

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

    O editor de código abre para a página, e cria um esqueleto para o método Page_Load.

  2. Adicione o seguinte código realçado para preencher a etapa de conclusão.

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

Testando o Controle Wizard

Para testar o controle wizard

  1. Exiba Default.aspx no modo Design.

  2. Abra o menu Wizard Tasks no controle e selecione Step 1 da lista suspensa Step.

  3. Pressione CTRL+F5 para executar a página.

    Observação:

    Ao executar a página no modo Design, o navegador poderá começar na etapa do assistente ativa no momento, não necessariamente a primeira etapa.Certifique-se que a propriedade ActiveStepIndex do assistente está definida como 0 na janela Properties antes de iniciar a página.

  4. Digite as informações sobre nome e endereço.

  5. Clique em Next.

  6. Selecione qualquer opção para e-mail.

    Você irá gravar código para manipular a opção de e-mail mais tarde no passo a passo.

  7. Digite um endereço de e-mail.

  8. Clique em Finish.

    Os dados inseridos são exibidos na a página.

Na próxima seção, você adiciona o código necessário para ignorar a terceira etapa de coleta de e-mail, se o usuário decidir não fornecer um endereço de e-mail.

Adicionando Código para Ignorar a Etapa E-mail

Agora que a coleta de dados e partes do layout do seu assistente está concluída, você irá adicionar a lógica para permitir que o usuário ignore a etapa que coleta o endereço de e-mail, se eles não quiserem receber atualizações de e-mail.Você faz isso através do tratamento do evento NextButtonClick do controle Wizard.Quando você manipula o evento, você primeiro checa se o assistente está atualmente na etapa onde o usuário faz uma escolha.Nesse caso, verifique se o controle RadioButton está selecionado.Se o usuário selecionou Não, avançe a propriedade ActiveStepIndex do controle Wizard para ignorar a etapa do assistente que solicita o email do usuário.

Para adicionar código para ignorar a terceira etapa

  1. Clique no controle Wizard.Na janela Propriedades, digite Wizard1_NextButtonClick para a NextButtonClick propriedade e pressione ENTER.

    A janela de editor de código abrirá para a página code-behind.

  2. Adicione o seguinte código realçado que verifica a etapa correta, determina qual controle RadioButton está selecionado e quando ignorar a etapa 3 do assistente.

    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;
        }
     }
}

    Definir a propriedade ActiveStepIndex faz com que o wizard vá diretamente para a etapa especificada.

  3. Salve o arquivo.

Testando a Capacidade de Ignorar uma Etapa

Para testar a capacidade do wizard para ignorar uma etapa programaticamente

  1. Exiba Default.aspx no modo Design.

  2. Abra o menu Wizard Tasks no controle e selecione Step 1 da lista suspensa Step.

  3. Pressione CTRL+F5 para executar a página.

  4. Digite as informações sobre nome e endereço.

  5. Clique em Next.

  6. Na etapa 2, selecione a caixa de seleção No.

  7. Clique em Next.

    Você chegar ao passo de conclusão.

  8. Use botão voltar do seu navegador para retornar para a primeira etapa, ou feche o navegador e pressione CTRL+F5 para executar a página novamente.

  9. Digite as informações de nome e endereço na primeira etapa.

  10. Clique em Next.

  11. Na etapa 2, selecione a caixa de seleção Yes.

  12. Clique em Next.

  13. Você chegar ao passo de coleta de endereço de e-mail.

  14. Digite um endereço de e-mail.

  15. Clique em Next.

  16. Você chegar ao passo de conclusão.

Próximas etapas

O controle Wizard simplifica a criação de formulários para reunir dados de usuário.Além do que foi abordado aqui, você poderá ter outras perguntas relacionadas à formulários assim como aplicar diferentes aspectos ao controle Wizard.Por exemplo, você pode desejar:

Consulte também

Referência

Visão Geral Sobre Controle de Servidor Web do Wizard