How to use AjaxControlToolkit’s CollapsiblePanelExtender Control

Now a days , web development is no more boring and tough(at least creating good UI web pages) . AjaxControlToolkit is  new sensation in the web development . 

In this post and some upcoming posts ill be sharing  “HOW TO ”  explaination of these controls  available in AjaxControlToolkit.

Todays we will  discuss how to use   “CollapsiblePanelExtender” of AjaxControlToolkit.


(1) Add AjaxControlToolkit.dll to your toolbox so that you can access all the controls of it .

(2) Now create a new web project in your VS . 

(3) Add a Panel control on the page and add your contents in to it . Set its ID =Panel1

(4) Add  CollapsiblePanelExtender  control from AjaxControlToolkit toolboxlist which we just added in step 1.


  <cc1:CollapsiblePanelExtender ID=”Panel3_CollapsiblePanelExtender” 
                runat=”server” Enabled=”True” TargetControlID=”Panel3″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  CollapsedText=”Expand” ExpandedText=”Collapse” AutoCollapse=”true”>

  <cc1:CollapsiblePanelExtender ID=”CollapsiblePanelExtenderanel1″      runat=”server” Enabled=”True” TargetControlID=”Panel1″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  >            </cc1:CollapsiblePanelExtender>



(5)  Create a hyper link or any button or any  control from tool box , which you want to use to collapse and Expand the panel . I am using here a Hyperlink control .

 <asp:HyperLink ID=”hl” runat=”server” Text=”Cpllapse”></asp:HyperLink>

(6 ) Now press F5  and clcik on the Hyperlink on hte page .  It will expand the panel and clicking again  on it will collapse it . 

Note : Adding Script Manager control is mandatory to use  this toolkit’s control

thus we  can place many panels on our page and add CollapsiblePanelExtender  control to them . 

Enjoy 🙂


Ajax sample code for “Hello World” application

Hi ,
Today i am going to explain a simple “Hello World ” application  in , which will give you a basic idea about using ajax in your application .

(1)Create a web site in VS200*
(2)On the Page1.aspx , add the following code



function createRequestObject() {
var ro;
var browser = navigator.appName;
if (browser == “Microsoft Internet Explorer”) {
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
ro = new XMLHttpRequest();
return ro;

var http = createRequestObject();

function sndReq(action) {‘GET’, ‘Page2.aspx);
http.onreadystatechange = handleResponse;

function handleResponse() {
if (http.readyState == 4) {
var response = http.responseText;
// alert(response);
document.getElementById(‘MessBox’).value = response;


(3)Remove all the code from Page2.aspx and in Page2.aspx.cs, Page_Load add following code

protected void Page_Load(object sender, EventArgs e)
Response.Write(“I am coming from Page2 via Ajax call.”);

(4)Set page1 as startup page and click on button.
(5) Value dispalyed in text box is coming via ajax call.




 Ajax have changed the way of web development . it provides a lot of new and exciting features . Now AjaxControlToolkit   is  the new attraction . it has got many new controls and the extenders of tyhe existing controls like Calender, etc.

    Most important , this is an opensource . we can modify it as per our requirement .

Happy developennt .