ASP MultiView and View Server Control

The MultiView and View server controls work together to give you the capability to turn on/off sections of an ASP.NET page. Turning sections on/off is nothing activating and deactivating a series of View controls within a MultiView control. This looks similar to changing visibility of Panel controls but this concept will look easy when you work with multi view control.

Example:
The Design of MultiView Control looks like this (Figure below)

Firgure 1 Goes Here.

Above figure is a design mode in our visual studio. Then we need to have events for over button clicks. What I am doing here is when I click button in 1st View it should replace with second view see sample images below.

Figure 2, 3, 4 Goes Here.

So by above figures you should get some idea that what this example is doing. For every view next button replacing with next View control and for every previous button is replacing with previous View control.

To get Next View we use
MultiView1.ActiveViewIndex += 1;

To get Previous View we use
MultiView1.ActiveViewIndex -= 1;

Complete code looks like

.aspx

<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:Label ID="Label1" runat="server" Text="FirstName:"></asp:Label>
<span lang="en-us">  </span>
<asp:TextBox ID="txtFirstName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtFirstName" ErrorMessage="FirstName is required"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="Label2" runat="server" Text="Last Name:"></asp:Label>
<span lang="en-us"> </span><asp:TextBox ID="txtLastName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtLastName" ErrorMessage="Last Name is required"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="btnNextView1" runat="server" Text="Next Step" onclick="Button1_Click" />
</asp:View>
<asp:View ID="View2" runat="server">
<asp:Label ID="Label3" runat="server" Text="DOB:"></asp:Label>
<span lang="en-us">  </span>
<asp:TextBox ID="txtDOB" runat="server" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="txtDOB" ErrorMessage="DOB is required"></asp:RequiredFieldValidator><br />
<asp:Label ID="Label4" runat="server" Text="Phone Number:"></asp:Label>
<span lang="en-us">  </span>
<asp:TextBox ID="txtPhoneNumber" runat="server" /><asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="txtPhoneNumber" ErrorMessage="Phone Number is required"></asp:RequiredFieldValidator><br />
<asp:Button ID="btnPrev2View1" runat="server" CausesValidation="false" Text="Previous Step"
onclick="Button3_Click" />
<asp:Button ID="btnNextView2" runat="server" Text="Next Step"
onclick="btnNextView2_Click" />
</asp:View>
<asp:View ID="View3" runat="server">
<asp:Label ID="lblFinalResult" runat="server"></asp:Label>
<asp:Button ID="btnPrev3View1" runat="server" Text="Previous Step" onclick="Button3_Click" />
<asp:Button ID="Button1" runat="server" Text="Finish"
onclick="Button1_Click1" />
</asp:View>
</asp:MultiView>

.cs

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex =0;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex += 1;
}
protected void Button3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex -= 1;
}
protected void Button1_Click1(object sender, EventArgs e)
{
Response.Redirect("http://www.cooltuts.com/");
}
protected void btnNextView2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex += 1;
lblFinalResult.Text = "<b>Your Contact Details</b>"+"<br/>"+
"First Name: "+txtFirstName.Text+"<br/>"+
"Last Name: "+txtLastName.Text+"<br/>"+
"Date of Birth: "+txtDOB.Text+"<br/>"+
"Phone Number: "+txtPhoneNumber.Text+"<br/>"+
"<font size='3' color='red'>Verify and Click submit to Fininsh you registration</font><br />";
}