Implementation of Ajax based Tabs Layout in asp.net with CSS

Recently,I have implemented Ajax Tabs layout in Asp.net web application with the combination of css.Here I would like to explain the procedure How to Ajax Tabs in Asp.net with example.Immediately a questions raises why to use Ajax not jquey for implementing Tabs...?
Why because, we already know the importance of Ajax.For simple explanation Have a look about Ajax 

 Ajax (Asynchronous JavaScript and XML) : Its a Technique to update small amounts of data without refreshing the whole page.That means,Client side application will communicate with server side application.

 Now start the procedure to implement the Tabs layout in Asp.net First we need to add Ajax Control toolkit to your Toolbox.Check this tutorial  here you will get the complete information about Ajax Toolkit Once you added the Ajax toolkit to your Toolbox successfully.Then start the implementation 

Follow the steps


1.First Open the Default.aspx page


2.Next Open the Design Mode of Default page that is Default.aspx 


3.Next, Drag and Drop one Tab container from Tool Box and one script manager .Then code will look like this

Note : Check this line in your aspx page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

its very important to Register your tag 


4.Next add the tabs to the tab container(Depend up on your Requirement).Here i am added 3 tabs

5.Next we need to change the Properties of Tabs 


a.Change the Tab names HeaderText="TabPanel1" 


b.Next confirm that which Tab you need to display first when page starts ActiveTabIndex="0" or "1" or "2" 


c.Enabled="true" 


d.ScrollBars="Auto" 


e.AutoPostBack="false" 


f.Height="150px" and weight="500px" 


These are default properties 

6.Next add css class in order to apply the Background colors,Fonts etc.., 


7.Finally the code will be look like this

    
    


    

        
    


        
            
                Developers Code
            
        
        

This is Tab1 

             Developers Code is a Technology Blog for .Net Developers

             

             http://www.developerscode.com/
        
        
        
        
             


This is Tab2 

Mobile Developers Code is a Technology Blog for Android Developers

             

             http://mobile.developerscode.com/
                
        
        
        
               



This is Tab3 

Demos of Developers Code Blog 

             

             http://demos.developerscode.com/
        
        

    

Thats it..Happy Coding......:)