Post
Ask Question

Using Multi View Control in ASP.NET

The multiview control is a new feature of ASP.NET 2.0 which was introduced with visual studio 2005.The main advantage of the multiview control is that we can specify the required view only(Ie display the required view only) on a single page.

Let's start with example:

Multiview.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.     <%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"  
  3.     Namespace="CrystalDecisions.Web" TagPrefix="CR" %>  
  4.         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5.         <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.         <head runat="server">  
  8.             <title>Untitled Page</title>  
  9.             <link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" rel="stylesheet" type="text/css" />  
  10.             <link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" rel="stylesheet" type="text/css" />  
  11.             <link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" rel="stylesheet" type="text/css" /> </head>  
  12.   
  13.         <body>  
  14.             <form id="form1" runat="server">  
  15.                 <div>  
  16.                     <asp:MultiView ID="MultiView1" runat="server">  
  17.                         <asp:View ID="View1" runat="server">  
  18.                             <asp:Panel ID="p1" runat="server" Width="218px">  
  19.                                 <table>  
  20.                                     <tr>  
  21.                                         <td style="width: 78px"> Hello World</td>  
  22.                                         <td>  
  23.                                             <asp:Button ID="but1" runat="server" Text="View1" OnClick="but1_Click" />  
  24.                                         </td>  
  25.                                     </tr>  
  26.                                 </table>  
  27.                             </asp:Panel>  
  28.                         </asp:View>  
  29.                         <asp:View ID="View2" runat="server">  
  30.                             <asp:Panel ID="p2" runat="server" Width="223px">  
  31.                                 <table>  
  32.                                     <tr>  
  33.                                         <td> Hello India!</td>  
  34.                                         <td>  
  35.                                             <asp:Button ID="but2" runat="server" Text="View2" OnClick="but2_Click" />  
  36.                                         </td>  
  37.                                     </tr>  
  38.                                 </table>  
  39.                             </asp:Panel>  
  40.                         </asp:View>  
  41.                         <asp:View ID="View3" runat="server">  
  42.                             <asp:Panel ID="p3" runat="server">  
  43.                                 <table style="width: 228px">  
  44.                                     <tr>  
  45.                                         <td style="width: 137px"> Hello Gujarat!</td>  
  46.                                         <td>  
  47.                                             <asp:Button ID="but3" runat="server" Text="View3" OnClick="but3_Click" />  
  48.                                         </td>  
  49.                                     </tr>  
  50.                                 </table>  
  51.                             </asp:Panel>  
  52.                         </asp:View>  
  53.                     </asp:MultiView> </div>    
  54.                 <br />     
  55.                 <br />  
  56.                 <br />  
  57.                 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="cricket" align="middle">  
  58.                     <param name="allowScriptAccess" value="sameDomain" />  
  59.                     <param name="movie" value="cricket.swf" />  
  60.                     <param name="quality" value="high" />  
  61.                     <param name="bgcolor" value="#999999" /> </object>  
  62.                 <asp:DropDownList ID="dl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dl_SelectedIndexChanged">  
  63.                     <asp:ListItem Text="one"></asp:ListItem>  
  64.                     <asp:ListItem Text="two"></asp:ListItem>  
  65.                     <asp:ListItem Text="three"></asp:ListItem>  
  66.                     <asp:ListItem Text="four"></asp:ListItem>  
  67.                 </asp:DropDownList>  
  68.                 <asp:TextBox ID="txt1" runat="server"></asp:TextBox>  
  69.             </form>  
  70.         </body>  
  71.   
  72.     </html>  
Multiview.aspx.cs
  1. using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8. using System.Web.UI.WebControls.WebParts;  
  9. using System.Web.UI.HtmlControls;  
  10.   
  11. public partial class _Default : System.Web.UI.Page   
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.         MultiView1.ActiveViewIndex = 0;  
  16.     }  
  17.      protected void but1_Click(object sender, EventArgs e)  
  18.     {  
  19.         MultiView1.ActiveViewIndex = 1;  
  20.     }  
  21.     protected void but2_Click(object sender, EventArgs e)  
  22.     {  
  23.         MultiView1.ActiveViewIndex = 2;  
  24.     }  
  25.     protected void but3_Click(object sender, EventArgs e)  
  26.     {  
  27.         MultiView1.ActiveViewIndex = 0;  
  28.     }  
  29.     protected void dl_SelectedIndexChanged(object sender, EventArgs e)  
  30.     {  
  31.         txt1.Text = dl.SelectedItem.Text;  
  32.     }  
  33. }  
ActiveViewIndex is the most important property of this control which is used to select respected view at one time.

Guys, Keep exploring. If you have any doubt, please feel free to ask me.