Click here to Skip to main content
Click here to Skip to main content

Creating Tabs Using Multiview and View Controls

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

Resulted image

Introduction

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%">
<tr>
<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"  />
</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">
By range view page.
</asp:View>
</td>
<td>
<asp:View ID="View2" runat="server"><br />
Detail view page
</asp:View>
</td>
<td>
<asp:View ID="View3" runat="server">
Toppers view page
</asp:View></td></tr></table>
</td></tr></table>
</xmp>

The code for the code behind file is given below.

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

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.

License

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

Share

About the Author

Asif_89

United States United States
No Biography provided

Comments and Discussions

 
SuggestionAnother way to show Tabs in Web Pinmembersxl13-Jul-12 6:03 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.141029.1 | Last Updated 29 Jun 2012
Article Copyright 2012 by Asif_89
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid