By default, triggers in an UpdatePanel include child controls that invoke a postback. A good example is when you set the properties to a TextBox’s AutoPostBack to true. Triggers can also be declared using the markup section of the UpdatePanel control declaration. It is best to render triggers at run-time by using the RegisterAsyncPostBackControl method of the ScriptManager object for your page, with the Page_Load event. Now by understanding a little more about triggers you can create a Cross-UpdatePanel Trigger application.

To start, open Visual Studio and go to File > create a new ASP.NET Web Page > Name it whatever you want. In this case we will name it \Ajax_Trig_Website. Click on the default.aspx page and switch to Design View.

Navigate to the ToolBox and locate AJAX Extensions. Drag the ScriptManager over to the page. Next add two UpdatePanel controls on to the page. Return to the Toolbox and drag over two Label control’s (lblLabelOne, lblLabelTwo and set is forecolor to “blue”), placing one in each UpdatePanel.

Return to the Toolbox and drag over two Buttons (btnButtonOne, btnButtonTwo), placing them side by side in the first UpdatePanel, under lblLabelOne. Please label btnButtonOne “Update Both” and btnButtonTwo “Update Panel Two”.

**Important** Set the UpdateMode property of both UpdatePanel tags to from Always to Conditional.
When UpdatePanel controls are nested and the UpdateMode is set to Conditional, the child UpdatePanel is triggered, not the parent, only the child UpdatePanel will refresh. Although when the parent UpdatePanel is refresh so is the child Updatepanel.

Note that the element is used to target any event from a control that exists as a child of any UpdatePanel control in the unit of encapsulation, not only under the UpdatePanel where the trigger is a child.

Now locate the code-behind or default.aspx.cs page. Within the click event handler for btnButtonOne, set lblLabelOne.Text to a time-dependent value such as DateTime.Now.ToLongTimeString() for demonstration purposes. Do the same for lblLabelTwo.Text. Then for btnButtonTwo only set lblLabel.Text to the time-dependent value. It should look something like this code-behind example:

Save and Run the project. Click on both buttons and notice how the labels change accordingly.

Now let’s add two additional controls to the page as shown above. The first is a DropDownList control that will be outside of both UpdatePanels and the second is a CheckBox that will place within the upUpdatePanelOne beside btnButtonTwo. We will populate the DropDownList with colors we define within the list. Here is an example of the DropDownList.

The logic in the code behind is that the DropDownList selects a color to display in the lblLabelTwo control and the CheckBox determines whether it’s bold or shows the entire date. Although the CheckBox does not cause an AJAX update, the DropDownList does even though it’s not housed within the UpdatePanel.

Success!

Congratulations! You can now activate AJAX Panels with triggers from other parts of the page giving your web application that much more interactivity. AJAX is a very powerful tool, utilize it when applicable and everything you build will be better for it.

Download Source Files