Welcome to another AJAX tutorial, today we demonstrate how to build tabbed content in an ASP.NET AJAX web app using C#.

For this tutorial we will be building a tabbed content browse, when a user clicks on a corresponding tab we will be using AJAX to send and receive the appropriate data between the tabs .

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 now begin by styling our tabs and assigning 3 IDs

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

Now these are styled very conservatively for the purpose of this tutorial, you may style your tabs however you’d wish. Feel free to modify the colors and styles in the CSS below.

he 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.

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 it.

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

Here is the XHTML that is needed for the styles above: As you can see it is very simple and straight forward, since everything will be done with AJAX.

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. If you are following our styles, the page should look something similar to this.

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

We will explain the method and the function of the JavaScript below.

First you will see the first function init(), which is attached to the body onload, in which will set up the OnClick events for the tabs. Now we will receive 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 they 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 variable to tell the AJAX object what parameters we will pass to the server side.

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.

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

Download Source Files