Building Easy Navigation Using the ASP.NET 2.0 MultiView and Wizard Controls

Oct 12, 11:00 pm

Article Author: Kuldeep Deokule
.NET 3.5 Books

Introduction


In ASP.NET 1.x it was not easy to build a wizard style application. A previous article on ASP Today by Alex Homer shows how to build wizards in ASP.NET 1.x. In early versions of ASP.NET, developers were required to write a lot of code in order to hide and show panel controls with each step. Developers needed to add logic so that the correct panel would be displayed at the correct time. ASP.NET 2.0 has minimized this headache by introducing two new navigation controls, namely the MultiView and Wizard controls. Both the MultiView and Wizard controls do not add much functionality from the user perspective, but from a development perspective there is a tremendous amount of functionality and code reduction.


Why are Wizard or Multiview-Type Applications Required?


Often times the end users become frustrated if they need to scroll down a page in order to see all the required information. So in order to create a user friendly web application, developers often break a single large page in smaller tasks or steps. First the steps are categorized and then an order is determined. When performing tasks, whether linear or nonlinear, the web page is divided into several meaningful steps to make the user interface manageable for the user. This is where the MultiView and Wizard control can really help in making an application user friendly.


A MultiView control allows you to have multiple View controls. The Wizard control allows other web controls to be placed within each WizardStep. For a MultiView control you will need to design your own navigation to switch between the different View controls thus allowing a lot of flexibility in the navigation. The Wizard control is more straightforward as it automatically provides navigation between the different steps.


I’ll explain the features of the MultiView and Wizard controls using an Online Survey and User Registration web application respectively. The sample also makes use another new concept in ASP 2.0, master pages.


Before delving into the code, I want to provide a quick overview of these three new features:


Master Pages


A master page is a page template used to define the fixed content for an entire site as well as placeholders that can be used to insert custom content. Master pages are useful to maintain a consistent look and feel for a web site. Master pages provide a mechanism to standardize a web user interface layout. Master pages allow visual inheritance thus making them very easy to use. To learn more about master pages please see the related links for this article.


MultiView Control


The MultiView control is new navigation control that contains several View controls inside itself. You can place controls from the Toolbox on View controls, like text boxes, radio buttons, gridviews, etc. By using a MultiView control the end user can see only one view at a time. The MultiView control is easier to manage than the panel control used in ASP.NET 1.x. At the time of design, all the View controls present in the MultiView control are displayed in design mode. You can drag and drop a MultiView control from the toolbox to work with it or alternatively you can use the <asp:Multiview> tag. After placing a MultiView control on a web page in design mode, you need to add View controls as per your requirement. You can drag and drop View controls on web page in design mode or use the <asp:View> tag. I’ll explain the use of the MultiView control by demonstrating an Online survey application further in the article.


Wizard Control


The MultiView and the Wizard control provide the same basic functionality to the end user .The Wizard control offers a richer UI than the MultiView control. By default the Wizard control includes a side bar, and Next, Previous and Finish buttons. A side bar is included to navigate among the various steps in the Wizard control. In Design mode you can view only one step at a time, you can add or remove steps within the Wizard control. To place controls in the wizard steps, in Visual Studio, you should click on the relevent step in the side bar in design mode. Then that step will appear in the main window. You can now place the controls on that step. You can also customize the default look of a Wizard control by modifying existing templates. I’ll explain the use of the Wizard control by demonstrating User Registration application.


System Requirements


In order to run the sample code you should have the following:


  • A web server running Windows 2000, XP or 2003 with the .NET 2.0 Framework installed

  • Microsoft Visual Studio 2005 or Web Developer Express Edition

  • Microsoft Internet Explorer 5.5 or higher

Installing and Compiling the Sample Code


The sample download for this article contains a VS 2005 Website project named MultiViewnWizard.


To install the sample:


  1. Unzip the sample code zip file to a folder on your web server

  2. In VS 2005 from the top menu, select File -> Open Website

  3. Select the folder you unzipped the download to and you will be able to run the sample

Master Page Design


The goal of using a master page is to allow a consistent look to the entire web site. Figure 1 shows the master page I created for the sample applications. In the master page I’ve added a title for the website as Develoepr2Developer, two LinkButton controls, and a footer message. You can find code for this master page inside the downloaded project files.



NOT VALID: ImageTooWide: The Master Page design
This figure has been reduced in size to fit in the text. To view the full image Click here


Now that I have a master page ready for use, how do I actually make use of it in the sample application? This can be accomplished by selecting the Select Master Page checkbox in the Add New Item window when adding a new page. Then select Master Page from the Select a Master Page window for current web page and click Ok. Alternatively you can right-click the master page in the Solution Explorer and select Add Content Page.


In this way a master page for a current content page can be selected. When marking a page as using a master page some new attributes are added in the Page tag.



<%@ Page Language="VB" MasterPageFile="~/MnWMasterPage.master" 
  AutoEventWireup="false" CodeFile="Survey.aspx.vb" Inherits="Survey" 
  title="Online Survey" %>


MasterPageFile is the name of the Master Page file and the Title is given to specify the content page’s title.


You can also override HTML header attributes as well. To change the master HTML attributes from the content page, use following syntax:



Master.Page.Header.Attributes.Add("keywords", 
  "online survey, asp.net, MultiView, ASPToday")


By using syntax above you can also override other HTML header attributes such as the description as needed. The keywords and description tags are important for search engine robots.


Using the MultiView Control


In this section I’ll give you some of the more commonly used properties and events for the MultiView control. Then I will build an example using the MultiView control.


Properties of MultiView Control


  • ActiveViewIndex – By default the value for this property is -1. To show the first View in a MultiView control, set the ActiveViewIndex property to 0. You can also retrieve the current View number by accessing the same property.

  • Views – This is a collection of Views added to a MultiView control. The Count property of this collection returns the total number of views present inside the MultiView control.

It is not possible to assign the same ID to controls present inside two different Views within a MultiView control. Each control name needs to be unique across all Views. Data inside the Views is retained within the view state, which makes it a pretty heavy option. This control needs to be used with caution since the page sizes can become fairly large if there are a lot of Views with lot of controls on them. The MultiView control does not provide any navigation buttons directly. You will need to place a command button for navigation purposes on your own.


Event of MultiView Control


There is only one important event present for the MultiView control:


ActiveViewChanged – This event fires when the active View is changed.


Next I will take what I have shown about master pages and the MultiView control to build a sample application based around an Online Survey web application.


The Online Survey


Now it is time to start the actual design of the Online Survey application. The Online Survey application is divided into four steps.


  • The first step is designed to accept personal information from the user.

  • In the second step the user selects their favorite programming language

  • In the third step the user selects their favorite organization.

  • In the fourth step, the data that was entered by the user in the previous steps is shown back to the user.

Currently I am not using a database to store that information, but in a real world scenario you’ll most likely be required to save the data entered by the user. Figure 2shows an example of the Online Survey application.



NOT VALID: ImageTooWide: The Online Survey web application using a MultiView control
This figure has been reduced in size to fit in the text. To view the full image Click here


Next I’ll show you how to design the actual application using the MultiView control. Start by dragging and dropping a MultiView control from the Toolbox onto a web page in design mode. After placing the MultiView control on the web page, you’ll need to add a View control. So select the View control form the Toolbox and drop it onto the MultiView control. If you place the View control outside the MultiView control then an error will shown in design view with the message a control of type ~View’ can only be placed inside a control of MultiView.


To add more Views simply repeat the drag and drop operation for the additional View controls. If you want to build three steps to accept user entry then put three View controls inside the MultiView control. In the VS 2005 designer, each View is displayed one below other. Figure 3 shows a detailed representation of the MultiView and View controls within the VS 2005 IDE.



NOT VALID: ImageTooWide: Design view of the Online Survey application
This figure has been reduced in size to fit in the text. To view the full image Click here


As I mentioned previously, the first View control collects personal information from the end user, so I placed three labels and three textboxes inside this View control to accept the user’s First Name, Last Name and Email Id. In the second View I placed three radio button controls titled as VB, C# and Java. This View helps the end user to select their language. The third View has three radio button controls titled as Microsoft, Sun Microsystems, and IBM. In this step the user selects his organization. The last View displays all the data entered/selected in the survey by the user. So I placed five label controls and textboxes to display the information in this control. So finally, the Online Survey web application contains a total of four View controls inside a single MultiView control.


Now everything from the data entry perspective is ready, but how do you navigate amongst the different Views? With a MultiView control you are required to add command buttons (or another control) in order to provide navigation to the user. For the sample application, I’ll simply place command buttons on all the Views. The first View control will contain only one button control titled Next. The next two Views will require two command button controls to navigate back and forth. The last View will require only one command button control to move back.


For navigation purpose you can also use ImageButton or LinkButton controls instead of the Button control. You are also required to set the CommandName property of each Button control to one of a number of possible values. By setting this property, the button automatically gets the functionality for moving to the next and previous views.


Following is a list of command names that can be assigned to the CommandName property of a Button control:



















Command NameUse
NextViewNavigate to the next view in a MultiView control.
PrevViewNavigate to the previous view in a MultiView control.
SwitchViewByIDNavigate to the View with the specified ID, which is set in the CommandArgument property of the Button control.


CommandArgument is set to the ID of the View control. For example if View1 is an ID then, CommandArgument="View1".
SwitchViewByIndexNavigate to the View with the specified zero-based index, which is set in the CommandArgument property of Button control. The CommandArgument is set to the index position of the View control. For example if the index of 1 is the position for View2 then, CommandArgument="1".



NextView and PrevView moves back and forth in sequence order. By contrast you can use the SwitchViewByID or SwitchViewByIndex command names to jump from any view to any other view present in the MultiView control according to the ID or index value. .



<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  <asp:View ID="View1" runat="server">
  …
  </asp:View>
  <asp:View ID="View2" runat="server">
  …
  </asp:View>

</asp:Multiview>


The <asp:MultiView> and <asp:View> tags are added in the ASP.NET markup. Each <asp:View> tag denotes a separate view. I’ve shown HTML code for only 2 of the Views above. The full code is present in the code download file.


By default the ActiveViewIndex property of the MultiView control is set to -1. Since there is no View that has an index of -1 nothing will be displayed at startup. So the first thing that needs to be done is to set the ActiveViewIndex property of the MultiView control to 0 in order to initially make the first View visible. Now you can take a look at all the Views one by one in the browser using the command buttons to navigate. Figure 4 shows the first view in the Online Survey application.



Figure 4. Online Survey application “ View 1


In Figure 4the user will enter their personal information and then press the Next button to move onto the next step. After pressing the button the second View will be displayed on same page at the position of first View. Figure 5 shows the second view.



Figure 5. Online Survey application “ View 2


In Figure 5 the user selects his favorite language. In this View, the user has the option to navigate back to the previous View as well as to the next View. This navigation is provided through the CommandName property as discussed previously. Clicking on the Next button will move on to the next View as shown in Figure 6.



Figure 6. Online Survey application “ View 3.


In the third View the user selects his favorite organization and ideally presses the Finish button. I put in special code for the Finish button’s click event. So when the user clicks the Finish button, the following code block will be executed.



Partial Class Survey
  Inherits System.Web.UI.Page
  Protected Sub btnFinish_Click(ByVal sender As Object, 
  ByVal e As System.EventArgs) Handles btnFinish.Click
    lblFirstName.Text = txtFirstName.Text
    lblLastName.Text = txtLastName.Text
    lblEmailId.Text = txtEmail.Text
    If rdoVB.Checked Then
      lblLanguage.Text = "VB"
    ElseIf rdoCSharp.Checked Then
      lblLanguage.Text = "C#"
    ElseIf rdoJava.Checked Then
      lblLanguage.Text = "Java"
    End If
    If rdoMicrosoft.Checked Then
      lblOrganization.Text = "Microsoft"
    ElseIf rdoSun.Checked Then
      lblOrganization.Text = "Sun Microsystems"
    ElseIf rdoIBM.Checked Then
      lblOrganization.Text = "IBM"
    End If
  End Sub

End Class


The purpose of the code block above is to gather the information entered by user in each of the View controls and display it in the form of a summary. In a real world application you would often store this information into a database at this point for further processing at a later date.


Since the data for each View is stored in the view state of the page, it is easily available by accessing the Text property of the TextBox control and Checked property of RadioButton control. As you access the controls placed on a web page, you can in a similar way access the controls inside the MultiView control. A MultiView control is not a separate container, so you cannot assign the same ID for more than one control even if it is present within a different View control.


Figure 7 shows the final output of the Online Survey application. Data entered and selected by the user in previous Views is displayed in the last View within the MultiView control.



Figure 7. Online Survey application “ View 4


Overview of the Wizard Control


In this section I’ll go over the important properties of the Wizard control. As I mentioned in the introduction, the Wizard control provides a rich UI, by default adding a side bar, Next, Previous and Finish buttons. In the MultiView control separate View controls are present for each step whereas the Wizard control contains multiple WizardSteps. In design mode the Wizard control shows only one step at a time whereas the MultiView control shows all the View controls present inside it. By clicking on side bar of the Wizard control you can navigate to the other steps in designer mode within VS 2005.


Important Properties of Wizard Control:


  • ActiveStepIndex – By default, the value for this property is the current step in design view. So if you run the web page, you’ll find the current step will be rendered on the page. To show the first step in the Wizard control, you should set the ActiveStepIndex property to 0 in the page load event.

  • DisplaySideBar – This property is used to turn on or off the link on the side that is present in the Wizard control. You can hide this side bar by setting this property to False. The default setting is True.

  • DisplayCancelButton – If you want give the user the ability to cancel the wizard then set this property to True. In this case the Cancel button will be displayed on every wizard step. To handle the click event of the Cancel button, a manual code addition is required in the CancelButtonClick() event of the Wizard control.

Important Events of Wizard Control:


  • ActiveStepChanged. Similar to the ActiveViewChanged of the MultiView control. This event is raised when a step is changed within the Wizard control.

  • SideBarButtonClick. This event is raised if any link present on side bar is clicked.

  • PreviousButtonClick. Raised when the Previous button is pressed.

  • NextButtonClick. Raised when the Next button is pressed.

  • FinishButtonClick. Raised when the Finish button is pressed.

  • CancelButtonClick. Raised when the Cancel button is pressed.

The User Registration Web Page


In this section I will put to use the information I just presented about the Wizard control. You could create this same functionality with a MultiView control, but it would require additional work. The Wizard control provides you a ready made rich user interface. In a MultiView control you have to manually add buttons to navigate from one view to other view. But the Wizard control provides you a side bar, and by clicking on links in side bar, you can move to different steps in the wizard. With the Wizard control you can add multiple steps by accessing the Wizard control’s smart tag. From the smart tag menu of the Wizard control just click "Add/Remove WizardSteps". By pressing on Add and Remove buttons in the Wizard Collection Editor, you can add multiple steps to Wizard control.


In this example, as for the Online Survey web application, I’ll display data entered by user in a Wizard step at the end of Wizard’s completion.


Figure 8shows an example of the User Registration application.



NOT VALID: ImageTooWide: User Registration application
This figure has been reduced in size to fit in the text. To view the full image Click here


The Wizard control does not show all the steps in the Visual Studio designer at one time, it only shows the current step. The current active step in designer view becomes the active step in runtime as well. So it is quite important to set ActiveStepIndex property of the Wizard control to zero in the page load event. Just like you placed the various controls on each View control, you can place controls on each step of the Wizard control. Figure 9 displays the design time view of the Wizard control.



NOT VALID: ImageTooWide: Design view for the User Registration application
This figure has been reduced in size to fit in the text. To view the full image Click here


Each <asp:WizardStep> tag denotes a separate step. As you add wizard steps, an <asp:WizardStep> tag will be added to HTML portion and vice versa. I’ve shown HTML code for only two Wizard steps below. The full code is present in the code download file.



<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" Height="147px"
  Width="604px" Font-Names="Verdana" Font-Size="Smaller">
  <WizardSteps>
    <asp:WizardStep runat="server" StepType="Start" Title="Personal
      Information">


    </asp:WizardStep>
    <asp:WizardStep runat="server" Title="Registration Details">

    </asp:WizardStep> 
…. <!— etc.  Remaining steps here in the full code —>
</asp:Wizard>


The User Registration application’s Wizard control contains 4 steps, namely Personal Information, Registration Details, Newspapers and fourth step will show the data entered by user in the previous steps. You can also specify the StepType in the WizardStep tag. According to the StepType value, the Wizard control will show navigation buttons to the end-user. For example, if the value for StepType is set to Start, then only the Next button will be shown to user. Following are the various StepType‘s available for WizardStep:


  • Start. Shows only the Next button.

  • Step. Shows both Previous and Next buttons.

  • Finish. Shows the Previous and Finish buttons.

  • Complete. No button is displayed and the side bar is also absent.

In the Personal Information step, I included textboxes and labels to accept information for First Name, Last Name and Email ID. Figure 10 shows a runtime version of the first wizard step.



NOT VALID: ImageTooWide: User Registration application “ Step 1
This figure has been reduced in size to fit in the text. To view the full image Click here


After entering the information, the user presses the Next button. Remember the user can also click the link present on side bar to jump around to different steps. If your application requires a step-by-step linear navigation approach then you can hide the side bar by setting DisplaySideBar property of Wizard control to False. In the Registration Details step I added textboxes and labels to accept information for the User Name and Password as shown in Figure 11.



NOT VALID: ImageTooWide: User Registration application “ Step 2
This figure has been reduced in size to fit in the text. To view the full image Click here


Now by using the Previous and Next buttons, the user can navigate back and forth within the Wizard control. I’ve not applied any special formatting or code to Wizard control. But you can use the AutoFormat feature available through smart tag of wizard control to set a formatting style for the Wizard control.


The Newsletters step consists of three radio buttons to determine the frequency the user wishes to receive a newsletter as shown in Figure 12.



NOT VALID: ImageTooWide: User Registration application “ Step 3
This figure has been reduced in size to fit in the text. To view the full image Click here


In this step, instead of having a Previous and Next buttons, a Finish button is presented with a Previous button. This wizard step has a StepType attribute is set to Finish. For the final step I want to gather up the information the user has entered and present it back to the user. So when he clicks the Finish button the page executes the following code found in the Wizard1_FinishButtonClick() event.



Partial Class Registration
  Inherits System.Web.UI.Page
    Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object,
      ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) 
      Handles Wizard1.FinishButtonClick
    lblFirstName.Text = txtFirstName.Text
    lblLastName.Text = txtLastName.Text
    lblEmailId.Text = txtEmail.Text
    lblUserName.Text = txtUserName.Text
    If rdoDaily.Checked Then
      lblNewsletters.Text = "Daily Updates"
    ElseIf rdoWeekly.Checked Then
      lblNewsletters.Text = "Weekly Summary"
    ElseIf rdoNoThanks.Checked Then
      lblNewsletters.Text = "No Thanks"
    End If
  End Sub

End Class


When the above code is executed, the user will see the output as shown in Figure 13. This contains all information entered or selected by user in previous three steps.



NOT VALID: ImageTooWide: User Registration application “ Step 4
This figure has been reduced in size to fit in the text. To view the full image Click here


Just as you set template fields for controls like GridView, FormView, you can also set various templates for the Wizard control. Following are the names of templates available for the Wizard control:


  • HeaderTemplate

  • StartNavigationTemplate

  • StepNavigationTemplate

  • FinishNavigationTemplate

  • SideBarTemplate

Templates are useful to set various custom styles for Wizard control.


Conclusion


In this article I’ve explained how the MultiView and Wizard control are preferred instead of using the ASP.NET 1.x panel control technique. In ASP.NET 1.x it was bit difficult to manage a large number of panels. With even a small mistake there was a chance to display the wrong panel or display two panels at the same time. Also I focused on important events and properties of both controls. The difference between the MultiView and Wizard control is also explained. A sample application was also provided that shows the difference between the two controls.

Permanent Link
by Feature Articles
Founders at Work

Commenting is closed for this article.