The ASP.NET MultiView Control

Have you ever wondered a way in which you can have a long form broken into wizards so that the user navigates step after step without placing contents in different files ?
Microsoft included an easy to use controls to solve this kind of problem. In fact, we can do this by using ordinary html server controls like using different  <div runat="server"></div> tags for different parts of our long form or <asp:Panel> just by making one panel visible and the rest invisible. But as we said Microsoft ASP.NET includes web controls especially designed for this purpose (MultiView and Wizard controls). Let us see how to use MultiView web control to divide a long form. Suppose you are developing registrar web portal for certain university, let us say University of Hargeisa (UoH). The student registration form of UoH is composed of at least three pages.Certainly you don't want to put this pages in different files if you can do this is some other way round.

Start:
Open your web developer (assuming that you've installed at least the free Web Developer Express edition)
if you don't have one go to this Microsoft official link and download it for free Visual Web Developer 2010 Express.
 Go to File>New Website, a default.aspx template page will be added to your new website.
 Go to Source view of the page, put your cursor in between the opening and closing tags of the form tag.
and type:

<asp:MultiView ID="MultiView1" runat="server">

   

</asp:MultiView>

Now you have added the MultiView web control but the different views(steps) not added yet so you may ask, what is the job of MultiView then ? It is purpose is just to keep the rule: no two views shall be visible at the same time, only one is allowed to be active. To add views we need to add another control known as View which serves as the step for our wizard. So put your cursor between the opening and closing tags of the above MultiView control and type three times of the following content:

 

<asp:View ID="View1" runat="server">

       

</asp:View>

Your  Mutliview with the Views should look like this:

<asp:MultiView ID="MultiView1" runat="server">

   

        <asp:View ID="View1" runat="server">       

        </asp:View>

       

        <asp:View ID="View2" runat="server">

        </asp:View>

       

        <asp:View ID="View3" runat="server">

        </asp:View>

  </asp:MultiView>

Now in between the opening and closing tags of each View add the contents of one of the pages of the registration form. For instance, Page 1 content should be added to View1. Finally, your code should be similar (this is a model and necessarily is not reflecting your code) to this:

<asp:MultiView ID="MultiView1" runat="server">

   

        <asp:View ID="View1" runat="server">       

           UoH Registration Form<br />

            &nbsp;Page 1 of 3<br />

            <br />

            <b>Personal Information</b><br />

            <br />

            First Name:

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <br />

            Last Name:

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            <br />

            <asp:Button ID="Button2" runat="server" CommandName="NextView"

                Text="Next &gt;" />

        </asp:View>

       

        <asp:View ID="View2" runat="server">

            Page 2 of 3<br />

            <br />

            <b>Educational Background</b><br />

            <br />

            Last Institution Name:

            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

            <br />

            <asp:Button ID="Button3" runat="server" CommandName="PrevView"

                Text="&lt; Previous" />

            <asp:Button ID="Button4" runat="server" CommandName="NextView"

                Text="Next &gt;" />

        </asp:View>

       

        <asp:View ID="View3" runat="server">

            Page 3 of 3<br />

            <br />

            <asp:CheckBox ID="CheckBox1" runat="server"

                Text="I certify that the above information is correct " />

            <br />

            <asp:Button ID="Button5" runat="server" CommandName="PrevView"

                Text="&lt; Previous" />

            &nbsp;&nbsp;

            <asp:Button ID="Button6" runat="server" Text="Register Student" />

        </asp:View>

   

    </asp:MultiView>

 Now if you switch to the design view you would see the following design:

If you run your website at this point you will not be seeing any of these views. The reason is that MultiView control is not told yet which view to display by default. To do this set the ActiveViewIndex attribute of the MultiView control to 0 which means MultiView will be displaying the View with the index 0 at the first request of the page. After you add ActiveViewIndex attribute, the opening tag of the MultiView control should look like this:

 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

Now you are ready to run your website, press F5 or go to the menu  Debug > Start Debugging, click Ok for the message box that appears. The result should be this:

Click the Next > button. Yes ! It takes you to the next view and so forth. What happened is an interesting phenomenon. You may have expected a code behind for the button to navigate us to the next level but this is not the case. So what is the magic around ? Go back to the code and take a look at the declarations of the buttons, you'll see a new attribute known as CommandName set to NextView for Next buttons and PrevView for the Previous buttons. Cool, isn't it ? This attribute is available for all button types (i.e: Buttons, ImageButtons, LinkButtons).