Learn How Use Triggers in an UpdatePanel in ASP.NET 3.5 AJAX C#

Category: AJAX

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 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.

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.


 

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.

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:


Learn How Add ASP.NET 3.5 AJAX UpdatePanel Triggers<br> <br>












/*Specifies a control and event that will cause a partial page update fo rthe UpdatePanel that contains this trigger reference


 

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.



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!