This control is now available from my CodePlex project @ http://www.codeplex.com/AspNetAjaxControls.

The following question has been raised many times: How can I force an UpdatePanel to postback from client-side JavaScript?  The most common answers I’ve seen include using invisible server-side web controls within an UpdatePanel, and calling __doPostback() with the UpdatePanel’s ClientID as the postback target. 

Both of the above answers definitely work, but they don’t seem to be an elegant solution and they don’t provide the additional functionality that developers typically require.

I set out to provide the following functionality in my solution:

1. Create an ASP.NET AJAX Extender control to encapsulate the UpdatePanel extensions.
2. Provide an easy to use client-side function to initiate the postback.
3. Provide a server-side “Command” event to allow the developers flexibility once the UpdatePanel postback occurs.
4. Expose client-side events during the lifecycle of the UpdatePanel postback.

The UpdatePanelExtender defines the following properties on both the client and the server:

1. TargetControlID – Standard ControlID to link the extender with the UpdatePanel.
2. CommandArgument – An optional argument to be passed during the UpdatePanel postback.
3. CausesValidation – Whether or not the client-side postback call triggers ASP.NET validation prior to the postback.
4. ValidationGroup – The ASP.NET validation group to use during validation.
5. ClientEvents – Collection of events to wire-up during the UpdatePanel postback.

All of the properties can be manipulated on the client using the standard ASP.NET AJAX client-side syntax.

<script type="text/javascript">
    function update()
    {
        var upExtender = $find('upe1');
        upExtender.set_commandArgument('Hello World!');
        upExtender.postback();
    }
</script>

The $find() syntax for getting a reference to the extender control is optional.  I chose to create a global client-side variable with the same name as the extenders ClientID during the extenders initialization.

The common problem that I faced when I wanted to cause an UpdatePanel postback from client-side script is how to manipulate the controls during my postback when there isn’t any event to handle.

To solve this problem I chose to implement a server-side Command event which fires on the server during the UpdatePanel postback.  The developer now has the opportunity to handle the event and optionally take advantage of any command argument that may have been passed during the postback.

protected void upe_Command(Object sender, CommandEventArgs e)
{
    dateTime.Text = String.Format("Date: {0}, CommandArgument: {1}", DateTime.Now, e.CommandArgument);
    dateTime2.Text = String.Format("Date: {0}, CommandArgument: {1}", DateTime.Now, e.CommandArgument);
}

The client-side events that are exposed within the extender come directly from the Sys.WebForms.PageRequestManager Class, but only those pertaining to the extenders UpdatePanel will fire.  This allows you to include multiple UpdatePanels, each with their individual extender control and event handlers.

1. initializeRequest - Raised during the initialization of the asynchronous postback.
2. beginRequest - Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
3. pageLoading - Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated.
4. pageLoaded - Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback.
5. endRequest - Raised after an asynchronous postback is finished and control has been returned to the browser.

In sample 1, two UpdatePanels have been added to a page each with an UpdatePanelExtender control.

<ae:UpdatePanelExtender ID="upe1" TargetControlID="up1" OnCommand="upe_Command" runat="server">
    <ClientEvents>
        <BeginRequest EventHandler="beginRequest" />
        <InitializeRequest EventHandler="initializeRequest" />
        <PageLoading EventHandler="pageLoading" />
        <PageLoaded EventHandler="pageLoaded" />
        <EndRequest EventHandler="endRequest" />
    </ClientEvents>
</ae:UpdatePanelExtender>

I hope you’ve enjoyed reading about this control and some of its common uses.  Please feel free to contact me if you have any questions or comments.  I have also included the binary and source for this control as a download to this post.

Happy programming.