This tutorial will demonstrate how to build tabbed content in an ASP.NET 3.5 AJAX Web App C#

In this tutorial we will be using AJAX to build a tabbed content browser. So when a user clicks a tab the AJAX will send and receive the appropriate data for the corresponding tab. To begin, we will start with a new ASP.NET Web Site. Open Visual Studio > File > New > Web Site > ASP.NET and name it ajaxTabs or whatever you want.

We will need three IDs (one for container, one for content area, and one for the loading status) with an ID class for the tabs.

Above, the first ID #container will hold the tabs and the content area. We will only give this a width which everything inside can inherit from. The .tabs class is primarily for appearance and will style our tabs.

Notice the property inside .tabs class is the .float:left and cursor:pointer. The .float:left horizontally aligns the tabs and the cursor:pointer allows the user to mouse over the tab to give it the look and feel of a button.

Above, we also have the ID #content area which can be changed depending on how much content you want. We also set the clear property to clear:both because we have all the tabs floated left and this makes the content div break into a new line just beneath.

The #load style is used for when AJAX communicates with the server. We set the diplay to display:none so that it only shows when the page is loading…

Here is the XHTML that is needed for the styles above:

The XHTML above should be straight-forward. We create the container div with all the tab divs and the content div. Then we apply the correct ID or class to the corresponding div.

Ok. The XHTML and CSS are complete. Now we will code a little using JavaScript/Ajax.

Below the first function init(), which is attached to the body onload, will set up the OnClick events for the tabs. Now we will recieve the tabs as objects by using Prototype’s getElementsByClassName function. This returns an array of all elements with the class name provided as a parameter. Then we need to loop through the array and add an OnClick function.

Now set up the tabs so when are clicked they trigger getTabData and pass it the tab ID so that the server side can figure out which data to pass back to the content area. We set the URL which is what will determine what data to pass back, and we also created a new variable called rand. That variable ensures the content is NEVER cached on the server side.

Now we need to create our parameters variables to tell the Ajax object what parameters we will pass to the server side. Then we create an AJAX object, set the method to get, pass in the parameters and set our event functions for the object.

The showLoad function changes the CSS style of the load div to block, ($(‘load’).style.display = ‘block’;), which notifies the user that the content is loading…

The showResponse function has a parameter of originalRequest (the data that is passed back from the server). Within this function we set the load div back to display:none and then populate the content div with the correct data that we get from the server.

Download Source Files