This tutorial will explore triggers through an UpdatePanel design in ASP.NET AJAX using Visual C#.
In this tutorial we will assume that you will be working with the .NET Framework 3.5 and Visual Studio 2008.
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
Now by understanding a little more about triggers you can create a Cross-UpdatePanel Trigger application.
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
To start, open please 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.
| <body> <form id="myForm" runat="server"> <asp:ScriptManager EnablePartialRendering="true" ID="smScriptManager" runat="server"> <div> <asp:UpdatePanel ID="upUpdatePanelOne" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblLabelOne" runat="server" /> <asp:Button ID="btnButtonOne" runat="server" Text="Update Both" OnClick="btnButtonOne_Click" /> <asp:Button ID="btnButtonTwo" runat="server" Text="Update This Panel" OnClick="btnButtonTwo_Click" /> </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" /> </Triggers> </asp:UpdatePanel> </div> </form> </body> |
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:
| public partial class _Default : System.Web.UI.Page { protected void btnButtonOne_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToLongTimeString(); Label2.Text = DateTime.Now.ToLongTimeString(); } protected void Button2_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToLongTimeString(); } } |
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 code of the new markup:
| <head runat="server"> <title>Learn How Add ASP.NET 3.5 AJAX UpdatePanel Triggers </head> <body> <form id="myForm" runat="server"> <asp:ScriptManager EnablePartialRendering="true" ID="smScriptManager" runat="server"> <div> <asp:UpdatePanel ID="upUpdatePanelOne" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblLabelOne" runat="server" >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> /*Specifies a control and event that will cause a partial page update fo rthe UpdatePanel that contains this trigger reference <asp:AsyncPostBackTrigger ControlID="btnButtonOne" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="ddlColor" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <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> </div> </form> </body> </html |
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Here is the code-behind or the default.aspx.cs page.
| using System; using System.Collections.Generic; using System.Linq; using System.Web using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; public partial class _Default : System.Web.UI.Page { 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; } } |
The logic behind this page 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.
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.


Leave a Comment
#1 Chris Screen
Posted By: Chris Screen | 1.24.2010 at 6:10 PM
Good info...worked through the whole project on my own successfully. I'll be back
#2 Viren
Posted By: Viren | 1.25.2010 at 4:58 AM
Nice one buddy... keep it up..
#3 coach handbag outlet
Posted By: coach handbag outlet | 2.28.2010 at 8:26 PM
The variety of coach handbags are so many that it almost becomes difficult to choose the right one.
#4 coach handbag outlet
Posted By: coach handbag outlet | 2.28.2010 at 8:28 PM
The variety of coach handbags are so many that it almost becomes difficult to choose the right one.
#5 coach handbag outlet
Posted By: coach handbag outlet | 2.28.2010 at 8:39 PM
The variety of coach handbags are so many that it almost becomes difficult to choose the right one.
#6 MBT shoes
Posted By: MBT shoes | 2.28.2010 at 8:40 PM
You are sure to find one for every occasion.
#7 Christian louboutin
Posted By: Christian louboutin | 2.28.2010 at 8:41 PM
Well here is one that is certainly unique and different.
#8 aion kinah
Posted By: aion kinah | 3.01.2010 at 12:40 AM
thanks for sharing this entry.
#9 buy kinah
Posted By: buy kinah | 3.02.2010 at 2:01 AM
thanks for sharing this entry.
#10 flash games
Posted By: flash games | 3.07.2010 at 3:43 AM
Such a well written post. Thnx for sharing this post!
#11 220-702
Posted By: 220-702 | 3.18.2010 at 4:24 AM
Great and very explicit post. Thanks for the article.
#12 350-030
Posted By: 350-030 | 3.18.2010 at 4:24 AM
Great and very explicit post. Thanks for the article.
#13 Issaquah Towing
Posted By: Issaquah Towing | 3.19.2010 at 3:27 AM
This is awesome work from your end, keep up the good work going.. Thanks for sharing this article! :)
#14 North Las Vegas Car Tow
Posted By: North Las Vegas Car Tow | 3.19.2010 at 5:55 AM
If any article contains very useful information for the various strata of our society then it is bound to happen that users stay on the website for longer time. :)