Click here to close now.

Welcome!

.NET Authors: Pat Romanski, Elizabeth White, Liz McMillan, Jaynesh Shah, Carmen Gonzalez

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
Sensor-enabled things are becoming more commonplace, precursors to a larger and more complex framework that most consider the ultimate promise of the IoT: things connecting, interacting, sharing, storing, and over time perhaps learning and predicting based on habits, behaviors, location, preferences, purchases and more. In his session at @ThingsExpo, Tom Wesselman, Director of Communications Ecosystem Architecture at Plantronics, will examine the still nascent IoT as it is coalescing, including what it is today, what it might ultimately be, the role of wearable tech, and technology gaps stil...
From telemedicine to smart cars, digital homes and industrial monitoring, the explosive growth of IoT has created exciting new business opportunities for real time calls and messaging. In his session at @ThingsExpo, Ivelin Ivanov, CEO and Co-Founder of Telestax, shared some of the new revenue sources that IoT created for Restcomm – the open source telephony platform from Telestax. Ivelin Ivanov is a technology entrepreneur who founded Mobicents, an Open Source VoIP Platform, to help create, deploy, and manage applications integrating voice, video and data. He is the co-founder of TeleStax, a...
The Internet of Things (IoT) promises to evolve the way the world does business; however, understanding how to apply it to your company can be a mystery. Most people struggle with understanding the potential business uses or tend to get caught up in the technology, resulting in solutions that fail to meet even minimum business goals. In his session at @ThingsExpo, Jesse Shiah, CEO / President / Co-Founder of AgilePoint Inc., showed what is needed to leverage the IoT to transform your business. He discussed opportunities and challenges ahead for the IoT from a market and technical point of vie...
Grow your business with enterprise wearable apps using SAP Platforms and Google Glass. SAP and Google just launched the SAP and Google Glass Challenge, an opportunity for you to innovate and develop the best Enterprise Wearable App using SAP Platforms and Google Glass and gain valuable market exposure. In his session at @ThingsExpo, Brian McPhail, Senior Director of Business Development, ISVs & Digital Commerce at SAP, outlined the timeline of the SAP Google Glass Challenge and the opportunity for developers, start-ups, and companies of all sizes to engage with SAP today.
DevOps tends to focus on the relationship between Dev and Ops, putting an emphasis on the ops and application infrastructure. But that’s changing with microservices architectures. In her session at DevOps Summit, Lori MacVittie, Evangelist for F5 Networks, will focus on how microservices are changing the underlying architectures needed to scale, secure and deliver applications based on highly distributed (micro) services and why that means an expansion into “the network” for DevOps.
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo – to be held June 9-11, 2015, at the Javits Center in New York City, NY – is now accepting Hackathon proposals. Hackathon sponsorship benefits include general brand exposure and increasing engagement with the developer ecosystem. At Cloud Expo 2014 Silicon Valley, IBM held the Bluemix Developer Playground on November 5 and ElasticBox held the DevOps Hackathon on November 6. Both events took place on the expo floor. The Bluemix Developer Playground, for developers of all levels, highlighted the ease of use of...
We’re no longer looking to the future for the IoT wave. It’s no longer a distant dream but a reality that has arrived. It’s now time to make sure the industry is in alignment to meet the IoT growing pains – cooperate and collaborate as well as innovate. In his session at @ThingsExpo, Jim Hunter, Chief Scientist & Technology Evangelist at Greenwave Systems, will examine the key ingredients to IoT success and identify solutions to challenges the industry is facing. The deep industry expertise behind this presentation will provide attendees with a leading edge view of rapidly emerging IoT oppor...
For years, we’ve relied too heavily on individual network functions or simplistic cloud controllers. However, they are no longer enough for today’s modern cloud data center. Businesses need a comprehensive platform architecture in order to deliver a complete networking suite for IoT environment based on OpenStack. In his session at @ThingsExpo, Dhiraj Sehgal from PLUMgrid will discuss what a holistic networking solution should really entail, and how to build a complete platform that is scalable, secure, agile and automated.
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...
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focused on understanding how industrial data can create intelligence for industrial operations. Imagine ...
Hadoop as a Service (as offered by handful of niche vendors now) is a cloud computing solution that makes medium and large-scale data processing accessible, easy, fast and inexpensive. In his session at Big Data Expo, Kumar Ramamurthy, Vice President and Chief Technologist, EIM & Big Data, at Virtusa, will discuss how this is achieved by eliminating the operational challenges of running Hadoop, so one can focus on business growth. The fragmented Hadoop distribution world and various PaaS solutions that provide a Hadoop flavor either make choices for customers very flexible in the name of opti...
In the consumer IoT, everything is new, and the IT world of bits and bytes holds sway. But industrial and commercial realms encompass operational technology (OT) that has been around for 25 or 50 years. This grittier, pre-IP, more hands-on world has much to gain from Industrial IoT (IIoT) applications and principles. But adding sensors and wireless connectivity won’t work in environments that demand unwavering reliability and performance. In his session at @ThingsExpo, Ron Sege, CEO of Echelon, will discuss how as enterprise IT embraces other IoT-related technology trends, enterprises with i...
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal an...
Cultural, regulatory, environmental, political and economic (CREPE) conditions over the past decade are creating cross-industry solution spaces that require processes and technologies from both the Internet of Things (IoT), and Data Management and Analytics (DMA). These solution spaces are evolving into Sensor Analytics Ecosystems (SAE) that represent significant new opportunities for organizations of all types. Public Utilities throughout the world, providing electricity, natural gas and water, are pursuing SmartGrid initiatives that represent one of the more mature examples of SAE. We have s...
All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades. With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo, June 9-11, 2015, at the Javits Center in New York City. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be
The Internet of Things will put IT to its ultimate test by creating infinite new opportunities to digitize products and services, generate and analyze new data to improve customer satisfaction, and discover new ways to gain a competitive advantage across nearly every industry. In order to help corporate business units to capitalize on the rapidly evolving IoT opportunities, IT must stand up to a new set of challenges. In his session at @ThingsExpo, Jeff Kaplan, Managing Director of THINKstrategies, will examine why IT must finally fulfill its role in support of its SBUs or face a new round of...
The true value of the Internet of Things (IoT) lies not just in the data, but through the services that protect the data, perform the analysis and present findings in a usable way. With many IoT elements rooted in traditional IT components, Big Data and IoT isn’t just a play for enterprise. In fact, the IoT presents SMBs with the prospect of launching entirely new activities and exploring innovative areas. CompTIA research identifies several areas where IoT is expected to have the greatest impact.
Can call centers hang up the phones for good? Intuitive Solutions did. WebRTC enabled this contact center provider to eliminate antiquated telephony and desktop phone infrastructure with a pure web-based solution, allowing them to expand beyond brick-and-mortar confines to a home-based agent model. It also ensured scalability and better service for customers, including MUY! Companies, one of the country's largest franchise restaurant companies with 232 Pizza Hut locations. This is one example of WebRTC adoption today, but the potential is limitless when powered by IoT.
One of the biggest challenges when developing connected devices is identifying user value and delivering it through successful user experiences. In his session at Internet of @ThingsExpo, Mike Kuniavsky, Principal Scientist, Innovation Services at PARC, described an IoT-specific approach to user experience design that combines approaches from interaction design, industrial design and service design to create experiences that go beyond simple connected gadgets to create lasting, multi-device experiences grounded in people's real needs and desires.
Wearable devices have come of age. The primary applications of wearables so far have been "the Quantified Self" or the tracking of one's fitness and health status. We propose the evolution of wearables into social and emotional communication devices. Our BE(tm) sensor uses light to visualize the skin conductance response. Our sensors are very inexpensive and can be massively distributed to audiences or groups of any size, in order to gauge reactions to performances, video, or any kind of presentation. In her session at @ThingsExpo, Jocelyn Scheirer, CEO & Founder of Bionolux, will discuss ho...