Click here to close now.


Microsoft Cloud Authors: Jayaram Krishnaswamy, Elizabeth White, Andreas Grabner, Jim Kaskade, Pat Romanski

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.

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.

background-color: #FFFFBC;
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:

background-color: White;
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.

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.

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

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
In his session at @ThingsExpo, Tony Shan, Chief Architect at CTS, will explore the synergy of Big Data and IoT. First he will take a closer look at the Internet of Things and Big Data individually, in terms of what, which, why, where, when, who, how and how much. Then he will explore the relationship between IoT and Big Data. Specifically, he will drill down to how the 4Vs aspects intersect with IoT: Volume, Variety, Velocity and Value. In turn, Tony will analyze how the key components of IoT influence Big Data: Device, Connectivity, Context, and Intelligence. He will dive deep to the matrix...
When it comes to IoT in the enterprise, namely the commercial building and hospitality markets, a benefit not getting the attention it deserves is energy efficiency, and IoT’s direct impact on a cleaner, greener environment when installed in smart buildings. Until now clean technology was offered piecemeal and led with point solutions that require significant systems integration to orchestrate and deploy. There didn't exist a 'top down' approach that can manage and monitor the way a Smart Building actually breathes - immediately flagging overheating in a closet or over cooling in unoccupied ho...
Scott Guthrie's keynote presentation "Journey to the intelligent cloud" is a must view video. This is from AzureCon 2015, September 29, 2015 I have reproduced some screen shots in case you are unable to view this long video for one reason or another. One of the highlights is 3 datacenters coming on line in India.
SYS-CON Events announced today that ProfitBricks, the provider of painless cloud infrastructure, will exhibit at SYS-CON's 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. ProfitBricks is the IaaS provider that offers a painless cloud experience for all IT users, with no learning curve. ProfitBricks boasts flexible cloud servers and networking, an integrated Data Center Designer tool for visual control over the cloud and the best price/performance value available. ProfitBricks was named one of the coolest Clo...
“The Internet of Things transforms the way organizations leverage machine data and gain insights from it,” noted Splunk’s CTO Snehal Antani, as Splunk announced accelerated momentum in Industrial Data and the IoT. The trend is driven by Splunk’s continued investment in its products and partner ecosystem as well as the creativity of customers and the flexibility to deploy Splunk IoT solutions as software, cloud services or in a hybrid environment. Customers are using Splunk® solutions to collect and correlate data from control systems, sensors, mobile devices and IT systems for a variety of Ind...
You have your devices and your data, but what about the rest of your Internet of Things story? Two popular classes of technologies that nicely handle the Big Data analytics for Internet of Things are Apache Hadoop and NoSQL. Hadoop is designed for parallelizing analytical work across many servers and is ideal for the massive data volumes you create with IoT devices. NoSQL databases such as Apache HBase are ideal for storing and retrieving IoT data as “time series data.”
Clearly the way forward is to move to cloud be it bare metal, VMs or containers. One aspect of the current public clouds that is slowing this cloud migration is cloud lock-in. Every cloud vendor is trying to make it very difficult to move out once a customer has chosen their cloud. In his session at 17th Cloud Expo, Naveen Nimmu, CEO of Clouber, Inc., will advocate that making the inter-cloud migration as simple as changing airlines would help the entire industry to quickly adopt the cloud without worrying about any lock-in fears. In fact by having standard APIs for IaaS would help PaaS expl...
Organizations already struggle with the simple collection of data resulting from the proliferation of IoT, lacking the right infrastructure to manage it. They can't only rely on the cloud to collect and utilize this data because many applications still require dedicated infrastructure for security, redundancy, performance, etc. In his session at 17th Cloud Expo, Emil Sayegh, CEO of Codero Hosting, will discuss how in order to resolve the inherent issues, companies need to combine dedicated and cloud solutions through hybrid hosting – a sustainable solution for the data required to manage I...
Mobile messaging has been a popular communication channel for more than 20 years. Finnish engineer Matti Makkonen invented the idea for SMS (Short Message Service) in 1984, making his vision a reality on December 3, 1992 by sending the first message ("Happy Christmas") from a PC to a cell phone. Since then, the technology has evolved immensely, from both a technology standpoint, and in our everyday uses for it. Originally used for person-to-person (P2P) communication, i.e., Sally sends a text message to Betty – mobile messaging now offers tremendous value to businesses for customer and empl...
Apps and devices shouldn't stop working when there's limited or no network connectivity. Learn how to bring data stored in a cloud database to the edge of the network (and back again) whenever an Internet connection is available. In his session at 17th Cloud Expo, Bradley Holt, Developer Advocate at IBM Cloud Data Services, will demonstrate techniques for replicating cloud databases with devices in order to build offline-first mobile or Internet of Things (IoT) apps that can provide a better, faster user experience, both offline and online. The focus of this talk will be on IBM Cloudant, Apa...
As more and more data is generated from a variety of connected devices, the need to get insights from this data and predict future behavior and trends is increasingly essential for businesses. Real-time stream processing is needed in a variety of different industries such as Manufacturing, Oil and Gas, Automobile, Finance, Online Retail, Smart Grids, and Healthcare. Azure Stream Analytics is a fully managed distributed stream computation service that provides low latency, scalable processing of streaming data in the cloud with an enterprise grade SLA. It features built-in integration with Azur...
SYS-CON Events announced today that HPM Networks will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. For 20 years, HPM Networks has been integrating technology solutions that solve complex business challenges. HPM Networks has designed solutions for both SMB and enterprise customers throughout the San Francisco Bay Area.
The enterprise is being consumerized, and the consumer is being enterprised. Moore's Law does not matter anymore, the future belongs to business virtualization powered by invisible service architecture, powered by hyperscale and hyperconvergence, and facilitated by vertical streaming and horizontal scaling and consolidation. Both buyers and sellers want instant results, and from paperwork to paperless to mindless is the ultimate goal for any seamless transaction. The sweetest sweet spot in innovation is automation. The most painful pain point for any business is the mismatch between supplies a...
The broad selection of hardware, the rapid evolution of operating systems and the time-to-market for mobile apps has been so rapid that new challenges for developers and engineers arise every day. Security, testing, hosting, and other metrics have to be considered through the process. In his session at Big Data Expo, Walter Maguire, Chief Field Technologist, HP Big Data Group, at Hewlett-Packard, will discuss the challenges faced by developers and a composite Big Data applications builder, focusing on how to help solve the problems that developers are continuously battling.
SYS-CON Events announced today that IBM Cloud Data Services has been named “Bronze Sponsor” of SYS-CON's 17th Cloud Expo, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. IBM Cloud Data Services offers a portfolio of integrated, best-of-breed cloud data services for developers focused on mobile computing and analytics use cases.
As enterprises capture more and more data of all types – structured, semi-structured, and unstructured – data discovery requirements for business intelligence (BI), Big Data, and predictive analytics initiatives grow more complex. A company’s ability to become data-driven and compete on analytics depends on the speed with which it can provision their analytics applications with all relevant information. The task of finding data has traditionally resided with IT, but now organizations increasingly turn towards data source discovery tools to find the right data, in context, for business users, d...
SYS-CON Events announced today that MobiDev, a software development company, will exhibit at the 17th International Cloud Expo®, which will take place November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. MobiDev is a software development company with representative offices in Atlanta (US), Sheffield (UK) and Würzburg (Germany); and development centers in Ukraine. Since 2009 it has grown from a small group of passionate engineers and business managers to a full-scale mobile software company with over 150 developers, designers, quality assurance engineers, project manage...
Learn how IoT, cloud, social networks and last but not least, humans, can be integrated into a seamless integration of cooperative organisms both cybernetic and biological. This has been enabled by recent advances in IoT device capabilities, messaging frameworks, presence and collaboration services, where devices can share information and make independent and human assisted decisions based upon social status from other entities. In his session at @ThingsExpo, Michael Heydt, founder of Seamless Thingies, will discuss and demonstrate how devices and humans can be integrated from a simple clust...
SYS-CON Events announced today that Cloud Raxak has been named “Media & Session Sponsor” of SYS-CON's 17th Cloud Expo, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Raxak Protect automates security compliance across private and public clouds. Using the SaaS tool or managed service, developers can deploy cloud apps quickly, cost-effectively, and without error.
Who are you? How do you introduce yourself? Do you use a name, or do you greet a friend by the last four digits of his social security number? Assuming you don’t, why are we content to associate our identity with 10 random digits assigned by our phone company? Identity is an issue that affects everyone, but as individuals we don’t spend a lot of time thinking about it. In his session at @ThingsExpo, Ben Klang, Founder & President of Mojo Lingo, will discuss the impact of technology on identity. Should we federate, or not? How should identity be secured? Who owns the identity? How is identity ...