Welcome!

Microsoft Cloud Authors: Elizabeth White, Liz McMillan, Mihai Corbuleac, Pat Romanski, David Bermingham

Related Topics: Microsoft Cloud

Microsoft Cloud: 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 BMC Software has been named "Siver Sponsor" of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2015 at the Javits Center in New York, New York. BMC is a global leader in innovative software solutions that help businesses transform into digital enterprises for the ultimate competitive advantage. BMC Digital Enterprise Management is a set of innovative IT solutions designed to make digital business fast, seamless, and optimized from mainframe to mo...
SYS-CON Events announced today that MobiDev will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business managers to a full-scale mobile software company with over 200 develope...
As cloud and storage projections continue to rise, the number of organizations moving to the cloud is escalating and it is clear cloud storage is here to stay. However, is it secure? Data is the lifeblood for government entities, countries, cloud service providers and enterprises alike and losing or exposing that data can have disastrous results. There are new concepts for data storage on the horizon that will deliver secure solutions for storing and moving sensitive data around the world. ...
SoftLayer operates a global cloud infrastructure platform built for Internet scale. With a global footprint of data centers and network points of presence, SoftLayer provides infrastructure as a service to leading-edge customers ranging from Web startups to global enterprises. SoftLayer's modular architecture, full-featured API, and sophisticated automation provide unparalleled performance and control. Its flexible unified platform seamlessly spans physical and virtual devices linked via a world...
SYS-CON Events announced today that ContentMX, the marketing technology and services company with a singular mission to increase engagement and drive more conversations for enterprise, channel and SMB technology marketers, has been named “Sponsor & Exhibitor Lounge Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York City, New York. “CloudExpo is a great opportunity to start a conversation with new prospects, but what happens after the...
Companies can harness IoT and predictive analytics to sustain business continuity; predict and manage site performance during emergencies; minimize expensive reactive maintenance; and forecast equipment and maintenance budgets and expenditures. Providing cost-effective, uninterrupted service is challenging, particularly for organizations with geographically dispersed operations.
The IoTs will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform. In his session at @ThingsExpo, Craig Sproule, CEO of Metavine, will demonstrate how to move beyond today's coding paradigm and share the must-have mindsets for removing complexity from the development proc...
SYS-CON Events announced today TechTarget has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. TechTarget is the Web’s leading destination for serious technology buyers researching and making enterprise technology decisions. Its extensive global networ...
SYS-CON Events announced today that Commvault, a global leader in enterprise data protection and information management, has been named “Bronze Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Commvault is a leading provider of data protection and information management...
The essence of data analysis involves setting up data pipelines that consist of several operations that are chained together – starting from data collection, data quality checks, data integration, data analysis and data visualization (including the setting up of interaction paths in that visualization). In our opinion, the challenges stem from the technology diversity at each stage of the data pipeline as well as the lack of process around the analysis.
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, wh...
Designing IoT applications is complex, but deploying them in a scalable fashion is even more complex. A scalable, API first IaaS cloud is a good start, but in order to understand the various components specific to deploying IoT applications, one needs to understand the architecture of these applications and figure out how to scale these components independently. In his session at @ThingsExpo, Nara Rajagopalan is CEO of Accelerite, will discuss the fundamental architecture of IoT applications, ...
SYS-CON Events announced today that Tintri Inc., a leading producer of VM-aware storage (VAS) for virtualization and cloud environments, will exhibit at the 18th International CloudExpo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, New York, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that MangoApps will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MangoApps provides modern company intranets and team collaboration software, allowing workers to stay connected and productive from anywhere in the world and from any device. For more information, please visit https://www.mangoapps.com/.
SYS-CON Events announced today that Alert Logic, Inc., the leading provider of Security-as-a-Service solutions for the cloud, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Alert Logic, Inc., provides Security-as-a-Service for on-premises, cloud, and hybrid infrastructures, delivering deep security insight and continuous protection for customers at a lower cost than traditional security solutions. Ful...
In his session at 18th Cloud Expo, Bruce Swann, Senior Product Marketing Manager at Adobe, will discuss how the Adobe Marketing Cloud can help marketers embrace opportunities for personalized, relevant and real-time customer engagement across offline (direct mail, point of sale, call center) and digital (email, website, SMS, mobile apps, social networks, connected objects). Bruce Swann has more than 15 years of experience working with digital marketing disciplines like web analytics, social med...
SYS-CON Events announced today Object Management Group® has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that EastBanc Technologies will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. EastBanc Technologies has been working at the frontier of technology since 1999. Today, the firm provides full-lifecycle software development delivering flexible technology solutions that seamlessly integrate with existing systems – whether on premise or cloud. EastBanc Technologies partners with p...
WebRTC is bringing significant change to the communications landscape that will bridge the worlds of web and telephony, making the Internet the new standard for communications. Cloud9 took the road less traveled and used WebRTC to create a downloadable enterprise-grade communications platform that is changing the communication dynamic in the financial sector. In his session at @ThingsExpo, Leo Papadopoulos, CTO of Cloud9, will discuss the importance of WebRTC and how it enables companies to fo...
The IoT is changing the way enterprises conduct business. In his session at @ThingsExpo, Eric Hoffman, Vice President at EastBanc Technologies, discuss how businesses can gain an edge over competitors by empowering consumers to take control through IoT. We'll cite examples such as a Washington, D.C.-based sports club that leveraged IoT and the cloud to develop a comprehensive booking system. He'll also highlight how IoT can revitalize and restore outdated business models, making them profitable...