Share Your Source Code or Article

 Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog.

Submit now...

Database Programming Made Easy

This tutorial will teach you step by step on how to connect and manipulate database. If you'd like to suggest a tutorial please write a comment at the bottom of this article.

Read more...

Hire Us to Do Your Work

Do you want a customized system? Do you want to setup your own website to do business? Then we are here to help you in your programming needs.

Read more...

Navigation

Recent Reviews

Recent Blog

more

Recent Tutorial

more

New forum topics

more

Popular Tags

more tags

Search

Home
Tab control in asp.net
planetsourcecode's picture
Submitted by planetsourcecode on Tue, 06/30/2009 - 02:49
in
Language: .NET
Category: Miscellaneous

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:

  1.         .TabArea
  2.         {
  3.                     background-color: White;
  4.                     font-size: x-small;
  5.                     border-left: 1px solid black;
  6.                     border-bottom: 1px solid black;
  7.                     border-right: 1px solid black;
  8.                     border-top:1px solid black;
  9.                     position:absolute;
  10.                     top:42px;
  11.                     height:400px;
  12.                     z-index:-25;
  13.         }
  14.  
  15. /<code>
  16. Step 1: Write the codes in between <div> and </div>, which will add Menu and Multiview control
  17. <code>
  18. <asp:Menu ID="Menu1" Width="216px" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
  19.                 OnMenuItemClick="Menu1_MenuItemClick">
  20.                 <Items>
  21.                     <%--Add a MenuItem for each tab.--%>
  22.                     <asp:MenuItem ImageUrl="~/Images/HomeEnabled.jpg" Value="0" Text=" "></asp:MenuItem>
  23.                     <asp:MenuItem ImageUrl="~/Images/ProductsDisabled.jpg" Text=" " Value="1"></asp:MenuItem>
  24.                     <asp:MenuItem ImageUrl="~/Images/SupportDisabled.jpg" Text=" " Value="2"></asp:MenuItem>
  25.                     <asp:MenuItem ImageUrl="~/Images/HelpDisabled.jpg" Text=" " Value="3"></asp:MenuItem>
  26.                 </Items>
  27.             </asp:Menu>
  28.             <%--Add a MultiView control to "contain" View controls which will serve as tab pages.--%>
  29.             <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
  30.                 <%--Add View controls, one for each 'tab'.--%>
  31.                 <asp:View ID="Tab1" runat="server" >
  32.                     <TABLE width="578" height="400" cellpadding=0 cellspacing=0>
  33.                         <TR valign="top">
  34.                             <TD class="TabArea" style="width: 578px">
  35.                             <BR />
  36.                             </TD>
  37.                         </TR>
  38.                     </TABLE>
  39.                     <STRONG><SPAN style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  40.                         &nbsp; &nbsp;
  41.                         <BR />
  42.                         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Home page content...</SPAN></STRONG></asp:View>
  43.                 <asp:View ID="Tab2" runat="server">
  44.                     <TABLE width="578" height="400" cellpadding=0 cellspacing=0>
  45.                         <TR valign="top">
  46.                             <TD class="TabArea" style="width: 578px">
  47.  
  48.                             </TD>
  49.                         </TR>
  50.                     </TABLE>
  51.                     <STRONG><SPAN style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  52.                         &nbsp; &nbsp;&nbsp;<BR />
  53.                         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Products page content...</SPAN></STRONG></asp:View>
  54.                 <asp:View ID="Tab3" runat="server">
  55.                     <TABLE width="578" height="400" cellpadding=0 cellspacing=0>
  56.                         <TR valign="top">
  57.                             <TD class="TabArea" style="width: 578px">
  58.  
  59.                             </TD>
  60.                         </TR>
  61.                     </TABLE>
  62.                     <STRONG><SPAN style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  63.                         &nbsp; &nbsp;&nbsp;<BR />
  64.                         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Support page content...</SPAN></STRONG></asp:View>
  65.                 <asp:View ID="Tab4" runat="server">
  66.                     <TABLE width="578" height="400" cellpadding=0 cellspacing=0>
  67.                         <TR valign="top">
  68.                             <TD class="TabArea" style="width: 578px">
  69.  
  70.                             </TD>
  71.                         </TR>
  72.                     </TABLE>
  73.                     <STRONG><SPAN style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  74.                         &nbsp; &nbsp;&nbsp;<BR />
  75.                         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Help page content...</SPAN></STRONG></asp:View>
  76.             </asp:MultiView>

Step 2: Add below codes to page code behind.
  1.   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2.         If Page.IsPostBack = False Then
  3.             Menu1.Items(0).Selected = True
  4.         End If
  5.     End Sub
  6.     Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
  7.         MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
  8.  
  9.         Menu1.Items(0).ImageUrl = "~/Images/HomeDisabled.jpg"
  10.         Menu1.Items(1).ImageUrl = "~/Images/ProductsDisabled.jpg"
  11.         Menu1.Items(2).ImageUrl = "~/Images/SupportDisabled.jpg"
  12.         Menu1.Items(3).ImageUrl = "~/Images/HelpDisabled.jpg"
  13.  
  14.         Select Case e.Item.Value
  15.             Case 0
  16.                 Menu1.Items(0).ImageUrl = "~/Images/HomeEnabled.jpg"
  17.             Case 1
  18.                 Menu1.Items(1).ImageUrl = "~/Images/ProductsEnabled.jpg"
  19.             Case 2
  20.                 Menu1.Items(2).ImageUrl = "~/Images/SupportEnabled.jpg"
  21.             Case 3
  22.                 Menu1.Items(3).ImageUrl = "~/Images/HelpEnabled.jpg"
  23.         End Select
  24.     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

0
Your rating: None



  • 1767 reads

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <java>, <java5>, <javascript>, <mysql>, <php>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • You may use [inline:xx] tags to display uploaded files or images inline.

  • Links to specified hosts will have a rel="nofollow" added to them.

  • You may insert videos with [video:URL]

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

Feed subscription

What is RSS

Enter your email address:

Delivered by FeedBurner

Popular

All time:

Recent comments

Poll

Top 10 Programming Languages Poll:




Technology & Computers - Top Blogs Philippines

Step by Step Java Tutorial

In this tutorial you will learn how to program with Java. It has a rich of information to be educated well with Java.

Read more...

Do You Have Question?

 Do you have any question related to computer programming? Visit our forum and post new topic on the category you like. Be gentle when asking a question.

Ask now...

Point of Sale

Point of Sale is very useful especially for supermarkets or restaurants. I have included a barcode scanner in this program. Please check it out.

Read more...