Abstract

The ASP.NET AJAX Toolkit is a new and powerful control in ASP.NET 2.0. It is designed for you to develop web applications that are more responsive, faster, and put fewer loads on the network, while using the .NET-based Ajax framework. This article will use one of ASP.NET AJAX Toolkit's controls - CollapsiblePanel to demonstrate the benefit by using it.

Introduction

It is an acronym for a couple of technologies that make it possible for developers to update a web page content at the control level without having to do a complete page refresh. For more details about ASP.NET AJAX please go to (http://ajax.asp.net/). The Codeplex team have made amazing controls that makes the life a lot easier for an ASP.NET programmer (more sleep and spending time with family & friends). These amazing controls are so called "ASP.NET AJAX Toolkit". 

System Requirements

• This application requires the user to have a copy of Visual Studio.NET 2005 (or you can download express edition at http://msdn.microsoft.com/vstudio/express/ )
• ASP.NET AJAX 1.0 RC (http://ajax.asp.net/default.aspx?tabid=47&subtabid=471)
• ASP.NET AJAX Toolkit (http://ajax.asp.net/default.aspx?tabid=47&subtabid=471)
• SQL 2005 database(with sample AdventureWorks database)

The article assumes a familiarity with C#, as well as with using Visual Studio.NET 2005 to create ASP.NET applications. Elementary knowledge of ASP.NET AJAX extension library, Asynchronies Post back, ADO.NET and HTML would be beneficial but not absolutely necessary to fully understand the content of this article.

Advantage to use CollapsiblePanel

In the usual design way, if you want to show information between 2 objects. You would usually use Http Post as Figure 1 or Post back as Figure 2

Figure 1 HTTP Post between two pages

Figure 2. Get detail by Post back

Of course there is nothing wrong with these two designs, but what if we can make it better and faster?

Now let's see how CollapsiblePanel can make it better, with CollapsiblePanel, you don't have to worry about the table or controls are too long for the page. You can always collapse and expand to save space as Figure 3.

Figure 3. Easy to collapse and expand

There is no page refresh when button click event fire up as Figure 4

Figure 4 no page refresh when Employee ID click

Create CollapsiblePanel on ASP.NET page

**Please download the code and walkthrough it with each step

Step 1. Create ASP.NET project

Step 2. Ensure toolbox has AJAX Extensions tab.

Figure 5. AJAX Extensions in Toolbox

If you dont see the AJAX Extensions in Toolbox, then you need to manually add new registry as below

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\.NETFramework\AssemblyFolders\ASP.NET AJAX 1.0.61025] @="c:\\Program Files\\Microsoft ASP.NET\\ASP.NET 2.0 AJAX Extensions\\v1.0.61025" by regedit

Step 3. Import AJAX Control Toolkit

Right click on Toolbox and select Add Tab as Figure 6.

Figure 6. Add new tab in Toolbox

Type "AJAX Control Toolkit" in the blank tab name as Figure 7.

Figure 7. Insert name to the blank new tab

Under .NET Framework Components tab, please click Browse to AjaxControlToolkit.dll from the directory you installed before as Figure 8.

Figure 8. Browse to AjaxControlToolkit.dll

Now you should see all the Ajax controls are display there, and then click OK as Figure 9.
 

Figure 9. AjaxControlToolkit controls

Figure 10. AJAX Control Toolkit in Toolbox

Step 4. Drag and Drop ScriptManager to aspx page

To use most of ASP.NET AJAX Control, you need ScriptManager in the page as Figure 11.

Figure 11 Drag ScriptManager to asp,net page

Step 5. Create panel for Introduction title and panel for Introduction content

Step 6. Create panel for Employee List title and panel for Employee List content

Step 7. Create panel for Employee Detail title and panel for Employee Detail content

Step 8.  Drag 3 CollapsiblePanelExtenders to the form page

Figure 12. 3 CollapsiblePanelExtenders in the page.

Step 9. Apply each CollapiblePanelExtender control with panels

In the Design View you should see those Ajax control as Figure 13

Figure 13. ScriptManager and 3 CollapsiblePanelExtenders on Design View

Now you should able to collapse and expand on those title panels as Figure 14. The only thing still need to modify is to avoid page refresh when click Employee ID hyper link.

Figure 14. The panels can be collapse and expand

Step 10. Add UpdatePanel to avoid page refresh

Figure 15 UpdatePanel in the page

Step 11. Add ContentTemplate tag within UpdatePanel

Figure 16. Add ContentTemplate

Step 12. Wrap all 3 CollapsiblePanelExtender controls, 3 title panels and 3 content panels inside of <asp: UpdatePanel><ContentTemplate>

Another cool property in CollapsiblePanel - ScrollContents

If you set ScrollContents to true, you can see the scroll bar in the content panel as Figure 17

CollapsedImage="App_Themes/CollapsiblePanel/images/BackgroundIntroduction.png" SuppressPostBack="True" ScrollContents=true ></cc1:CollapsiblePanelExtender> 

Figure 17 scroll bars in content panel