Click here to close now.

Welcome!

.NET Authors: Carmen Gonzalez, Elizabeth White, Liz McMillan, Greg O'Connor, Jason Bloomberg

Related Topics: .NET

.NET: Article

Implementing Tab Navigation with ASP.NET 2.0

Using MasterPages, a SiteMapDataSource, and the Menu control

One of the most basic ways to navigate within an application is by use of a tab control. Tabs are easy to use and users are very familiar with them. There have been many implementations of tab controls for Web applications, but they had often required advanced client-side script that was only supported in a few browsers, or they required extensive and confusing server-side include files. ASP.NET 2.0 provides a few things that make this easier to do with no dependency on functional code. In this article I'll show you how you can use the new features of ASP.NET 2.0 to easily create a tab control for your Web application.

To get started, create a new Web site (use your favorite language) on your computer and call it TabDemo. ASP.NET 2.0 introduces a new set of data providers and controls based on the notion of a site map. The site map is the central data store for site navigation data. Let's start by defining a simple site map that we can use for our site. Add a new sitemap to the site (use the default name of Web.sitemap). Listing 1 shows a simple sitemap that will demonstrate the tabs nicely.

Now that we have our sitemap, we can continue with the actual user interface. To get the most benefit from the tab control, we'll use a master page to keep everything together. Add a new master page to your Web site and call it MasterPage.master (see Figure 1).

In order to make our tabs seem as though they're physically connected to our content, we'll need to create a master HTML table to contain the tabs. Delete the code between the <form> and </form> tags in the MasterPage.master file and replace it with the HTML in Listing 2.

That will give us the main table that will hold all of our content (including our tab control). Now we need to define the table that actually holds our tabs and the tab "panels." Let's take a look at Listing 3. It shows the HTML that we should put into the TD with the ID of ContentContainer.

Notice the use of the TD with the CSS class TabMenuSpacer. This cell forces the empty area behind the tabs to take up all of the excess space to the right of the menu. We need to add the SiteMapDataSource to our page so that the menu will be bound to our site map. This is easy to do. Simply add the following code just below the main table:


<asp:SiteMapDataSource ID="TabMenuSitemap" runat="server" ShowStartingNode="false" />

This adds a new SiteMapData-Source to the page. Since we used the default name of Web.sitemap for our site map, ASP.NET will automatically use it as the main site map for the site, so we don't have to do anything else. If you add another site map to the site, you'll need to define a new site map provider to the web.config file that points to your new site map, and then set the SiteMapProvider property of the SiteMapDataSource to your new site map provider. It's also important to point out that we set the ShowStartingNode property to false. We did this because we have a flat site map and we don't want to show the top-most parent node for our menu (since the site map is defined in XML, we had to have a root node, even though we'll never use it).

Let's go ahead and take a look at what we have so far. Delete the Default.aspx page that Visual Studio added to your site and replace it with a new Default.aspx page. This time, when you add the page, check the box labeled "Select master page." Then select MasterPage.master as the master page. Build and run the Web application. At this point, you'll see a very simple page that doesn't look like a whole lot (see Figure 2).

The reason our page looks so odd is because we haven't yet defined the Cascading Style Sheet for the page. We need to add the CSS that will actually render what we have as a Tab menu. Add a new style sheet to your project and name it Stylesheet.css. Then, add the following to the <head> of MasterPage.master:


<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

This will link in the new style sheet. Let's take a look at the individual styles that make up our tab control. We'll start with the CSS class named TabMenuContainer. This style is applied to the entire tab menu. We just need to make sure that we have a top border so that our menu has a lid on it.


.TabMenuContainer
{
border-top: solid 1px black;
}

The next style that we're concerned with is the TabMenuItem. This is the style that is applied to all of our tabs in their unselected state.


.TabMenuItem
{
background-color: #FFFFBC;
text-align:center;
font-size: xx-small;
border: solid 1px black;
border-left: none;
padding: 3px 3px 3px 3px;
}

Notice that we've defined a border with a single pixel black line. We then set the left border to be nothing. This is actually an intentional move that prevents the tabs from looking bad against the border of the main container.

The secret to this whole method is in the next style. This is the style that is applied to the selected menu item:


..TabMenuItemSelected
{
background-color: White;
text-align:center;
font-size: xx-small;
border-right: solid 1px black;
border-bottom: none;
border-top: none;
border-left: none;
padding: 5px 3px 5px 3px;
}

We set the bottom border to "none" and the background color to white. This will allow the tab to look as if it is attached to the content cell. We also set the top border to "none" to give the selected tab just a little more height than the other tabs.

Since we want our tab panels (the cell that contains the Content-PlaceHolder control) to be the same height from page to page, we should set them to be a specific height. Once again, we use CSS to define a style to do this. In the HTML for the master page we added a table cell to the right of the content container and set its CSS class to SiteContentSpacer. Let's set the style for that to be a specific height.


.SiteContentSpacer
{
height: 200px;
visibility: hidden;
}

Not only did we set the height of the content to 200 pixels (a very small number just for demonstration purposes), but we also made the cell invisible. Listing 4 shows the entire style sheet that contains all of the styles used to make our tab control demo.

Once we've added the remaining styles to the style sheet, we can take a look at the final product. Figure 3 shows a screenshot of the resulting page with our tab control and all of the styles defined.

The tab control is a very useful user interface element that is common to many applications. With the introduction of master pages, SiteMapDataSource, and the menu control in ASP.NET 2.0, creating tabs in Web applications is easy. Best of all, once you have the master page set up for tabs, all you have to do to use them is to set the master page on your new Web forms and edit the page as you normally would. Also, since the solution relies on CSS, these tabs work in the latest Web browsers without any client-side coding.

Comments (10) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Aravind 05/06/08 09:09:19 AM EDT

Great work, Thank you so much.

Tony 04/02/08 04:22:56 PM EDT

Thank you very much, I have been looking for a nice simple way to do this. Awesome article.

Pranoti 03/07/08 03:18:06 PM EST

Thank your very much, your tutorial helped me a lot

Saurabh 01/28/08 10:49:37 PM EST

It's really awesome. It really works. Thanks a lot. Really nice article.

Aseem 12/20/07 06:07:54 AM EST

Thanks for the easy to follow instructions in the article. How do we add a second layer to our tab navigation? IE when you click on one tab, the subtabs for that tab appear. Any help would be great also I need it urgently. Please help it out.
Also i m getting a error "object required" when taking my mouse on any of the tabs, bt is working fine.
Thanks

Dave 11/26/07 02:05:38 PM EST

Thanks for the easy to follow instructions in the article. How do we add a second layer to our tab navigation? IE when you click on one tab, the subtabs for that tab appear. Any help would be great.

AK 11/16/07 04:51:45 PM EST

Great! Worked really good for me first time, may have to make a dummies version for the less experienced...

Rob 08/08/07 06:19:13 PM EDT

Thanks for sharing that. Instructions were great and it all worked first time. I'm used to the tab control in Access and its good to have it in asp.net

ChuckO 06/14/07 03:39:41 PM EDT

The information in this article is not all correct. I followed his instructions and get the following error.

Content controls have to be top-level controls in a content page or a nested master page that references a master page.

John Bowyer 12/30/05 03:35:37 AM EST

I have implemented the tab control as documented to the best of my ability and it appears to have missing ingredients from the article.

When I select a tab, it does not highlight. In short it does not look like a tab at all. I also have dynamic mouse flyouts.

The article specifies as a class: TabMenu that is not inclided in Listing 1.

@ThingsExpo Stories
SYS-CON Events announced today that SafeLogic has been named “Bag Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. SafeLogic provides security products for applications in mobile and server/appliance environments. SafeLogic’s flagship product CryptoComply is a FIPS 140-2 validated cryptographic engine designed to secure data on servers, workstations, appliances, mobile devices, and in the Cloud.
SYS-CON Events announced today that StorPool Storage will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. StorPool is distributed storage software that allows service providers, enterprises and other cloud builders to run data storage on standard x86 servers, instead of using expensive and inefficient storage arrays (SAN).
GENBAND has announced that SageNet is leveraging the Nuvia platform to deliver Unified Communications as a Service (UCaaS) to its large base of retail and enterprise customers. Nuvia’s cloud-based solution provides SageNet’s customers with a full suite of business communications and collaboration tools. Two large national SageNet retail customers have recently signed up to deploy the Nuvia platform and the company will continue to sell the service to new and existing customers. Nuvia’s capabilities include HD voice, video, multimedia messaging, mobility, conferencing, Web collaboration, deskt...
SYS-CON Events announced today that Site24x7, the cloud infrastructure monitoring service, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Site24x7 is a cloud infrastructure monitoring service that helps monitor the uptime and performance of websites, online applications, servers, mobile websites and custom APIs. The monitoring is done from 50+ locations across the world and from various wireless carriers, thus providing a global perspective of the end-user experience. Site24x7 supports monitoring H...
Sonus Networks introduced the Sonus WebRTC Services Solution, a virtualized Web Real-Time Communications (WebRTC) offer, purpose-built for the Cloud. The WebRTC Services Solution provides signaling from WebRTC-to-WebRTC applications and interworking from WebRTC-to-Session Initiation Protocol (SIP), delivering advanced real-time communications capabilities on mobile applications and on websites, which are accessible via a browser.
SYS-CON Events announced today that Intelligent Systems Services will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Established in 1994, Intelligent Systems Services Inc. is located near Washington, DC, with representatives and partners nationwide. ISS’s well-established track record is based on the continuous pursuit of excellence in designing, implementing and supporting nationwide clients’ mission-critical systems. ISS has completed many successful projects in Healthcare, Commercial, Manufacturing, ...
SYS-CON Events announced today that B2Cloud, a provider of enterprise resource planning software, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. B2cloud develops the software you need. They have the ideal tools to help you work with your clients. B2Cloud’s main solutions include AGIS – ERP, CLOHC, AGIS – Invoice, and IZUM
SYS-CON Events announced today that Tufin, the market-leading provider of Security Policy Orchestration Solutions, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. As the market leader of Security Policy Orchestration, Tufin automates and accelerates network configuration changes while maintaining security and compliance. Tufin's award-winning Orchestration Suite™ gives IT organizations the power and agility to enforce security policy across complex, multi-vendor enterprise networks. With more than 1...
SYS-CON Events announced today that Cloudian, Inc., the leading provider of hybrid cloud storage solutions, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Cloudian, Inc., is a Foster City, California - based software company specializing in cloud storage software. The main product is Cloudian, an Amazon S3-compliant cloud object storage platform, the bedrock of cloud computing systems, that enables cloud service providers and enterprises to build reliable, affordable and scalable cloud storage solu...
SYS-CON Events announced today that Gridstore™, the leader in hyper-converged infrastructure purpose-built to optimize Microsoft workloads, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Gridstore™ is the leader in hyper-converged infrastructure purpose-built for Microsoft workloads and designed to accelerate applications in virtualized environments. Gridstore’s hyper-converged infrastructure is the industry’s first all flash version of HyperConverged Appliances that include both compute and storag...
Temasys has announced senior management additions to its team. Joining are David Holloway as Vice President of Commercial and Nadine Yap as Vice President of Product. Over the past 12 months Temasys has doubled in size as it adds new customers and expands the development of its Skylink platform. Skylink leads the charge to move WebRTC, traditionally seen as a desktop, browser based technology, to become a ubiquitous web communications technology on web and mobile, as well as Internet of Things compatible devices.
“With easy-to-use SDKs for Atmel’s platforms, IoT developers can now reap the benefits of realtime communication, and bypass the security pitfalls and configuration complexities that put IoT deployments at risk,” said Todd Greene, founder & CEO of PubNub. PubNub will team with Atmel at CES 2015 to launch full SDK support for Atmel’s MCU, MPU, and Wireless SoC platforms. Atmel developers now have access to PubNub’s secure Publish/Subscribe messaging with guaranteed ¼ second latencies across PubNub’s 14 global points-of-presence. PubNub delivers secure communication through firewalls, proxy ser...
SYS-CON Events announced today that IDenticard will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. IDenticard™ is the security division of Brady Corp (NYSE: BRC), a $1.5 billion manufacturer of identification products. We have small-company values with the strength and stability of a major corporation. IDenticard offers local sales, support and service to our customers across the United States and Canada. Our partner network encompasses some 300 of the world's leading systems integrators and security s...
SYS-CON Events announced today that On the Avenue Marketing Group, a sales and marketing firm that utilizes events to market and sell products to consumers, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. On the Avenue Marketing Group (OTA) is a sales and marketing firm that utilizes events to market and sell products to consumers. On behalf of our clients, we attend thousands of fairs, festivals, expos, concerts, conferences, and sporting events annually, helping them reach millions of individuals ...
Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 16th Cloud Expo at the Javits Center in New York June 9-11 will find fresh new content in a new track called PaaS | Containers & Microservices Containers are not being considered for the first time by the cloud community, but a current era of re-consideration has pushed them to the top of the cloud agenda. With the launch of Docker's initial release in March of 2013, interest was revved up several notches. Then late last...
“In the past year we've seen a lot of stabilization of WebRTC. You can now use it in production with a far greater degree of certainty. A lot of the real developments in the past year have been in things like the data channel, which will enable a whole new type of application," explained Peter Dunkley, Technical Director at Acision, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Ciqada will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Ciqada™ makes it easy to connect your products to the Internet. By integrating key components - hardware, servers, dashboards, and mobile apps - into an easy-to-use, configurable system, your products can quickly and securely join the internet of things. With remote monitoring, control, and alert messaging capability, you will meet your customers' needs of tomorrow - today! Ciqada. Let your products take flight. For more inform...
Health care systems across the globe are under enormous strain, as facilities reach capacity and costs continue to rise. M2M and the Internet of Things have the potential to transform the industry through connected health solutions that can make care more efficient while reducing costs. In fact, Vodafone's annual M2M Barometer Report forecasts M2M applications rising to 57 percent in health care and life sciences by 2016. Lively is one of Vodafone's health care partners, whose solutions enable older adults to live independent lives while staying connected to loved ones. M2M will continue to gr...
SYS-CON Media announced today that @WebRTCSummit Blog, the largest WebRTC resource in the world, has been launched. @WebRTCSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @WebRTCSummit Blog can be bookmarked ▸ Here @WebRTCSummit conference site can be bookmarked ▸ Here
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...