Wizard application using Multiview and View Controls in Asp.net using VB.NET

Introduction

In this Article I m Explaining you how you can create  a Wizard application using MultiView and view control in ASP.NET. Many times you have seen survey pattern and questioner when you browse sites on internet. These sites and surveys are developed to know about the person's opinion and information about a particular topic. Developing this kind of sites takes a lot of time and extra overhead but ASP.NET provide us the facility to putting controls into a group and the controls which are used for this task is known as the Panel control. This control is used for hiding, displaying adding other controls onto our web forms dynamically but in ASP.NET we have  new control that work as the same as the Panel control works, this control is known as the MultiView and View Control. You can use these control for add, display, hide other controls without much efforts. In this article I have created an application that ask question related to personal information of user, I have used three View Controls. First is ask your name and age, second will show you a Questioner and on last you will press finish button and an application will display all the information provided by the user.

How to Create

• Simply just open a new Website.
• Add the below code on Default.Aspx page.
  
  <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
      CodeBehind="Default.aspx.vb" Inherits="WebApplication6._Default" %>
  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  </asp:Content>
  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <div>
  <asp:MultiView ID="myMV" runat="server" >
  <asp:View ID="myView1" runat="server">
   <asp:Label ID="lblShowMessage" runat="server" Text="A Questioner to know about you and your personal intrests:" Font-Bold="true" Font
   Names="Verdana" Font-Size="Small"  /> <br /><br />
   <strong><span style="font-size: 9pt; font-family: Verdana">First Name: </span></strong>
   <asp:TextBox ID="txtFirstName" runat="server" /> <br />
   <strong><span style="font-size: 9pt; font-family: Verdana">Last Name: </span></strong>
   <asp:TextBox ID ="txtLastName" runat="server" />
    <strong><span style="font-size: 9pt; font-family: Verdana">Your Age:</span></strong>
  <asp:DropDownList ID="ddlAge" runat="server" Width="102px" >
   <asp:ListItem>10-15</asp:ListItem>
   <asp:ListItem>16-20</asp:ListItem>
   <asp:ListItem>21-25</asp:ListItem>
   <asp:ListItem>26-30</asp:ListItem>      
  </asp:DropDownList><br />
  <asp:Button ID="cmdNext" Width="50"  runat="server" Text=">" />
  </asp:View>
  <asp:View ID="myView2" runat="server">
   <strong><span style="font-size: 9pt; font-family: Verdana">What kind of games you like:</span></strong><br />
   <asp:RadioButton ID="rbQ1" Text="OutDoor"  GroupName="gnQV1" runat="server" />
   <asp:RadioButton ID="rbQ11" Text="InDoor"   GroupName="gnQV1" runat="server" /><br />
   <strong><span style="font-size: 9pt; font-family: Verdana">Where you want spend time more:</span></strong><br />
   <asp:RadioButton ID="rbQ2" Text="In Home" GroupName="gnQV2" runat="server" />
   <asp:RadioButton ID="rbQ22" Text="With Friends"  GroupName="gnQV2" runat="server" /><br />
   <asp:Button ID="cmdPrev1" Width="50"  runat="server" Text="<"  />
   <asp:Button ID="cmdNext1" Width="50"  runat="server" Text=">"  />
  </asp:View>
  <asp:View ID="myView3" runat="server"   >
   <strong><span style="font-size: 9pt; font-family: Verdana">Are you currently Employed:</span></strong><br />
   <asp:RadioButton ID="rbQ3" Text="Yes" GroupName="gnQV4" runat="server" />
   <asp:RadioButton ID="rbQ33" Text="No"  GroupName="gnQV4" runat="server" /><br />  
   <strong><span style="font-size: 9pt; font-family: Verdana">What is your marital Status:</span></strong><br />
   <asp:RadioButton ID="rbQ4" Text="Single"  GroupName="gnQV3" runat="server" />
   <asp:RadioButton ID="rbQ44" Text="Married"   GroupName="gnQV3" runat="server" /><br />
   <asp:Button ID="cmdPrev" Width="50"  runat="server" Text="<"  />
   <asp:Button ID="cmdFinish" runat="server" Text="Finish" />
  </asp:View>           
  </asp:MultiView> <br /><hr />
  <asp:Label ID="lblValues" Visible="false" runat="server" /></div>
      </asp:Content>
   
• After  writing above code the design page will look like below.
  
  
   
• After adding above code write the below code on Page_Load.
  
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
          If Not IsPostBack Then
              myMV.ActiveViewIndex = 0
          End If
      End Sub
   
• Then add code to view next page.
  
      Protected Sub cmdNext_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdNext.Click, cmdNext1.Click
          myMV.ActiveViewIndex += 1
      End Sub
   
• After that add the code to view previous page.
  
      Protected Sub cmdPrev_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdPrev.Click, cmdPrev1.Click   
          myMV.ActiveViewIndex -= 1
      End Sub
   
• Lastly add code for finish.
  
  Protected Sub cmdFinish_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdFinish.Click
          myMV.Visible = False
          lblValues.Visible = True
          Dim sb As New StringBuilder
          Dim strGameLike As String = String.Empty
          Dim strSpendTime As String = String.Empty
          Dim strEmployed As String = String.Empty
          Dim strMaritalStatus As String = String.Empty
          If rbQ1.Checked = True Then
              strGameLike = rbQ1.Text
          Else
              strGameLike = rbQ11.Text
          End If
          If rbQ2.Checked = True Then
              strSpendTime = rbQ2.Text
          Else
              strSpendTime = rbQ22.Text
          End If
          If rbQ3.Checked = True Then
              strEmployed = rbQ3.Text
          Else
              strEmployed = rbQ33.Text
          End If
          If rbQ4.Checked = True Then
              strMaritalStatus = rbQ4.Text
          Else
              strMaritalStatus = rbQ44.Text
          End If
          sb.Append("The Information provided by you:" & "")
          sb.Append("Your Name: " & txtFirstName.Text & " " & txtLastName.Text & "")
          sb.Append("Your Age: " & ddlAge.SelectedValue.ToString & "")
          sb.Append("Games You like: " & strGameLike & "")
          sb.Append("Time Where you want to spend most: " & strSpendTime & "")
          sb.Append("Your Employment Status: " & strEmployed & "")
          sb.Append("Your Marital Status: " & strMaritalStatus)
          lblValues.Text = sb.ToString
      End Sub

Output