ASP.NET TabbedWizard Control (Putting It All Together)

1. Put the ff in your VS2005 web site/application project:
- TabbedWizardBase.cs
- WizardBasePage.cs
- TabbedWizardEnumsAndConstants.cs
- alternately, you can download the zip file here in my MSN group. (Unfortunately, you can not upload a file in a blog. Membership might be required to access it)
2. Create an "images" subfolder and put all your images there
3. Add a Web User control (say, MyTabbedControl) in your project. This will be the visible portion of your tab control.
- Inherit it from TabbedWizardBase as in the code below.


Change the ff line:

public partial class MyTabbedControl : System.Web.UI.UserControl

to:

public partial class MyTabbedControl : TabbedWizardBase

- Add ImageButtons to this control. These will be the individual tabs.
- Set the ImageURL properties of the ImageButtons.

4. Set the Click event handler of each ImageButtons to Menu_Click.
- This will create an event handler code in your control's code behind.
- Call base.Menu_Click(sender, e) inside this event handler.
- Note: Menu_Click is already created in the TabbedWizardBase class.

5. Implement the abstract functions from TabbedWizardBase. At the end of these steps, you should have something like this:

protected override void ResetMenuImagesToDisabled()
{
//reset all your ImageButtons' ImageUrl property to the corresponding images
// that represents their disabled state.
//This is being called by TabbedWizardBase
//during the click event of the ImageButton.
}

protected override void SetActiveImageByImageID(string imageID)
{
//Set the active ImageButton based on its ID
//This is being called by TabbedWizardBase
//during the click event of the ImageButton
//and the FinishButtonClick event of the Wizard.
}

protected override void SetActiveImageByIndex(int index)
{
//Set the active ImageButton based on its 0-based index
//This is being called by TabbedWizardBase
//during the click event of the ImageButton
//and the FinishButtonClick event of the Wizard.
}

protected override ImageButton GetDefaultTabButton()
{
//Return the default ImageButton.
//This is being called by TabbedWizardBase
//during the FinishButtonClick event of the Wizard.
//return imgPersonalInfo;
}

protected void Menu_Click(object sender, ImageClickEventArgs e)
{
base.Menu_Click(sender, e);
}

6. Add a web form to your project and inherit it from WizardBasePage.

public partial class _Default : WizardBasePage

7. Add the web user control you created above to this page. For this sample, we assume it is named MyTabbedControl1.

8. Implement the GetTabbedWizardBase function in your code behind.

protected override TabbedWizardBase GetTabbedWizardBase()
{
return MyTabbedControl1;
}

9. Implement the other abstract functions and properties from WizardBasePage. At the end of these steps you should have something like this.

protected override TabbedWizardBase GetTabbedWizardBase()
{
return MyTabbedControl1;
}

public override Wizard Wizard
{
get { return Wizard1;}
set { Wizard1 = value; }
}

public override bool ValidateThis(WizardNavigationEventArgs e, bool eventSourceIsSidebarButton)
{
//1. Do your validation of the individual wizard steps here;
//ValidateSteps(e);

//or you can always return true here if you don't need to validate the individual tabs

//2. Check for IsValid
if (!IsValid)
{
e.Cancel = true;
return false;
}
else
{
return true;
}
}

public override void FinishButtonClickFinalize(object sender, WizardNavigationEventArgs e)
{
//FinishButtonClick is being handled by the TabbedWizardBase class
//Add steps here if you want to do additional
//operations after that.
//This might include email sending, logging, etc.
}

10. Add a Wizard control on your page and configure it as you normally would. We assume it is named Wizard1.
- Recomendations for StepType property:
- First Step: Start
- Last Step: Complete
- 2nd to the last step: Finish
- The rest of the steps: Step
- Optionally, you can disable the SideBar from showing by setting the DisplaySideBar to False.

11. Include the ff in your web.config file's appSettings section. Modify the entry to fit your project.
<!--
Notes:
1. TabImageButtonID = 0-Based
2. The ID of the ImageButton should be prefixed by "img"
3. The location of the ImageButton images should be in the "images" subfolder
4. Sample Tab Control:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px; height: 27px;">
<asp:ImageButton ID="imgPersonalInfo" runat="server" ImageUrl="~/images/personalInfo.gif"
OnClick="Menu_Click" /></td>
<td style="width: 100px; height: 27px;">
<asp:ImageButton ID="imgMajorIssues" runat="server" ImageUrl="~/images/majorIssues_disabled.gif"
OnClick="Menu_Click" /></td>
<td style="width: 100px; height: 27px;">
<asp:ImageButton ID="imgComplaintDetails" runat="server" ImageUrl="~/images/complaintDetails_disabled.gif"
OnClick="Menu_Click" /></td>
<td style="width: 100px; height: 27px;">
<asp:ImageButton ID="imgContactInfo" runat="server" ImageUrl="~/images/contactInfo_disabled.gif"
OnClick="Menu_Click" /></td>
</tr>
</table>
5. Range of TabImageButtonID and WizardStepID = 0 to 10
6. The step for WizardCompleteStepID is normally not visible to the user
-->

<add key="TabImageButtonIDDefault" value="imgpersonalinfo"/>
<add key="TabImageButtonID0" value="imgpersonalinfo"/>
<add key="TabImageButtonID1" value="imgmajorissues"/>
<add key="TabImageButtonID2" value="imgcomplaintdetails"/>
<add key="TabImageButtonID3" value="imgcontactinfo"/>
<add key="VisibleTabCount" value="4"/>

<add key="WizardStepID0" value="WizardStep1"/>
<add key="WizardStepID1" value="WizardStep2"/>
<add key="WizardStepID2" value="WizardStep3"/>
<add key="WizardStepID3" value="WizardStep4"/>
<add key="WizardCompleteStepID" value="WizardComplete"/>

-Note: if the last wizard step's StepType property is set to "Complete", that's not part of the number of steps indicated in the VisibleTabCount value in the web.config file. So if you have a value of 4 in the VisibleTabCount, you must have 5 wizard steps (the last one of steptype "Complete").