Using Triggers in an UpdatePanel in ASP.NET 4.0 C#
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.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
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”.
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.
<asp:UpdatePanel ID="upUpdatePanelOne" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblLabelOne" runat="server">Label </asp:Label><br /> <asp:Button ID="btnButtonOne" runat="server" Text="Update Both" OnClick="btnButtonOne_Click" />
<asp:Button ID="btnButtonTwo" runat="server" Text="Update PanelTwo" OnClick="btnButtonTwo_Click" />
<asp:CheckBox ID="cbDate" runat="server" Text="Include Date" AutoPostBack="false"
OnCheckedChanged="cbDate_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upUpdatePanelTwo" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblLabelTwo" runat="server" ForeColor="red" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnButtonOne" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ddlColor" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Note that the <asp:AsyncPostBackTrigger> 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.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
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:protected void btnButtonOne_Click(object sender, EventArgs e)
{
lblLabelOne.Text = DateTime.Now.ToLongTimeString();
lblLabelTwo.Text = DateTime.Now.ToLongTimeString();
}
protected void btnButtonTwo_Click(object sender, EventArgs e)
{
lblLabelOne.Text = DateTime.Now.ToLongTimeString();
}
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.
<asp:DropDownList ID="ddlColor" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
<asp:ListItem Selected="true" Value="Red" />
<asp:ListItem Value="Purple" />
<asp:ListItem Value="Silver" />
<asp:ListItem Value="Green" />
<asp:ListItem Value="Blue" />
<asp:ListItem Value="Yellow" />
</asp:DropDownList>
We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
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.protected void btnButtonOne_Click(object sender, EventArgs e)
{
if (cbDate.Checked)
{
lblLabelOne.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
lblLabelTwo.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
}
else
{
lblLabelOne.Text = DateTime.Now.ToLongTimeString();
lblLabelTwo.Text = DateTime.Now.ToLongTimeString();
}
}
protected void btnButtonTwo_Click(object sender, EventArgs e)
{
if (cbDate.Checked)
{
lblLabelOne.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
}
else
{
lblLabelOne.Text = DateTime.Now.ToLongTimeString();
}
}
protected void cbDate_CheckedChanged(object sender, EventArgs e)
{
cbDate.Font.Bold = cbDate.Checked;
}
protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
Color c = Color.FromName(ddlColor.SelectedValue);
lblLabelTwo.ForeColor = c;
}
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.
AJAXTriggers
