Would you like to get paid for signing up for a web hosting plan with Bluehost.com?
Powered by MaxBlogPress 

Would you like to get paid for signing up for a web hosting plan with Bluehost.com?
Powered by MaxBlogPress 

Implement Ajax CollapsiblePanelExtender in ASP.NET page

Posted on May 2, 2009
Filed Under Development, Programming | Leave a Comment

If you've enjoyed reading this post then please subscribe to my Full Text RSS Feed.

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

Example

An expanded control

Example

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.

aj2

Design mode view in the aspx page.

Example

Code view in the aspx page

Example

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.

Example

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.

aj1

Next step:

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

Bookmark and Share
Sphere: Related Content

Other Related Posts:

  • Using ASP.NET Extenders Part II
  • Using ASP.NET AJAX Extenders Part I
  • Beginning Ajax with Visual Studio 2005
  • Twitter Weekly Updates for 2009-05-03
  • Gmail 2.0


    • If you've enjoyed reading this post then why not subscribe to received updates by email.

    Enter your email address:

    Delivered by FeedBurner

    Email This Post Email This Post

    Trackback This Post

    Comments

    Leave a Reply




    CommentLuv Enabled

    Twitter

    Posting tweet...

    Powered by Twitter Tools