Click here to Skip to main content
13,004,435 members (75,685 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 29 Jun 2012

Creating Tabs Using Multiview and View Controls

, 29 Jun 2012
Rate this:
Please Sign up or sign in to vote.
Giving multiple page effects using the Multiview container control of ASP.NET.

Resulted image


This article discusses the issue of creating tabs using ASP.NET controls (View and Multiview). The layout we will discuss contains three Buttons that are linked to a Multiview container that contains three Views as child controls. We will see how we can customize the simplicity of View and Multiview controls to create flexible and good looking tabs. This is not a fully functional tab, but just a blue print of the concept, you can customize it according to your own needs.

Using the code

The article is written using ASP.NET with C#. The .Aspx page is given blow. Here we have to create three image button controls. After that we create a container in the form of a Multiview server control, inside which we create three nested View controls which we name view1, view2, view3, respectively.

<table border="0" cellpadding="2" cellspacing="3" width="100%">
<td align="center">
<asp:ImageButton ID="ImageButton1" runat="server" Width="70px" 

   Height="25px" onclick="ImageButton1_Click" ImageUrl="~/View_images/By-Range_n.Png" />
<asp:ImageButton ID="ImageButton2" runat="server" Width="70px" 

   Height="25px" onclick="ImageButton2_Click" ImageUrl="~/View_images/Details_n.Png" />
<asp:ImageButton ID="ImageButton3" runat="server" Width="70px" 

   Height="25px" onclick="ImageButton3_Click" ImageUrl="~/View_images/Toppers_n.Png"  />
<tr><td colspan="3"><asp:MultiView ID="MultiView1" runat="server">
<table width="100%" cellpadding="2" cellspacing="5">
<asp:View ID="View1" runat="server">
By range view page.
<asp:View ID="View2" runat="server"><br />
Detail view page
<asp:View ID="View3" runat="server">
Toppers view page

The code for the code behind file is given below.

protected void Page_Load(object sender, EventArgs e)
    if (!IsPostBack)

protected void set()
    ImageButton1.ImageUrl = "View_images/By-Range_n.Png";
    ImageButton2.ImageUrl = "View_images/Details_n.Png";
    ImageButton3.ImageUrl = "View_images/Toppers_n.Png";

private void SetDefaultView() // reder view at first page load
    MultiView1.ActiveViewIndex = 0;

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
// assign image to pressed button
    MultiView1.ActiveViewIndex = 0;
    ImageButton1.ImageUrl = "View_images/By-Range_p.Png";
    GridView1.Visible = false;

protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
    MultiView1.ActiveViewIndex = 1;
    ImageButton2.ImageUrl = "View_images/Details_p.Png";

protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
    MultiView1.ActiveViewIndex = 2;
    ImageButton3.ImageUrl = "View_images/Toppers_p.Png";

Points of Interest

You can see how simple it is to link a button server control to a Multiview container, which gives a look of multiple pages. With this we do not need to post our page to the server for processing, which increases the page response time.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...


Comments and Discussions

SuggestionAnother way to show Tabs in Web Pin
sxl13-Jul-12 6:03
membersxl13-Jul-12 6:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170627.1 | Last Updated 29 Jun 2012
Article Copyright 2012 by Asif_89
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid