Creating three step wizard page

Last post 07-04-2008 2:37 PM by scottstyris. 2 replies.
Page 1 of 1 (3 items)
Sort Posts: Previous Next
  • 07-03-2008 3:37 PM

    Creating three step wizard page

    Hi everyone,

    I need to create three-step wizard page in my ASP.NET Ajax application. In the first step, you enter your name; in the second step, you enter your address; and in the third step, a summary of the data you entered in the first two steps will be displayed. To make the wizard experience more fluid, I need to use an UpdatePanel control around the Wizard control.

    Any idea about this implementation? Any idea will be appreciated. 

    Eat till live.
    Filed under: ,
  •  Advertisement

    "With most profiling software, my application runs so slowly that it's barely usable but, with ANTS Profiler 4, even when it's collecting line-level timings, the overhead was hardly noticeable."

    Geoff Hirst, Consultant, 64Bitz Computer Consultancy Ltd and VBUG editor

    Try out the new ANTS Profiler 4 for yourself

    Download your 14-day trial now

     
  • 07-04-2008 6:12 AM In reply to

    Re: Creating three step wizard page

    Here is complete Code:

     

    ASPX Code:

     

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="2" BackColor="#E6E2D8" BorderColor="#999999"
                        BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
                        Height="123px" Width="700px" OnActiveStepChanged="Wizard1_ActiveStepChanged">
                        <StepStyle BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="2px" />
                        <WizardSteps>
                            <asp:WizardStep runat="server" Title="Personal Details">
                                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            Enter your Name:
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </asp:WizardStep>
                            <asp:WizardStep runat="server" Title="Address Details">
                                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            Enter your Address Details:
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Address line 1: <asp:TextBox runat="server" ID="txtAdd1"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Address line 2: <asp:TextBox runat="server" ID="txtAdd2"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            City: <asp:TextBox runat="server" ID="txtAdd3"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            State: <asp:TextBox runat="server" ID="txtAdd4"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </asp:WizardStep>
                            <asp:WizardStep runat="server" Title="Summary">
                                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <asp:Label ID="lblSummary" runat="server" Width="100%"></asp:Label>
                                        </td>
                                    </tr>
                                </table>   
                            </asp:WizardStep>
                        </WizardSteps>
                        <SideBarButtonStyle ForeColor="White" />
                        <NavigationButtonStyle BackColor="White" BorderColor="#C5BBAF" BorderStyle="Solid"
                            BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#1C5E55" />
                        <SideBarStyle BackColor="#1C5E55" Font-Size="0.9em" VerticalAlign="Top" />
                        <HeaderStyle BackColor="#666666" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="2px"
                            Font-Bold="True" Font-Size="0.9em" ForeColor="White" HorizontalAlign="Center" />
                    </asp:Wizard>
                </ContentTemplate>
            </asp:UpdatePanel>
            <div>
            </div>
        </form>
    </body>
    </html>

     

    in Code Behind; you need to handle ActiveStepChanged event of Wizard Control as..

    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                Wizard1.ActiveStepIndex = 0;
            }
        }

        protected void Wizard1_ActiveStepChanged(object sender, EventArgs e)
        {
            if (Wizard1.ActiveStepIndex == 2)
            {
                string strSummary = "You have Entered: <br/>";
                strSummary += "Your Name: " + txtName.Text.Trim() + "<br/>";
                strSummary += "Your Address: <br/>";
                strSummary += txtAdd1.Text.Trim() + "<br/>";
                strSummary += txtAdd2.Text.Trim() + "<br/>";
                strSummary += txtAdd3.Text.Trim() + "<br/>";
                strSummary += txtAdd4.Text.Trim() + "<br/>";
                lblSummary.Text = strSummary;

            }
        }
    }

     

    let me know if you need further assistance..

    hope it helps./.

     

    "I would love to change the world, but they won’t give me the source code"

    KaushaL || BLOG || Profile || SEO Tips
  • 07-04-2008 2:37 PM In reply to

    Re: Creating three step wizard page

    Great Kaushal, thanks a lot. I'll get back to you if i need anything else. 

    Eat till live.
    Filed under: ,
Page 1 of 1 (3 items)