Post
Ask Question

MultiView Control And View Control In ASP.NET

In this article you will learn about MultiView control and View control.

  1. Defination / Introduction
  2. Step by step implemation.
  3. Difference between MultiView Control vs Wizard control

Definition / Introduction

Multiview and View are both server controls. Multiview control and View control are used together. Multiview is parent control for View control. As the name defines itself, Multiview control is used to control various type of views.

Multiview contro was introduced in .Net Framework version 2.0.

Inside View control we are usin the rest of server controls. Viewis operated through MultiView1.ActiveViewIndex, and this property will display appropriate view as per the indexed numbers of view. If no view is active index will return -1 and as usual index value starts from 0.

Multiview control helps to display or render the particular view on the page.
This can be used for Survey, E-Commerce and Data entry Forms as per your requirement.

  • Prefix for MultiView control is mv
  • Prefix for View control is v

MultiView control

  1. <asp:MultView ID= "mvEntryForm" runat= "server">  
  2.    <%--[View control codes come inside of MultiView]--%>  
  3. </asp:MultiView>  
View Control
  1. <asp:View ID= "vAddressDetail" runat= "server">  
  2. </asp:View>  
Note

View control is used inside of MultiView contro and looks like this way:
  1. <asp:MultView ID= "mvEntryForm" runat= "server">  
  2.    <asp:View ID= "vAddressDetail" runat= "server"> </asp:View>  
  3. </asp:MultiView>  
MultiView Control and Wizard Control difference between

Multiview control and wizard control are more or lessthe same but one major difference between them is the rich user interface in wizard control. Wizard control has side bar and Next, Previous and Finish buttons. A side bar is included to navigate among the various steps in the Wizard control.

For information on Multiview control visit following link.

Logic of Implementation / Implementation's Scenario

Friend Data Entry Form

We will implement MultiView/View control on Friend Data Entry Screen where we accept following detail in different – different views. Here we have used the  following 4 (Four) views:
  • Address Detail
  • Contact Detail
  • Education Detail
  • Preview and Submit Detail

To implement a MultiView and View we had used the following things:

  1. Create a ASP.NET Empty Website project named: MultiViewAndView.



  2. Add new WebForm named : Default.aspx.

    Right click on solution explorer, Select Add --> Add New Item --> Insert a New WebForm.

UI Explaination

Total four views:

  • Address Detail
  • Contact Detail
  • Education Detail
  • Preview and Submit Detail

Here, you can see dropdown list where you can switch the view.



Address View



Contact Detail



Education Detail



Preview and Submit



Default.aspx code

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3.   
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.   
  11.     <div>  
  12.         <%--Extra Navigation tool for navigation.   
  13.         You can directly jump to select view with help of Selection from Dropdown list.--%>  
  14.   
  15.         <asp:DropDownList ID="ddlDetail" runat="server" AutoPostBack="true" >  
  16.             <asp:ListItem Text="1.Address Detail" Value ="0" Selected="True" ></asp:ListItem>  
  17.             <asp:ListItem Text="2.Contact Detail" Value ="1"></asp:ListItem>  
  18.             <asp:ListItem Text="3.Education Detail" Value ="2"></asp:ListItem>  
  19.             <asp:ListItem Text="4.Preview & Submit" Value ="3"></asp:ListItem>  
  20.         </asp:DropDownList>  
  21.            <br />  
  22.            <br />  
  23.           
  24.            <table>  
  25.                <tr>  
  26.                    <td>  
  27.                        Name  
  28.                    </td>  
  29.                    <td>  
  30.                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
  31.                    </td>  
  32.                </tr>  
  33.                <tr>  
  34.                    <td>  
  35.                        Birth Date  
  36.                    </td>  
  37.                    <td>  
  38.                        <asp:TextBox ID="txtBirthDate" runat="server"></asp:TextBox>  
  39.                    </td>  
  40.                </tr>  
  41.            </table>  
  42.   
  43.            <br />  
  44.            <br />  
  45.   
  46.         <%--MultiView control which having nos. of Views--%>  
  47.         <asp:MultiView ID="mvEntryForm" runat="server">  
  48.               
  49.             <%--[View control comes inside]--%>  
  50.   
  51.             <asp:View ID="vAddressDetail" runat="server">  
  52.               Address  <asp:TextBox ID="txtAddress" runat="server" TextMode="MultiLine"></asp:TextBox>  
  53.                 <br />  
  54.                 <br />  
  55.               <asp:Button ID="btnNextContactDetail" runat="server" Text="Next" title="Next - Contact Detail" />  
  56.             </asp:View>  
  57.   
  58.             <asp:View ID="vContactDetail" runat="server">  
  59.                  Mobile Number  <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox>  
  60.                 <br />  
  61.                 Email ID  <asp:TextBox ID="txtEmailID" runat="server"></asp:TextBox>  
  62.               <br />  
  63.               <br />  
  64.               <asp:Button ID="btnPrevAddressDetail" runat="server" Text="Previous" title="Previous - Address Detail" />  
  65.               <asp:Button ID="btnNextEducationDetail" runat="server" Text="Next" title="Next - Education Detail" />  
  66.             </asp:View>  
  67.   
  68.             <asp:View ID="vEducationDetail" runat="server">  
  69.                 Education Detail  <asp:TextBox ID="txtEducation" runat="server" TextMode="MultiLine"></asp:TextBox>  
  70.               <br />  
  71.               <br />  
  72.               <asp:Button ID="btnPrevContactDetail" runat="server" Text="Previous" title="Previous - Contact Detail"/>  
  73.               <asp:Button ID="btnNextPreviewAndSubmit" runat="server" Text="Next" title="Next - Preview & Submit" />  
  74.             </asp:View>  
  75.   
  76.             <asp:View ID="vPreviewAndSubmit" runat="server">  
  77.                    
  78.                 <asp:Label ID="lblSummary" runat="server" Font-Bold="true" Font-Size="Large"></asp:Label>  
  79.   
  80.                 <table>  
  81.                     <tr>  
  82.                         <td>  
  83.                             <b>Address Detail</b><br />  
  84.                             <asp:Label ID="lblAddressDetail" runat="server" ></asp:Label>  
  85.                             <br />  
  86.                             <br />  
  87.                         </td>  
  88.                     </tr>  
  89.                     <tr>  
  90.                         <td>  
  91.                             <b>Contact Detail</b><br />  
  92.                             <asp:Label ID="lblContactDetail" runat="server" ></asp:Label>  
  93.                             <br />  
  94.                             <br />  
  95.                         </td>  
  96.                     </tr>  
  97.                     <tr>  
  98.                         <td>  
  99.                             <b>Education Detail</b><br />  
  100.                             <asp:Label ID="lblEducationDetail" runat="server" ></asp:Label>  
  101.                             <br />  
  102.                             <br />  
  103.                         </td>  
  104.                     </tr>  
  105.                 </table>  
  106.               <asp:Button ID="btnEducationDetail" runat="server" Text="Previous" title="Previous - Education Detail"/>  
  107.               <asp:Button ID="btnSubmit" runat="server" Text="Submit" title="Submit" />  
  108.             </asp:View>  
  109.         </asp:MultiView>  
  110.   
  111.     </div>  
  112.     </form>  
  113. </body>  
  114. </html>  
Default.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.   
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         mvEntryForm.ActiveViewIndex = 0;  
  14.     }  
  15.   
  16.   
  17.   
  18.     protected void btnNextContactDetail_Click(object sender, EventArgs e)  
  19.     {  
  20.         mvEntryForm.ActiveViewIndex = 1;  
  21.   
  22.     }  
  23.     protected void btnPrevAddressDetail_Click(object sender, EventArgs e)  
  24.     {  
  25.   
  26.     }  
  27.     protected void btnNextEducationDetail_Click(object sender, EventArgs e)  
  28.     {  
  29.         mvEntryForm.ActiveViewIndex = 2;  
  30.     }  
  31.     protected void btnPrevContactDetail_Click(object sender, EventArgs e)  
  32.     {  
  33.   
  34.     }  
  35.     protected void btnNextPreviewAndSubmit_Click(object sender, EventArgs e)  
  36.     {  
  37.         mvEntryForm.ActiveViewIndex = 3;  
  38.         lblSummary.Text = "Hello, " + txtName.Text.ToUpper() + "<br><br> <p style=" + "\"font-size:12px\"" + ">Please, Check your detail and submit.</p>";  
  39.         lblAddressDetail.Text = txtAddress.Text;  
  40.         lblContactDetail.Text = "Mobile Number : " + txtMobile.Text + "<br>" + "Email ID : " + txtEmailID.Text;  
  41.         lblEducationDetail.Text = txtEducation.Text;  
  42.   
  43.     }  
  44.     protected void ddlDetail_SelectedIndexChanged(object sender, EventArgs e)  
  45.     {  
  46.         mvEntryForm.ActiveViewIndex = Convert.ToInt16(ddlDetail.SelectedValue);  
  47.   
  48.     }  
  49.     protected void btnEducationDetail_Click(object sender, EventArgs e)  
  50.     {  
  51.         mvEntryForm.ActiveViewIndex = 2;  
  52.     }  
  53. }  

 


Similar Articles