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.
I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
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.
<style type="text/css">
body
{
font-family: calibri;
font-size: 10px;
}
#container
{
width: 425px;
background-color: #52616F;
color: white;
}
.tabs
{
width: 50px;
margin-right: 10px;
padding: 4px;
text-align: center;
float: left;
cursor: pointer;
border: 1px solid #ccc;
border-bottom: 0;
}
#content
{
height: 350px;
clear: both;
border: 1px solid #ccc;
}
#load
{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
background-color: red;
color: white;
display: none;
}
</style>
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.
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.
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.
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.
<center>
<div id="load">
Give it a Sec..</div>
<div id="container">
<div class="tabs" id="tab1">
Zone 1
<div class="tabs" id="tab2">
Zone 2
<div class="tabs" id="tab3">
Zone 3
<div class="tabs" id="tab4">
Zone 4
<div id="content">
</div>
</center>
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!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.
<script type="text/javascript">
function initundefined) {
var tabs = document.getElementsByClassNameundefined'tabs');
for undefinedvar i = 0; i < tabs.length; i++) {
$undefinedtabs[i].id).onclick = function undefined) {
getTabDataundefinedthis.id);
}
}
}
function getTabDataundefinedid) {
var url = 'demos/ajax-tabs/process.php';
var rand = Math.randomundefined9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Requestundefinedurl, { method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse });
}
function showLoadundefined) {
$undefined'load').style.display = 'block';
}
function showResponseundefinedoriginalRequest) {
var newData = originalRequest.responseText;
$undefined'load').style.display = 'none';
$undefined'content').innerHTML = newData;
}
initundefined);
</script>
See how easy that was?Not as easy when,
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
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.
