Trigger UpdatePanel via Client Side Javascript

ClientAsyncPostBackTrigger is a simple UpdatePanelControlTrigger implementation which permits to trigger un ASP.NET AJAX UpdatePanel just by writing pure javscript client-side code.

I think that this article will result an useful one: it's about triggering an UpdatePanel using client-side (javascript) code. Independently from controls or whatever else, just pure runtime code!

I've been extending the System.Web.UI.UpdatePanelControlTrigger which comes with the ASP.NET AJAX 1.0 package in a "tricky" way.
The core of what I did is pretty straightforward: it's about adding at runtime a Button instance to the UpdatePanel ContentTemplate and triggering its postback client reference.

class diagram

Here's a bit of code which shows how to use it in a common scenario:

<!-- CLIENT SIDE CODE -->
<asp:ScriptManager runat="server" ID="sm" EnablePartialRendering="true">
</asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="upd" UpdateMode="Conditional">
    <Triggers>
        <pacem:ClientAsyncPostBackTrigger ClientTriggerFunction="doTrigger"  />
    </Triggers>
    <ContentTemplate>
        
        [<asp:Label runat="server" ID="lbl" />]
    
    </ContentTemplate>
</asp:UpdatePanel>

<asp:HiddenField runat="server" ID="hid" />

<script type="text/javascript">
//<![CDATA[
    var iter = 0;
    
    function preTrigger(v){
        iter += v;
        $get("<%=hid.ClientID %>").value = iter;
        doTrigger();
    }
//]]>
</script>

<a href="javascript:preTrigger(1);">click to trigger up!</a>
|
<a href="javascript:preTrigger(-1);">click to trigger down!</a>

...and the dummy server-side one:

<!-- SERVER SIDE CODE -->
void Page_Load(object o, EventArgs e)
{
    if (IsPostBack) lbl.Text = "postback response: " + hid.Value.ToString();
}

Just a screenshot to witness the correct functioning:

screenshot

The class code can be downloaded from the link below.

zip file « download code

Take care. Bye.

Feedbacks

  • Re: Trigger UpdatePanel via Client Side Javascript

    Luca (Thursday, November 08, 2007 11:59 AM)

    “L'idea è molto buona, ma se non sbaglio la routine Inizialize() di cui tu fai l'override è dichiarata Protected Friend nella classe UpdatePanelTrigger, quindi non viene mai eseguita!”

  • Re: Trigger UpdatePanel via Client Side Javascript

    CMerighi (Thursday, November 08, 2007 2:29 PM)

    “...Sbagli. ;)
    Contrariamente a quanto molti pensano, Protected Friend (o protected internal in C#) non significa Protected AND Friend bensì Protected OR Friend! Percui il membro così marchiato è visibile SIA da parte delle classi che sono impacchettate nello stesso assembly (guarda infatti come Initialize() viene richiamato nel metodo InsertItem della classe UpdatePanelTriggerCollection) SIA da parte delle classi che ereditano dall'oggetto che contiene tale membro...”

SL2