Post
Ask Question

How To Use MultiView In ASP.NET Using C#

In this tutorial, I will show you how to use MultiView in an ASP.NET. Using C#, and we will take straightforward example of the same student information, which we used in our Wizard control and it will be the same design which we will integrate  here.

INITIAL CHAMBER

Step 1

Open Your Visual Studio 2010 and create an empty Website, give a suitable name [view_demo].

Step 2

In Solution Explorer, you get your empty Website, add a Web form.

For Web Form

view_demo (Your Empty Website) -> Right click -> Add New Item -> Web Form. Name it as ->view_demo.aspx.

DESIGN CHAMBER

Step 3

Open your view_demo.aspx, drag and drop Multiview control from the toolbox. Inside your Multiview, add three Views as – Student Details, Student Course Details, Student Personal Details and Student Summary. Design your .aspx file, as shown below. 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Multiview.aspx.cs" Inherits="Multiview" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .auto-style1 {  
  10.             width: 478px;  
  11.         }  
  12.         .auto-style2 {  
  13.             width: 224px;  
  14.         }  
  15.         .auto-style3 {  
  16.             width: 219px;  
  17.         }  
  18.         .auto-style4 {  
  19.             width: 218px;  
  20.         }  
  21.     </style>  
  22. </head>  
  23. <body>  
  24.     <form id="form1" runat="server">  
  25.         <div>  
  26.   
  27.   
  28.             <asp:MultiView ID="MultiView1" runat="server">  
  29.   
  30.                 <asp:View ID="View1" runat="server">  
  31.                     <table style="width: 100%;">  
  32.                         <tr>  
  33.                             <td class="auto-style4"><strong>Student Details</strong></td>  
  34.   
  35.                         </tr>  
  36.                         <tr>  
  37.                             <td class="auto-style4">Student FirstName</td>  
  38.                             <td>  
  39.                                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>  
  40.                             <td></td>  
  41.                         </tr>  
  42.                         <tr>  
  43.                             <td class="auto-style4">Student LastName</td>  
  44.                             <td>  
  45.                                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>  
  46.                             <td> </td>  
  47.                         </tr>  
  48.                         <tr>  
  49.                             <td class="auto-style4"> </td>  
  50.                             <td>  
  51.                                 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Next" />  
  52.                             </td>  
  53.                             <td> </td>  
  54.                         </tr>  
  55.                     </table>  
  56.   
  57.                 </asp:View>  
  58.                 <asp:View ID="View2" runat="server">  
  59.                     <table style="width: 100%;">  
  60.                         <tr>  
  61.                             <td class="auto-style3"><strong>Student Course Detail</strong></td>  
  62.   
  63.                         </tr>  
  64.                         <tr>  
  65.                             <td class="auto-style3">Student Course</td>  
  66.                             <td>  
  67.                                 <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>  
  68.   
  69.                         </tr>  
  70.                         <tr>  
  71.                             <td class="auto-style3">Student Branch</td>  
  72.                             <td>  
  73.                                 <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>  
  74.   
  75.                         </tr>  
  76.                         <tr>  
  77.                             <td class="auto-style3">  
  78.                                 <asp:Button ID="Button3" runat="server" Text="Previous" OnClick="Button3_Click" />  
  79.                             </td>  
  80.                             <td>  
  81.                                 <asp:Button ID="Button4" runat="server" Text="Next" OnClick="Button4_Click" />  
  82.                             </td>  
  83.                         </tr>  
  84.                     </table>  
  85.   
  86.   
  87.                 </asp:View>  
  88.                 <asp:View ID="View3" runat="server">  
  89.   
  90.                     <table style="width: 100%;">  
  91.                         <tr>  
  92.                             <td class="auto-style2"><strong>Student Personal Detail</strong></td>  
  93.   
  94.                         </tr>  
  95.                         <tr>  
  96.                             <td class="auto-style2">Student EmailId</td>  
  97.                             <td>  
  98.                                 <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>  
  99.   
  100.                         </tr>  
  101.                         <tr>  
  102.                             <td class="auto-style2">Student City</td>  
  103.                             <td>  
  104.                                 <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>  
  105.   
  106.                         </tr>  
  107.                         <tr>  
  108.                             <td class="auto-style2">Student State</td>  
  109.                             <td>  
  110.                                 <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>  
  111.   
  112.                         </tr>  
  113.                         <tr>  
  114.                             <td class="auto-style2">  
  115.                                 <asp:Button ID="Button5" runat="server" Text="Previous" OnClick="Button5_Click" />  
  116.                             </td>  
  117.                             <td>  
  118.                                 <asp:Button ID="Button6" runat="server" Text="Next" OnClick="Button6_Click" style="height: 26px" />  
  119.                             </td>  
  120.                         </tr>  
  121.                     </table>  
  122.   
  123.                 </asp:View>  
  124.                 <asp:View ID="View4" runat="server">  
  125.   
  126.                     <table class="auto-style1">  
  127.                         <tr>  
  128.                             <td><strong>Student Details</strong></td>  
  129.   
  130.                             <td> </td>  
  131.   
  132.                         </tr>  
  133.                         <tr>  
  134.                             <td>Student FirstName:</td>  
  135.                             <td>  
  136.                                 <asp:Label ID="Label1" runat="server" Text=""></asp:Label>  
  137.                             </td>  
  138.                             <td> </td>  
  139.   
  140.                         </tr>  
  141.                         <tr>  
  142.                             <td>Student LastName:</td>  
  143.   
  144.                             <td>  
  145.                                 <asp:Label ID="Label2" runat="server" Text=""></asp:Label>  
  146.                             </td>  
  147.   
  148.                         </tr>  
  149.   
  150.                         <tr>  
  151.                             <td></td>  
  152.                             <td> </td>  
  153.                         </tr>  
  154.                         <tr>  
  155.                             <td><strong>Student Course Details</strong></td>  
  156.                             <td> </td>  
  157.                         </tr>  
  158.   
  159.                         <tr>  
  160.                             <td>Student Course:</td>  
  161.                             <td>  
  162.                                 <asp:Label ID="Label3" runat="server" Text=""></asp:Label>  
  163.                             </td>  
  164.                         </tr>  
  165.                         <tr>  
  166.                             <td>Student Branch:</td>  
  167.                             <td>  
  168.                                 <asp:Label ID="Label4" runat="server" Text=""></asp:Label>  
  169.                             </td>  
  170.                         </tr>  
  171.   
  172.                         <tr>  
  173.                             <td> </td>  
  174.                             <td> </td>  
  175.                         </tr>  
  176.                         <tr>  
  177.                             <td><strong>Student Personal Details</strong></td>  
  178.                             <td> </td>  
  179.                         </tr>  
  180.                         <tr>  
  181.                             <td>Student EmailId:</td>  
  182.                             <td>  
  183.                                 <asp:Label ID="Label5" runat="server" Text=""></asp:Label>  
  184.                             </td>  
  185.                         </tr>  
  186.                         <tr>  
  187.                             <td>Student City:</td>  
  188.                             <td>  
  189.                                 <asp:Label ID="Label6" runat="server" Text=""></asp:Label>  
  190.                             </td>  
  191.                         </tr>  
  192.                         <tr>  
  193.                             <td>Student State:</td>  
  194.                             <td>  
  195.                                 <asp:Label ID="Label7" runat="server" Text=""></asp:Label>  
  196.                             </td>  
  197.                         </tr>  
  198.   
  199.                     </table>  
  200.                 </asp:View>  
  201.             </asp:MultiView>  
  202.   
  203.   
  204.         </div>  
  205.     </form>  
  206. </body>  
  207. </html>  

Your Design will look like this,

Design

CODE CHAMBER

Step 5

Here, we will code for our design. We had assumed that in the initial phase after entering the student details, on the next button; the student should come to the student course detail view and on the next button; the student should move to Student Persona Detail.

In each View, we had taken Next and Previous buttons, so that the user can go back and forth, while filling up the form. This back and forth movement can be done with the help of one of the properties of Multiview – ActionViewIndex.

ActioViewIndex is used to get an Index of your View. For a very first View, the Index would be = 0. If you want to move to Next View , then the index would be = 1. If you want to move back, then View index would be again = 0, A very similar thing was done in our code too. 

  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 Multiview : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.         if (!IsPostBack)  
  13.         {  
  14.             MultiView1.ActiveViewIndex = 0;  
  15.         }  
  16.   
  17.     }  
  18.   
  19.     protected void Button2_Click(object sender, EventArgs e)  
  20.     {  
  21.         MultiView1.ActiveViewIndex = 1;  
  22.     }  
  23.   
  24.     protected void Button3_Click(object sender, EventArgs e)  
  25.     {  
  26.         MultiView1.ActiveViewIndex = 0;  
  27.     }  
  28.   
  29.     protected void Button4_Click(object sender, EventArgs e)  
  30.     {  
  31.         MultiView1.ActiveViewIndex = 2;  
  32.     }  
  33.   
  34.     protected void Button5_Click(object sender, EventArgs e)  
  35.     {  
  36.         MultiView1.ActiveViewIndex = 1;  
  37.   
  38.     }  
  39.   
  40.     protected void Button6_Click(object sender, EventArgs e)  
  41.     {  
  42.         MultiView1.ActiveViewIndex = 3;  
  43.   
  44.         Label1.Text = TextBox1.Text;  
  45.         Label2.Text = TextBox2.Text;  
  46.         Label3.Text = TextBox3.Text;  
  47.         Label4.Text = TextBox4.Text;  
  48.         Label5.Text = TextBox5.Text;  
  49.         Label6.Text = TextBox6.Text;  
  50.         Label7.Text = TextBox7.Text;  
  51.     }  
  52. }  

Output

In the output, we will first view Student Details, where we fill up the details and press Next to move to Next View.

Student Details

OUTPUT

Student Course Details

OUTPUT

Student Personal Details

OUTPUT

Student Summary
OUTPUT

Also, in the last View, you can put one more button as a Finish button and can save the data in the database.

Thank you for reading. Hope, you liked it. Have a good day.


Similar Articles