In ASP.NET 2.0 Wizard control was one of the most innovative controls. The easy to configure template engine allows the developer to customize the control in few steps. One might think that creating a wizard control in ASP.NET MVC will be hard but in this article we will demonstrate how straight forward it is to build a wizard driven user registration page.

Why Use Wizard Control?

The wizard display is a personal preference and you can always choose the alternate route. Usually wizards are used in lengthy registration processes where you do not want to overwhelm the user with one big form.

Scenario:

To keep this article simple we will limit our self to implement only the navigation part of the wizard. In the next article we will focus on persisting user input and validation. Our navigation will be based on user's BasicDetails and the AddressDetails. Let's check out the implementation in the next section.

Implementing Basic Details View:

The BasicDetails view is responsible for asking the user for the FirstName and the LastName. The HTML for the view page is shown below:

  

One special thing to note about the above implementation is there is no "Action" specified for the Form. This indicates that the same action "BasicDetails" will be triggered when the form is submitted. Since, this is the first step in the registration process there is no back button for the view. The "Next" button is named "nextButton" which will be inserted in the FormCollection when the form is submitted.

The screenshot below shows the BasicDetails view page.



The RegisterController is responsible for handling all the requests related to registration view. The BasicDetails action is implemented below:

  

The BasicDetails action checks to see if the nextButton is triggered. If it is triggered it will contain a non null value and the user is sent to the "AddressDetails" view and the control is transferred to the AddressDetails action.

Implementing AddressDetails View:

The AddressDetails view is the second step in the user registration which allows the user to enter the information about fields related to the physical address. The HTML for the AddressDetails view is shown below:



Most of the code is similar to the BasicDetails except that the AddressDetails is accompanied with two buttons namely "nextButton" and "backButton". The AddressDetails action will be triggered when the form is submitted. The implementation for AddressDetails action is shown below:



In the above code we are making sure which button is pressed and taking appropriate action based on the result. If the backButton is pressed then we render the "BasicDetails" view. If the "nextButton" is pressed then we will render the "Confirm" view.

References:

1) Pro ASP.NET MVC Framework by Steven Sanderson

Conclusion:

In this article we learned how to build the navigation for the wizard control which is implemented using the ASP.NET MVC Framework. In the next article we will focus on persisting the state of user input between different steps and populating the domain model with the user input.

[Download Sample]