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>Á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>Á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>
<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