Articles → .NET → Multiview Control In Asp.Net

Multiview Control In Asp.Net

Few days back I was searching one job website and I have seen that the registration process of the website is a multistep process. The user will first enter the personal information, then on click of the next button the user navigates to the next page to fill the academic information and so on and finally there is a button called submit to create an account in the website.When the user clicks on submit the information gets saved into the database.

I was in an illusion that when the user clicks on next button the data gets saved into the database, but this illusion disappeared when I thought of the scenario in which after filling the personal details if the user closes the browser. The website may end up entering the orphan enteries.

But Microsoft had introduced one multiview control in .Net 2.0 from which you can handle this scenario with ease. In this tutorial we will discuss multiview control in ASP.NET

Prerequisite

Before reading this tutorial you should have

Visual studio 2005 (or higher versions of visual studio) should be installed on your machine.
Hands on experience in creating a web application.

Multiview Control

A multiview control consists of a collection of views. Inside a view we can place control (or collection of controls). When the user navigates between different views he gets the feeling that he is navigating between several pages.

You can think of multiview control as a container which contains multiple views.

Click to Enlarge

Syntax

<asp:MultiView ID="MULTIVIEW_ID" runat="server" ActiveViewIndex="0"><asp:View runat="server">
    <!-- Control or collection of controls -->
</asp:View>
<asp:View runat="server">
    <!-- Control or collection of controls -->
</asp:View>
<asp:View runat="server">
    <!-- Control or collection of controls -->
</asp:View></asp:MultiView>

In the syntax shown above we are declaring a multiview control and inside the control we have three views. We can add any number of views inside the control.

There is an attribute called ActiveViewIndex. This property is same as the SelectedIndex attribute in drop down list. You will know more about this attribute when we will work on a small example.

Example

<asp:MultiView ID="mvMyView" runat="server" ActiveViewIndex="0"><asp:View runat="server"><asp:Login runat="server"></asp:Login></asp:View><asp:View runat="server"><asp:CreateUserWizard runat="server"></asp:CreateUserWizard></asp:View><asp:View runat="server"><asp:ChangePassword runat="server"></asp:ChangePassword></asp:View></asp:MultiView><asp:Button ID="btnPrevious" runat="server" Text="<<" onclick="btnPrevious_Click" /><asp:Button ID="btnNext" runat="server" Text=">>" onclick="btnNext_Click" />

In this example we have one multiview control, inside the control we have three views. In the first view we have a login control. In the second view we have CreateUserWizard control and in the third view we have change password control. The value of ActiveViewIndex is 0(zero). It means that when the control is loaded for the first time the first view will be selected.

Note – you can take any number of views and any controls inside the views. This example is for demo purpose only.

There are 2 buttons for navigating to and fro between the views.

protected void btnPrevious_Click(object sender, EventArgs e) {
  if (mvMyView.ActiveViewIndex > 0) {
    mvMyView.ActiveViewIndex = mvMyView.ActiveViewIndex - 1;
  }
}
protected void btnNext_Click(object sender, EventArgs e) {
  if (mvMyView.ActiveViewIndex < 2) {
    mvMyView.ActiveViewIndex = mvMyView.ActiveViewIndex + 1;
  }
}

Here on click of previous button we are checking the value of ActiveViewIndex. If it is greater than zero then only decrement it. If the value is zero then it means we have view number one selected in the control.

In the same way we have next button to move to the next view. As we know that our sample multiview control contains only three views so the maximum value of ActiveViewIndex is two. So in the next button click we are checking if the ActiveViewIndex is lesser than two then increment it.

Now run the application you will see the first view i.e. the view contains the login control

Picture showing the first view of the multiview control

Click to Enlarge

Now click on next button the view with create user wizard will be shown in the control

Picture showing the second view of the multiview control

Click to Enlarge

Now click on next button again the final view contains the change password control will appear

Picture showing the third view of the multiview control

Click to Enlarge

Now on subsequent click of next button nothing will happen. In the same way when you click on previous button previous views will be shown in the control till the first view will be shown.

Aspx Code

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:MultiView ID="mvMyView" runat="server" ActiveViewIndex="0">
                    <asp:View runat="server">
                        <asp:Login runat="server"></asp:Login>
                    </asp:View>
                    <asp:View runat="server">
                        <asp:CreateUserWizard runat="server"></asp:CreateUserWizard>
                    </asp:View>
                    <asp:View runat="server">
                        <asp:ChangePassword runat="server"></asp:ChangePassword>
                    </asp:View>
                </asp:MultiView>
                <asp:Button ID="btnPrevious" runat="server" Text="<
                    <" onclick="btnPrevious_Click" />
                    <asp:Button ID="btnNext" runat="server" Text=">>" onclick="btnNext_Click" />
                </div>
            </form>
        </body></html>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default: System.Web.UI.Page {
  protected void Page_Load(object sender, EventArgs e) {

  }
  protected void btnPrevious_Click(object sender, EventArgs e) {
    if (mvMyView.ActiveViewIndex > 0) {
      mvMyView.ActiveViewIndex = mvMyView.ActiveViewIndex - 1;
    }
  }
  protected void btnNext_Click(object sender, EventArgs e) {
    if (mvMyView.ActiveViewIndex < 2) {
      mvMyView.ActiveViewIndex = mvMyView.ActiveViewIndex + 1;
    }

  }
}

Posted By -	Karan Gupta

Posted On -	Thursday, October 20, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**