Friday, June 12, 2009

Dynamically register UpdatePanel Trigger

Two approaches can be used to register the UpdatePanel Trigger:

1. At code behind, we can use UpdatePanel.Triggers.Add to add a dynamic trigger.

AsyncPostBackTrigger Trigger1 = new AsyncPostBackTrigger();
Trigger1.ControlID = "Control UniqueID"; //it's UniquelID
Trigger1.EventName = "Click";

That's the way always popular to do when we go with UpdatePanel.

2. Sometimes, we need use client-side approach to register Triggers on the fly that will be more firsthand and more convenient.

Check the following Script code:

[AsyncPostBackTriggers1_ID, AsyncPostBackTriggers2_ID], [PostBackTriggers1_ID, PostBackTriggers2_ID], 90);// Here ID is UniqueID.

The above code can register the control as the trigger of UpdatePanel. That is real what the Ajax framework is doing. When you check the source code of ajax-enable page, you can find this kind of code.

Let's research this method step on step:
1.This method is to register AsyncPostBackTrigger and PostBackTrigger on client.
2.In the first parameter, it is composted by "t"/"f" and UpdatePanel ID. "t"/"f" means if ChildrenAsTriggers is true or false.
3.In the second parameter, it is an array list of asyncpostback triggers' Unique ID.
3.In the third parameter, it is an array list of postback triggers' Unique ID.
4.In the last parameter, it is the timeout attribute.


You can choose one of these two approaches to achieve registering Trigger dynamically. However, with this approach, we can get some interesting purpose. Please check the following sample.

I have a DropdownList inside UpdatePanel with Button. When I select the first item, Button will be as PostBack Trigger and do full postback. When I select the second item, Button will be as AsyncPostBack Trigger and do partial postback. So I can do validation to decide to do as PostBack Trigger or AsyncPostBack Trigger dynamically.

<script type="text/javascript">

function check() {
var button1 = '<%=Button1.UniqueID %>';
var dropDownList1 = $get('<%=DropDownList1.UniqueID %>');
var updatePanel = '<%= UpdatePanel1.UniqueID %>';
if (dropDownList1.selectedIndex == 0)
Sys.WebForms.PageRequestManager.getInstance()._updateControls(["t" + updatePanel], [], [button1], 90); //PostBack

Sys.WebForms.PageRequestManager.getInstance()._updateControls(["t" + updatePanel], [button1], [], 90); //AsyncPostBack



<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>do PostBack</asp:ListItem>
<asp:ListItem>do asyncPostBack</asp:ListItem>
<%=DateTime.Now %>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="check();" />