Ajax, Asp.net Ajax, jQuery – Misconceptions and Facts

HeartattacK — Wed, 09 Dec 2009 18:24:00 GMT

There seems to be some confusion among a lot of developers about Asp.net Ajax. This article will hopefully clear some doubts regarding what it is, what it isn’t and where jQuery comes in.

Note: Cross posted from Heartysoft.com.
Permalink

How to Show / Hide a ModalPopupExtender using Javascript

HeartattacK — Wed, 06 May 2009 06:10:36 GMT

If we have a ModalPopupExtender with the id ‘modPopup_ModalPopupExtender’, and need to display or hide it in javascript, we can easily do this using the $find() function.

Let’s see this in action:

ASPX:

Javascript:

The code is pretty self explanatory. Hope that helps.

ACT: CollapsiblePanelExtender - How to Collapse / Expand Programmatically

HeartattacK — Fri, 21 Nov 2008 02:00:00 GMT

The CollapsiblePanelExtender is a cool way to convert simple panels to collapsible ones. It usually has a target panel, a control which can make it collapse, another (or the same) control to make it expand etc. Clicking the said controls will trigger the collapse/open behaviour.

We may need to sometimes control this behaviour from code - both client side javascript and server side code behind. Suppose we have a CollapsiblePanelExtender with the Id 'cpe1'. We wish to manipulate the state via code.

Client Side

Client side manipulation is pretty simple and can be found in the tutorials section in www.asp.net/learn - we just need to call these methods:

To open: $find('cpe1')._doOpen();
To close: $find('cpe1')._doClose();

The $find tracks down the behaviour object and calls the _doOpen or _doClose methods.

Server Side

This is surprisingly slightly trickier. You'd think that just calling

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), DateTime.Now.ToString(), "$find('cpe1')._doOpen();", true);

would work. It doesn't. Any attempt to call $find('cpe1') results in a null. This is likely because of the fact that behaviours are added at the end and our script gets registered before the behaviour is available. The actual way to do it is actually quite simple (once you know how):

To open: cpe1.Collapsed = true; cpe1.ClientState = "true";
To close: cpe1.Collapsed = false; cpe1.ClientState = "false";

Setting just the Collapsed property is not enough, you need to set both. It's actually a lot less messy than registering javascript, but it is very annoying until you know it.

Hope that helps.

HeartattacK : AJAX Control Toolkit

Ajax, Asp.net Ajax, jQuery – Misconceptions and Facts

How to Show / Hide a ModalPopupExtender using Javascript

ACT: CollapsiblePanelExtender - How to Collapse / Expand Programmatically