Building client-centric web applications: Triggering a partial page update from client script

During my talk at ADNUG the other night when I spoke about building client-centric applications, I explained how ASP.NET Ajax arms us with a set of Server Controls as well as Client Controls:

Picture source: http://www.asp.net/ajax/documentation/live/overview/default.aspx 

When you start your Ajaxian experience, it is highly likely that it will be done in a server-centric manner – that is, by driving the page solely with Server Controls such as the UpdatePanel and UpdateProgress to deliver Ajax experiences.

The UpdatePanel is a truly magic control in that how it allows us to easily update fragments of a page without incurring the cost of a full page postback.  You might do this in a scenario similar to the following one:

Update Panel Scenario

You have a feedback form on the page.  When users submit new feedback, the form is cleared and their feedback is added to a list of existing feedback entries without incurring a full page postback.

UpdatePanelScenario

The needs of the above scenario can easily be met using UpdatePanel’s alone.  Simply wrap both controls inside of the ContentTemplate of an UpdatePanel and ‘voila’, your page works in an async mode.  The reason that this works is because the button that submits the feedback also acts as a Trigger for the UpdatePanel to do its work – both on the client and server.

There are however, lots of times when you don’t have a button that can be used as a trigger to kick off a partial update.  Don’t get me wrong, you can do quite a bit with just UpdatePanel’s, but in a real web application you are likely to use a mixture of server-centric and client-centric code scenarios.  One such an scenario might be something like this:

Non-Update Panel Scenario

You have a dynamically generated DIV element which acts as a context menu.  When the user right clicks on the page, you display the context menu.  From within this dynamic context menu, users can add pins to a map.  On adding a pin, a partial page update is done to refresh a list of the users favorite entries.

UpdatePanelScenario1

In this case, because so much of the UI interaction is controlled via DHTML in the client, you won’t be able to rely on the Button ServerControl to act as the trigger.  So we have to find some other way to kick-off the partial update process from within the browser.

Triggering a partial page update from client script

Turns out that we can use standard old __doPostBack scripts to trigger the partial update process.  When you have UpdatePanels registered on your page, standard __doPostBack’s are intercepted by the client side framework to detect whether or not they are to be processed as triggers.  This process is described in the following article:

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

To get a __doPostBack script that can be used to kick off a partial update is as easy as adding the following code to your server side Page Load event handler:

ClientScriptManager cm = Page.ClientScript;
string pb = cm.GetPostBackEventReference(this.upFeedbackEntries, "");
string callbackScript = "function CallServer() {" + pb + "; }";
cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);

The effect of this is that we now have a client side function called CallServer which has an appropriate __doPostBack call within it’s body to kick off a partial update for the UpdatePanel called upFeedbackEntries.  The finished CallServer function will look like so and can be called by client side code at any time to invoke a partial update:

function CallServer() {
    __doPostBack(‘upFeedbackEntries’, ”) ;
}

Now, whenever you need to perform a partial update from your page, you can invoke the CallServer method to do so.

Advertisements

~ by D on November 24, 2007.

9 Responses to “Building client-centric web applications: Triggering a partial page update from client script”

  1. Welcome to enter (wow gold) and (wow power leveling) trading site, (wow gold) are cheap, (wow power leveling) credibility Very good! Quickly into the next single! Key words directly to the website click on transactions! -134996235625838

  2. Key words click link to see (wow power leveling) and (wow gold) the discounted prices!

  3. Hi,Do you have second hand lcds, used laptop lcds and used LCD displays? Please go here:www.sstar-hk.com(Southern Stars).We are constantly buying re-usable LCD panels.We recycled LCDs.The re-usable panels go through strictly designed process of categorizing, checking, testing, repairing and refurbishing before they are re-used to make remanufactured LCD displays and TV sets.Due to our recent breakthrough in testing and repairing technology of LCD, we can improve the value for your LCD panels.
    website:www.sstar-hk.com[cdbbdadchiagjj]

  4. Hi,Do you need advertising displays, screen advertisings, digital sign, digital signages and LCDs? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.
    amberdigital Contact Us
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[dejbfhdgfbcafbc]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: