O objetivo deste artigo é trabalhar com o novo controle Wizard no ASP.NET 2.0, ele permite através de assistentes <WizardSteps> navegar no controle, indo para frente e para trás, em cada passo você pode trabalhar com qualquer controle, como Button, RadioButtonList e outros dentro dele.

Neste artigo vamos simular uma reserva de Hotel, onde o hóspede irá selecionar o tipo de comida que deseja em sua estadia, por exemplo, caso ele selecione carnes, iremos mostrar os pratos com carnes ou saladas, somente pratas com saladas.

 

 

 

1 – Crie um novo projeto, selecione o File / New Web Site, selecione o Template ASP.NET Web Site, defina um diretório onde você deseja criar o seu projeto – Figura 1.

 

Figura 1 – Criando um novo projeto

 

2 – Clique em OK, será criado um novo projeto – Figura 2.

 

 

Figura 2 – Novo projeto chamado Wizard

 

 

 

3 – Caso você esteja no mode Source – Figura 2 troque para o modo Design.

4 – No modo Design localize o controle Wizard na Toolbox e arraste para o arquivo Default.aspx – Figura 3.

 

Figura 3 – Controle Wizard sobre o arquivo Default.aspx

 

 

 

5 – Selecione as propriedades do controle Wizard e altere o HeaderText para “Hotel Praia Mare" , no Wizard Tasks clique em Auto Format e escolha um scheme de sua preferência, - Figura 4.

 

Figura 4 – Header Text e formatação do Scheme

 

6 – No Wizard Tasks clique em Add/Remove WizardSteps  e crie 5 Steps altere o Title para Prato, Carne, Salada, Bebida e Obrigado, no último Step (Obrigado) defina o StepType como Finish – Figura 5.

 


Figura 5 – Criação dos Steps, alteração do Title e StepType - Finish

 

 

 

 

7 – Você consegue navegar nos Steps em modo de Designer, clique nos links Prato, Carne, Salada, Bebida e Obrigado, perceba que todos eles estão vazios, nosso próximo passo será incluir os controles que serão RadioButtonList e um Label, no passo final, onde será exibida uma mensagem.

 

8 – Adicione no Step1 (Prato) a seguinte mensagem –

Qual prato você deseja em sua estadia?

 

9 – Adicione no RadioButtonList e adicione em Edit Item – Carnes / Saladas – Figura 6.

 

Figura 6  – Step1 (Prato) – Mensagem e RadioButtonList

 

 

 

10 - No passo Carne adicione a mensagem “Selecione a carne de sua preferência” e um RadioButtonList (Peixe / Frango / Carne)

 

<asp:WizardStep ID="WizardStep2" runat="server" Title="Carne">

                    Selecione a carne de sua preferência.<br />

                    <br />

                    <asp:RadioButtonList ID="RadioButtonList2" runat="server">

                        <asp:ListItem>Peixe</asp:ListItem>

                        <asp:ListItem>Frango</asp:ListItem>

                        <asp:ListItem>Carne</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

Listagem 1 - Carne

 

 

 

 

 

 

11 - No passo Salada adicione a mensagem - “Selecione a salada de sua preferência” e um RadioButtonList (Saladas verdes / Saladas com maionese / Saladas com legumes)

 

<asp:WizardStep ID="WizardStep3" runat="server" Title="Salada">

                    Selecione a salada de sua preferência.<br />

                    <br />

                    <asp:RadioButtonList ID="RadioButtonList3" runat="server">

                        <asp:ListItem>Saladas verdes</asp:ListItem>

                        <asp:ListItem>Saladas com maionese</asp:ListItem>

                        <asp:ListItem>Saladas com legumes</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

Listagem 2 – Salada

 

 

12 - No passo Bebida adicione a mensagem -  “Selecione uma bebida” e um RadioButtonList (Água / Refrigerante / Cerveja / Vinho)

 

 

<asp:WizardStep ID="WizardStep4" runat="server" Title="bebida">

                    Selecione uma bebida<br />

                    <asp:RadioButtonList ID="RadioButtonList4" runat="server">

                        <asp:ListItem>&#193;gua </asp:ListItem>

                        <asp:ListItem>Refrigerante</asp:ListItem>

                        <asp:ListItem>Cerveja</asp:ListItem>

                        <asp:ListItem>Vinho</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

 

 

 

13 – No último passo adicione um Label para exibir uma mensagem para o hóspede.

 

 

<asp:WizardStep ID="WizardStep5" runat="server" StepType="Complete" Title="Obrigado">

                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

                </asp:WizardStep>

 

 

 

 

 

 

 

 

 

 

 

 

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="4" BackColor="#E6E2D8" BorderColor="#999999"

            BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"

            HeaderText="Hotel Praia Mare" Height="200px" OnFinishButtonClick="Wizard1_FinishButtonClick"

            OnNextButtonClick="Wizard1_NextButtonClick" Width="401px" CancelButtonText="Cancelar" StartNextButtonText="Próximo" StartNextButtonType="Link" StepNextButtonText="Próxmo" StepNextButtonType="Link" StepPreviousButtonText="Voltar" StepPreviousButtonType="Link">

            <StepStyle BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="2px" />

            <SideBarStyle BackColor="#1C5E55" Font-Size="0.9em" VerticalAlign="Top" />

            <NavigationButtonStyle BackColor="White" BorderColor="#C5BBAF" BorderStyle="Solid"

                BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#1C5E55" />

            <WizardSteps>

                <asp:WizardStep ID="WizardStep1" runat="server" Title="Prato">

                    Qual prato você deseja em sua estadia?<br />

                    <br />

                    <asp:RadioButtonList ID="RadioButtonList1" runat="server">

                        <asp:ListItem>Carnes</asp:ListItem>

                        <asp:ListItem>Saladas</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

                <asp:WizardStep ID="WizardStep2" runat="server" Title="Carne">

                    Selecione a carne de sua preferência.<br />

                    <br />

                    <asp:RadioButtonList ID="RadioButtonList2" runat="server">

                        <asp:ListItem>Peixe</asp:ListItem>

                        <asp:ListItem>Frango</asp:ListItem>

                        <asp:ListItem>Carne</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

                <asp:WizardStep ID="WizardStep3" runat="server" Title="Salada">

                    Selecione a salada de sua preferência.<br />

                    <br />

                    <asp:RadioButtonList ID="RadioButtonList3" runat="server">

                        <asp:ListItem>Saladas verdes</asp:ListItem>

                        <asp:ListItem>Saladas com maionese</asp:ListItem>

                        <asp:ListItem>Saladas com legumes</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

                <asp:WizardStep ID="WizardStep4" runat="server" Title="bebida">

                    Selecione uma bebida<br />

                    <asp:RadioButtonList ID="RadioButtonList4" runat="server">

                        <asp:ListItem>&#193;gua </asp:ListItem>

                        <asp:ListItem>Refrigerante</asp:ListItem>

                        <asp:ListItem>Cerveja</asp:ListItem>

                        <asp:ListItem>Vinho</asp:ListItem>

                    </asp:RadioButtonList>

                </asp:WizardStep>

                <asp:WizardStep ID="WizardStep5" runat="server" StepType="Complete" Title="Obrigado">

                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

                </asp:WizardStep>

            </WizardSteps>

            <SideBarButtonStyle ForeColor="White" />

            <HeaderStyle BackColor="#666666" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="2px"

                Font-Bold="True" Font-Size="0.9em" ForeColor="White" HorizontalAlign="Center" />

            <FinishNavigationTemplate>

                &nbsp;<asp:Button ID="FinishButton" runat="server" BackColor="White" BorderColor="#C5BBAF"

                    BorderStyle="Solid" BorderWidth="1px" CommandName="MoveComplete" Font-Names="Verdana"

                    Font-Size="0.8em" ForeColor="#1C5E55" Text="Finish" />

            </FinishNavigationTemplate>

        </asp:Wizard>

   

    </div>

    </form>

</body>

</html>

Listem completa

 

 

 

13 – O controle Wizard possui vários eventos onde é possível codificar os passos e as opções do usuário, no nosso caso quando o hóspede selecionar como prato carnes nós iremos exibir somente os pratos com carnes, no último passo o hóspede selecionará uma bebida e no passo final iremos exibir os itens selecionados.

 

 

 

14 –  Selecione os eventos do Wizard Clicando no raio(eventos), nos iremos codificar o evento NextButtonClick e o FinishButtonClick, o primeiro evento é disparado quando o usuário clica no link Próximo, ou seja navega entre os passos, e o último quando ele clica ele encerra o Wizard.

 

Figura 7  – Step1 (Prato) – Mensagem e RadioButtonList

 

 

15 – Clique no evento NextButtonClick e digite o seguinte código

 

protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)

    {

        if (Wizard1.ActiveStepIndex == 0)

        {

            if (RadioButtonList1.SelectedValue == "Saladas")

            {

                Wizard1.ActiveStepIndex = 2;

            }

        }

 

        if (Wizard1.ActiveStepIndex == 1)

        {

            Wizard1.ActiveStepIndex = 3;

        }

    }

 

Através do Índice do Wizard nós podemos codificar a navegação entre os Steps, no código acima quando o usuário selecionar saladas no passo Pratos (0), o índice recebe o valor 2, ou seja os pratos de saladas, e não exibe os pratos de carnes para o hóspede. No outro if se o prato selecionado for carne não mostramos os pratos de saladas.

 

15 – Clique no evento FinishButtonClick e digite o seguinte código

 

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

    {

        if (RadioButtonList1.SelectedValue == "Saladas")

        {

            Label1.Text =  "Sua comida será " + RadioButtonList3.SelectedValue +

               " e " + RadioButtonList4.SelectedValue;

        }

        else

        {

            Label1.Text = "Sua comida será " + RadioButtonList2.SelectedValue +

                " e " + RadioButtonList4.SelectedValue;

        }

 

    }

 

 

Neste último evento nós capturamos as preferências do hóospede e exibimos no Label – Figura 8

 

Figura 8  – Último passo.

 

 

Como podemos perceber o Controle Wizard é tranqüilo de trabalhar e através dos seus eventos podemos codificar os passos dos usuários, este exemplo é bem simples, mas acredito que deu para ter idéia de como ele funciona.

 

 

Abraços e até o próximo.

Fábio Galante Mans

fabio@aspneti.com.br

www.aspneti.com – community.net