Implement Ajax CollapsiblePanelExtender in ASP.NET page

It has never been easier to add Ajax controls to ASP.NET using Visual Studio. There are two approaches to implementing Ajax controls in an ASP.NET page. The first approach is to add the control and its properties to the aspx page. The second approach is to add the control to the aspx page and then write the code in the code-behind page. The example which I am going to show you will use the first approach and the Ajax control that I will implement is the CollapsiblePanelExtender.

Here is an example to show you what the CollapsiblePanelExtender will do in your browser. The CollapsiblePanelExtender will allow you to expand the panel on an ASP.NET page to display its content by clicking the control. It will not do a server-side post back and the page does not refresh in the browser. Alternatively you can collapse or hide the content by clicking on the expanded control.

A collapse control

An expanded control

Here’s how we create it in ASP.NET

1. Add the Ajax ScriptManager and CollapsiblePanelExtender controls to the aspx page. You simply drag and drop the controls onto the aspx page in design mode.

Design mode view in the aspx page.

Code view in the aspx page

You will notice that the TargetControlID, CollapseControlID and ExpandControlID properties refer to Panel controls. That’s right, we have to add the Panel controls as we haven’t done that earlier. You add the Panel control the same way as you added the ScriptManager and CollapsiblePanelExtender.

Finally, we have to added the css. You will notice that the Panel controls that we added reference to a CssClass=CollapsePanelHeader and CssClass=CollapsePanel. Add the following at the top of the aspx page between the Head tags.

Next step:

Compile your aspx page in Visual Studio and then run the aspx page.