CodeSnip: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x.
 
Published: 02 Feb 2005
Unedited - Community Contributed
Abstract
The puropose of this tutorial is to show you how to create the functionality of the .NET 2.0 Wizard Control using the .NET 1.x Framework.
by Tom Blanchard
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 27408/ 33

Getting Started

This article assumes that you have a basic understanding of ASP.NET, C#, CSS, and Visual Studio.

These days people are longing for the wizard functionality of many of Microsoft’s applications in their web applications. This functionality is included in the .NET framework 2.0, but what if you are using the .NET 1.x Framework?

The wizard functionality can be achieved using current 1.x controls with a little extra coding. It is not at all complicated. Using the Panel control, a style sheet, and some link button controls, you can create very nice “wizard style” functionality with your current platform.

First, you will want to create a new C# ASP.NET project in Visual Studio.

 

We will call this project "Wizard".

Next, make sure to add a stylesheet to your project.

Creating the Style Sheet

Add a new Style Sheet item to your project.

Add the following to your stylesheet:

body
{
 font-family: Arial, Verdana, Sans-Serif;
 font-size: 12pt;
}
.IntPanel
{
  border-right: #033893 1px solid;
  table-layout: fixed;
  padding-right: 0px;
  border-top: transparent 0px solid;
  padding-left: 0px;
  padding-bottom: 0px;
  border-left: #033893 1px solid;
  width: 100%;
  padding-top: 0px;
  border-bottom: #033893 1px solid;
  border-collapse: collapse;
  height: 100%;
}
.IntPanelTab {
   padding:0px;
   font-size: 10px;
   vertical-align: middle;
   width:100%;
}
.IntPanelTab .On {
  background-color: White;
  border-right: #033893 1px solid;
  padding-right: 0px;
  border-top: #033893 1px solid;
  padding-left: 0px;
  padding-bottom: 0px;
  border-left: #033893 1px solid;
  padding-top: 0px;
  border-bottom: transparent 0px solid;
  height: 24px;
  width:100%;
  border-collapse: collapse;
  vertical-align: middle;
  text-align:center;
  color:black;
  text-decoration:none;
  font-weight: bold;
  letter-spacing: 1px;
}
.IntPanelTab .Off {
  background-color: #D9EAFD;
  border-right: #033893 1px solid;
  padding-right: 0px;
  border-top: #033893 1px solid;
  padding-left: 0px;
  padding-bottom: 0px;
  border-left: #033893 1px solid;
  padding-top: 0px;
  border-bottom: #033893 1px solid;
  height: 24px;
  width:100%;
  border-collapse: collapse;
  vertical-align: middle;
  text-align:center;
  text-decoration:none;
  color:#000B6E;
  font-weight: bold;
  letter-spacing: 1px;
}

Working in the Web Form

Open up your web form and add the style sheet to the head section of your web form.

<LINK href="wizardstyles.css" type="text/css" rel="stylesheet" />

Now we will start working on the wizard.  First, add a table with two rows into your form.

<table cellpadding=2 cellspacing=2 width=350>
 <tr>
  <td>
  </td>
 </tr>
 <tr>
  <td height=350>
  </td>
 </tr>
</font><font face="Arial" size="2"></table>

In the top row, add a table and a cell for each link button control for how many steps there will be in your wizard.  Assign the CSS class of IntPanelTab to the table.  I am going to go with 4 steps here.

<table class="IntPanelTab" cellSpacing="0" cellPadding="0">
 <tr>
 <td><asp:linkbutton id="lbStep1" runat="server" CausesValidation="False">Step 1</asp:linkbutton></td>
 <td><asp:linkbutton id="lbStep2" runat="server" CausesValidation="False">Step 2</asp:linkbutton></td>
 <td><asp:linkbutton id="lbStep3" runat="server" CausesValidation="False">Step 3</asp:linkbutton></td>
 <td><asp:linkbutton id="lbStep4" runat="server" CausesValidation="False">Step 4</asp:linkbutton></td>
 </tr>
</table>

Make sure that CausesValidation="False" is on all of your link buttons; otherwise, you will find yourself very frustrated with your wizard if you are using validator controls.

In your bottom table row, put a table inside and assign the CSS class of “IntPanel” to it. Inside this table, put a panel for each of your steps with a table inside of it for nice formatting of your form elements. Once again, I will use 4.

<asp:panel id="pnl1" Runat="server">
 <TABLE width="100%">
  <TR>
   <TD align=right>
   </TD>
   <TD>
   </TD>
  </TR>
 </TABLE>
</asp:panel>

Working in the Web Form (Cont'd.)

Now you can add your controls to the form:

<asp:panel id="pnl1" Runat="server">
<TABLE width="100%">
 <TR>
  <TD align=right>input 1:</TD>
  <TD><asp:TextBox id="textbox1" Runat="server"></asp:TextBox></TD>
 </TR>
</TABLE>
</asp:panel>

I just added a text box to each step for the wizard, but you can add as many different controls as you like.  I will add a save button on step 4.

<asp:panel id="pnl4" Runat="server">
 <TABLE>
  <TR>
   <TD align="right">input 4:</TD>
   <TD><asp:TextBox id="TextBox4" runat="server"></asp:TextBox></TD>
  </TR>
  <TR>
   <TD align="right" colSpan="2">
    <asp:Button id="cmdSave" runat="server" Text="Save"></asp:Button>
   </TD>
  </TR>
 </TABLE>
</asp:panel>

That will allow the user to save the values once they have reached step 4. Your form will now appear like this in design view.

Working in the Code-behind File

In your code-behind file, add the following in the Page.Load method.

private void Page_Load(object sender, System.EventArgs e)
  {
   if(!Page.IsPostBack) {
    lb1.CssClass = "On";
    lb2.CssClass = "Off";
    lb3.CssClass = "Off";
    lb4.CssClass = "Off";
    pnl1.Style.Add("display", "inline");
    pnl2.Style.Add("display", "none");
    pnl3.Style.Add("display", "none");
    pnl4.Style.Add("display", "none");
   }
  }

This will show the first step when the page loads and all of the others will be hidden.  Double-click each link button and add the following code to their click event handlers:

private void lb1_Click(object sender, System.EventArgs e)
  {
   lb1.CssClass = "On";
   lb2.CssClass = "Off";
   lb3.CssClass = "Off";
   lb4.CssClass = "Off";
   pnl1.Style.Add("display", "inline");
   pnl2.Style.Add("display", "none");
   pnl3.Style.Add("display", "none");
   pnl4.Style.Add("display", "none");
  }
  private void lb2_Click(object sender, System.EventArgs e)
  {
   lb1.CssClass = "Off";
   lb2.CssClass = "On";
   lb3.CssClass = "Off";
   lb4.CssClass = "Off";
   pnl1.Style.Add("display", "none");
   pnl2.Style.Add("display", "inline");
   pnl3.Style.Add("display", "none");
   pnl4.Style.Add("display", "none");
  }
  private void lb3_Click(object sender, System.EventArgs e)
  {
   lb1.CssClass = "Off";
   lb2.CssClass = "Off";
   lb3.CssClass = "On";
   lb4.CssClass = "Off";
   pnl1.Style.Add("display", "none");
   pnl2.Style.Add("display", "none");
   pnl3.Style.Add("display", "inline");
   pnl4.Style.Add("display", "none");
  }</font>


<font face="Arial" size="2">  private void lb4_Click(object sender, System.EventArgs e)
  {
   lb1.CssClass = "Off";
   lb2.CssClass = "Off";
   lb3.CssClass = "Off";
   lb4.CssClass = "On";
   pnl1.Style.Add("display", "none");
   pnl2.Style.Add("display", "none");
   pnl3.Style.Add("display", "none");
   pnl4.Style.Add("display", "inline");  
  }

Now, you can build your project and view your webform in your browser by going to http://localhost/Wizard/WebForm1.aspx.

It should appear like this:

web page

You have now created a simulated wizard control in ASP.NET 1.x. Enjoy!



User Comments

Title: Nice Job   
Name: Manish Jadhav
Date: 2008-03-11 1:20:42 PM
Comment:
That was a nice article. Thanks.
Title: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x   
Name: Honey
Date: 2006-09-04 4:16:01 AM
Comment:
This is very helpful and excellent article
Title: CodeSnip: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x.   
Name: Brian Law
Date: 2005-03-22 2:37:11 PM
Comment:
Thx~....Your guide is cool..I've modify your guide and successfully create a Prev Next Wizard base on your tutorial.
Title: < Prev Next>   
Name: Tom Blanchard
Date: 2005-03-15 5:30:03 PM
Comment:
Manish, I will be adding some more articles in relation to this one very soon. The next one I was planning was on how to handle this behaviour client side.

I will take your idea under consideration and maybe do a third one that contains and idea for that, as well as, building the interface from a database query.

Tom
Title: CodeSnip: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x.   
Name: Manish Jadhav
Date: 2005-03-15 5:17:59 PM
Comment:
Nice article.
Do you have any sample that demonstrates the "Next" & "Previous" kind of wizard interface?

- Manish Jadhav
Title: CodeSnip: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x.   
Name: Mark Priestap
Date: 2005-02-21 10:01:44 AM
Comment:
This was a brilliant article.
Title: CodeSnip: Simulating the ASP.NET 2.0 Wizard Control with ASP.NET 1.x.   
Name: Simon
Date: 2005-02-02 3:14:38 PM
Comment:
This was a brilliant article. Thanks for the great details.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 5:31:15 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search