|By Michael Earls||
|May 20, 2005 11:00 AM EDT||
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.
border: solid 1px black;
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:
border-right: solid 1px black;
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.
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.
|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.
|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.
Software AG helps organizations transform into Digital Enterprises, so they can differentiate from competitors and better engage customers, partners and employees. Using the Software AG Suite, companies can close the gap between business and IT to create digital systems of differentiation that drive front-line agility. We offer four on-ramps to the Digital Enterprise: alignment through collaborative process analysis; transformation through portfolio management; agility through process automation and integration; and visibility through intelligent business operations and big data.
Sep. 29, 2014 09:30 PM EDT Reads: 1,161
There will be 50 billion Internet connected devices by 2020. Today, every manufacturer has a propriety protocol and an app. How do we securely integrate these "things" into our lives and businesses in a way that we can easily control and manage? Even better, how do we integrate these "things" so that they control and manage each other so our lives become more convenient or our businesses become more profitable and/or safe? We have heard that the best interface is no interface. In his session at Internet of @ThingsExpo, Chris Matthieu, Co-Founder & CTO at Octoblu, Inc., will discuss how these devices generate enough data to learn our behaviors and simplify/improve our lives. What if we could connect everything to everything? I'm not only talking about connecting things to things but also systems, cloud services, and people. Add in a little machine learning and artificial intelligence and now we have something interesting...
Sep. 29, 2014 06:45 AM EDT Reads: 1,789
Last week, while in San Francisco, I used the Uber app and service four times. All four experiences were great, although one of the drivers stopped for 30 seconds and then left as I was walking up to the car. He must have realized I was a blogger. None the less, the next car was just a minute away and I suffered no pain. In this article, my colleague, Ved Sen, Global Head, Advisory Services Social, Mobile and Sensors at Cognizant shares his experiences and insights.
Sep. 28, 2014 09:45 AM EDT Reads: 1,471
We are reaching the end of the beginning with WebRTC and real systems using this technology have begun to appear. One challenge that faces every WebRTC deployment (in some form or another) is identity management. For example, if you have an existing service – possibly built on a variety of different PaaS/SaaS offerings – and you want to add real-time communications you are faced with a challenge relating to user management, authentication, authorization, and validation. Service providers will want to use their existing identities, but these will have credentials already that are (hopefully) irreversibly encoded. In his session at Internet of @ThingsExpo, Peter Dunkley, Technical Director at Acision, will look at how this identity problem can be solved and discuss ways to use existing web identities for real-time communication.
Sep. 27, 2014 11:30 PM EDT Reads: 1,823
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. Attendees will learn real-world benefits of WebRTC and explore future possibilities, as WebRTC and IoT intersect to improve customer service.
Sep. 27, 2014 10:30 PM EDT Reads: 1,751
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 Internet of @ThingsExpo, Ivelin Ivanov, CEO and Co-Founder of Telestax, will share 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, an Open Source Cloud Communications company that helps the shift from legacy IN/SS7 telco networks to IP-based cloud comms. An early investor in multiple start-ups, he still finds time to code for his companies and contribute to open source projects.
Sep. 27, 2014 10:30 PM EDT Reads: 2,228
The Internet of Things (IoT) promises to create new business models as significant as those that were inspired by the Internet and the smartphone 20 and 10 years ago. What business, social and practical implications will this phenomenon bring? That's the subject of "Monetizing the Internet of Things: Perspectives from the Front Lines," an e-book released today and available free of charge from Aria Systems, the leading innovator in recurring revenue management.
Sep. 27, 2014 09:45 PM EDT Reads: 2,399
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.
Sep. 27, 2014 08:45 PM EDT Reads: 2,290
There’s Big Data, then there’s really Big Data from the Internet of Things. IoT is evolving to include many data possibilities like new types of event, log and network data. The volumes are enormous, generating tens of billions of logs per day, which raise data challenges. Early IoT deployments are relying heavily on both the cloud and managed service providers to navigate these challenges. In her session at 6th Big Data Expo®, Hannah Smalltree, Director at Treasure Data, to discuss how IoT, Big Data and deployments are processing massive data volumes from wearables, utilities and other machines.
Sep. 27, 2014 01:00 PM EDT Reads: 1,981
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 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!
Sep. 27, 2014 11:00 AM EDT Reads: 2,089
P2P RTC will impact the landscape of communications, shifting from traditional telephony style communications models to OTT (Over-The-Top) cloud assisted & PaaS (Platform as a Service) communication services. The P2P shift will impact many areas of our lives, from mobile communication, human interactive web services, RTC and telephony infrastructure, user federation, security and privacy implications, business costs, and scalability. In his session at Internet of @ThingsExpo, Erik Lagerway, Co-founder of Hookflash, will walk through the shifting landscape of traditional telephone and voice services to the modern P2P RTC era of OTT cloud assisted services.
Sep. 26, 2014 11:45 PM EDT Reads: 1,463
While great strides have been made relative to the video aspects of remote collaboration, audio technology has basically stagnated. Typically all audio is mixed to a single monaural stream and emanates from a single point, such as a speakerphone or a speaker associated with a video monitor. This leads to confusion and lack of understanding among participants especially regarding who is actually speaking. Spatial teleconferencing introduces the concept of acoustic spatial separation between conference participants in three dimensional space. This has been shown to significantly improve comprehension and conference efficiency.
Sep. 26, 2014 10:45 PM EDT Reads: 1,404
The Internet of Things is tied together with a thin strand that is known as time. Coincidentally, at the core of nearly all data analytics is a timestamp. When working with time series data there are a few core principles that everyone should consider, especially across datasets where time is the common boundary. In his session at Internet of @ThingsExpo, Jim Scott, Director of Enterprise Strategy & Architecture at MapR Technologies, will discuss single-value, geo-spatial, and log time series data. By focusing on enterprise applications and the data center, he will use OpenTSDB as an example to explain some of these concepts including when to use different storage models.
Sep. 26, 2014 07:45 PM EDT Reads: 2,239
SYS-CON Events announced today that Gridstore™, the leader in software-defined storage (SDS) purpose-built for Windows Servers and Hyper-V, will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Gridstore™ is the leader in software-defined storage purpose built for virtualization that is designed to accelerate applications in virtualized environments. Using its patented Server-Side Virtual Controller™ Technology (SVCT) to eliminate the I/O blender effect and accelerate applications Gridstore delivers vmOptimized™ Storage that self-optimizes to each application or VM across both virtual and physical environments. Leveraging a grid architecture, Gridstore delivers the first end-to-end storage QoS to ensure the most important App or VM performance is never compromised. The storage grid, that uses Gridstore’s performance optimized nodes or capacity optimized nodes, starts with as few a...
Sep. 26, 2014 06:15 PM EDT Reads: 1,579
The Transparent Cloud-computing Consortium (abbreviation: T-Cloud Consortium) will conduct research activities into changes in the computing model as a result of collaboration between "device" and "cloud" and the creation of new value and markets through organic data processing High speed and high quality networks, and dramatic improvements in computer processing capabilities, have greatly changed the nature of applications and made the storing and processing of data on the network commonplace. These technological reforms have not only changed computers and smartphones, but are also changing the data processing model for all information devices. In particular, in the area known as M2M (Machine-To-Machine), there are great expectations that information with a new type of value can be produced using a variety of devices and sensors saving/sharing data via the network and through large-scale cloud-type data processing. This consortium believes that attaching a huge number of devic...
Sep. 26, 2014 06:00 PM EDT Reads: 1,508
Innodisk is a service-driven provider of industrial embedded flash and DRAM storage products and technologies, with a focus on the enterprise, industrial, aerospace, and defense industries. Innodisk is dedicated to serving their customers and business partners. Quality is vitally important when it comes to industrial embedded flash and DRAM storage products. That’s why Innodisk manufactures all of their products in their own purpose-built memory production facility. In fact, they designed and built their production center to maximize manufacturing efficiency and guarantee the highest quality of our products.
Sep. 26, 2014 05:00 PM EDT Reads: 1,509
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. Over the summer Gartner released its much anticipated annual Hype Cycle report and the big news is that Internet of Things has now replaced Big Data as the most hyped technology. Indeed, we're hearing more and more about this fascinating new technological paradigm. Every other IT news item seems to be about IoT and its implications on the future of digital business.
Sep. 26, 2014 10:00 AM EDT Reads: 1,996
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. Download Slide Deck: ▸ Here
Sep. 26, 2014 10:00 AM EDT Reads: 1,465
BSQUARE is a global leader of embedded software solutions. We enable smart connected systems at the device level and beyond that millions use every day and provide actionable data solutions for the growing Internet of Things (IoT) market. We empower our world-class customers with our products, services and solutions to achieve innovation and success. For more information, visit www.bsquare.com.
Sep. 26, 2014 09:45 AM EDT Reads: 1,359
With the iCloud scandal seemingly in its past, Apple announced new iPhones, updates to iPad and MacBook as well as news on OSX Yosemite. Although consumers will have to wait to get their hands on some of that new stuff, what they can get is the latest release of iOS 8 that Apple made available for most in-market iPhones and iPads. Originally announced at WWDC (Apple’s annual developers conference) in June, iOS 8 seems to spearhead Apple’s newfound focus upon greater integration of their products into everyday tasks, cross-platform mobility and self-monitoring. Before you update your device, here is a look at some of the new features and things you may want to consider from a mobile security perspective.
Sep. 26, 2014 09:00 AM EDT Reads: 1,347