How to use Multiview Control in ASP.NET

Introduction

This article describes how to use the multiview server control in asp.net with c# as the backend

Background

The multiview control is a new feature of asp.net 2.0 which was introduced with visualstudio 2005.The main advantage of the multiview control is tnat we can specify the required view only(Ie display the required view only) on a single page.Multiview control helps us to create different views in the same page and display the view as the user clicks the links. With Multiview control the tab functionality is achived in asp.net.

Using the code

ASPX Code

<table border="0" cellpadding="2" cellspacing="3" width="100%">

<tr>
<td>
<asp:LinkButton ID="lnkTab1" runat="server" OnClick="lnkTab1_Click">Tab1</asp:LinkButton></td>
<td>
<asp:LinkButton ID="lnkTab2" runat="server" OnClick="lnkTab2_Click">Tab2</asp:LinkButton></td>
<td>
<asp:LinkButton ID="lnkTab3" runat="server" OnClick="lnkTab3_Click">Tab3</asp:LinkButton></td>
</tr>
<tr>
<td colspan="3">
<asp:MultiView ID="MultiView1" runat="server">
<table width="100%" cellpadding="2" cellspacing="5">
<tr>
<td>
<asp:View ID="View1" runat="server">
Content 1 goes here</asp:View>
</td>
<td>
<asp:View ID="View2" runat="server">
Content 2 goes here</asp:View>
</td>
<td>
<asp:View ID="View3" runat="server">
content 3 goes here</asp:View>
</td>
</tr>
</table>
</asp:MultiView></td>
</tr>
</table>

C# code

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
   {
   SetDefaultView();
   }

}

private void SetDefaultView()
{
MultiView1.ActiveViewIndex = 0; 
}

protected void lnkTab1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0; 
}
protected void lnkTab2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1; 
}
protected void lnkTab3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2;
}

 

Points of Interest

This is a cool new feature of ASP.NET 2.0,Try this.

History

Created by George Zacharia on 23/07/2007 .