Tab control in asp.net

[Crytonicx]

Submitted by
planetsourcecode

on
Tue, 06/30/2009 - 02:49

Sometime we need TAB control in our page so below is the codes for making TAB control in asp.net
Make a CSS file and add below codes:

.TabArea
{
background-color: White;
font-size: x-small;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top:1px solid black;
position:absolute;
top:42px;
height:400px;
z-index:-25;
}

/
Step 1: Write the codes in between and

, which will add Menu and Multiview control

%--Add a MenuItem for each tab.--%>

%--Add a MultiView control to "contain" View controls which will serve as tab pages.--%>

%--Add View controls, one for each 'tab'.--%>



Home page content...





Products page content...





Support page content...





Help page content...



Step 2: Add below codes to page code behind.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack = False Then
Menu1.Items(0).Selected = True
End If
End Sub
Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)

Menu1.Items(0).ImageUrl = "~/Images/HomeDisabled.jpg"
Menu1.Items(1).ImageUrl = "~/Images/ProductsDisabled.jpg"
Menu1.Items(2).ImageUrl = "~/Images/SupportDisabled.jpg"
Menu1.Items(3).ImageUrl = "~/Images/HelpDisabled.jpg"

Select Case e.Item.Value
Case 0
Menu1.Items(0).ImageUrl = "~/Images/HomeEnabled.jpg"
Case 1
Menu1.Items(1).ImageUrl = "~/Images/ProductsEnabled.jpg"
Case 2
Menu1.Items(2).ImageUrl = "~/Images/SupportEnabled.jpg"
Case 3
Menu1.Items(3).ImageUrl = "~/Images/HelpEnabled.jpg"
End Select
End Sub

About the author:

PlanetSourceCode.in is a place for all developer providing free source codes, articles, complete projects,complete application in PHP, C/C++, Javascript, Visual Basic, Cobol, Pascal, ASP/VBScript, AJAX, SQL, Perl, Python, Ruby, Mobile Development