Introduction
This article provides an in-depth view on the UpdatePanel control in AJAX, and explores all the possible options to work with it in ASP.NET web pages.
Background
Developers tend to use server-side objects in the code-behind while using the UpdatePanel control in AJAX. This article shows how to do this, and also explains some of the other aspects of the UpdatePanel control.
The UpdatePanel control
The much familiar UpdatePanel control in the AJAX environment is the father of all panel controls in all of the Visual Studio tools. Its main use is to enable sections of a page to be partially rendered without a postback. Instead of sending the whole page back to the server, users may use this panel to update controls and data by partial rendering. A complete post-back is avoided, and you experience increasingly faster and dynamic web pages.
Developer’s tight spot
Sometimes, for the same reason, web developers get into panic while using the UpdatePanel as they cannot make use of server-side objects like Response, Cache etc., inside it, as you see in the following mark-up:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button3" runat="server" onclick="Button3_Click"
Text="Click Me!" Width="257px" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
A Button and a TextBox are placed inside an UpdatePanel, and few lines of code have been added for using server objects:
protected void Button3_Click(object sender, EventArgs e)
{
try
{
Response.Write("welcome to updatepanel area");
Cache.Add("uid", "bala", null, DateTime.Today.AddSeconds(30),
TimeSpan.Zero, CacheItemPriority.High, null);
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack==true)
TextBox1.Text = Cache["uid"].ToString();
}
Quite obviously, the code above does not yield any useful results, and in fact, it gives you a run-time error, as the code in the page’s Load event is trying to access a non-existing cache object.
Magic 1
On the other hand, if you write the following code in the Button’s Click event, you get the results as expected.
protected void Button3_Click(object sender, EventArgs e)
{
TextBox1.Text = "It is working!";
}
The UpdatePanel’s partial rendering feature allows you to set the value for the Text property on the click of a button.
Even this could be stopped when you set the property “ChildrenAsTriggers” of the UpdatePanel control to false. Also, you must set the property “UpdateMode” of the UpdatePanel control to “Conditional”. By doing this, you disable the whole of partial rendering for all the controls inside an UpdatePanel.
On running the page, you can notice that no value is set to the textbox when you click a button. Yeah... it is working (!).
Magic 2
No, it’s not the end. You can still make it happen by manually adding a trigger to the UpdatePanel, specifying the control ID that triggers the post-back event. Do a slighter change in the mark-up of the UpdatePanel as below:
<Triggers>
<asp:PostBackTrigger ControlID="Button3" />
</Triggers>
In the mark-up, you specify that partial rendering should happen on the events of a button with ID, Button3.
On running the page, you can notice that the text “It is working” is displayed in a textbox when you click a button.
Magic 3
Now, come back to your original issue. How do you use the Response.Write method inside a control’s event handler if a control is placed inside an UpdatePanel?
Set the property “UpdateMode” of the UpdatePanel control to “Conditional”. Add the following to the existing mark-up to provide postback triggering effect to the specified button.
<Triggers>
<asp:PostBackTrigger ControlID="Button3" />
</Triggers>
Write the following code in the Button’s Click event, and you get the results as expected.
protected void Button3_Click(object sender, EventArgs e)
{
Response.Write("Response.Write called by a child control inside an UpdatePanel");
}
By setting the properties of the UpdatePanel control as mentioned above, you may use server objects in the code-behind.
Magic 4
To demonstrate more on using server-side objects with the UpdatePanel control, add a new web page to the project, and place a button and a text box. Also add a Script Manager and an UpdatePanel. Inside the UpdatePanel, place a button and a text box. Now, your web layout would look like the picture shown below:
Not changing any properties of the UpdatePanel, write the following code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (Session["uid"] != null)
TextBox2.Text = Session["uid"].ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
Session["uid"] = "Bala";
}
On running the page, you do not have to test how the click on button1 works, as it is a normal behavior you see in any web page. But, you can notice different effects while using button2’s click.
On the first click of button2, the session variable uid is set to Bala, and for the subsequent clicks on button2, you get the name Bala displayed in TextBox2. Subsequent clicks on button1 also yield the same result. This indicates that when you set the server object via UpdatePanel, the server object is accessible in the child controls of the UpdatePanel when you perform partial rendering or a full page refresh.
Magic 5
Suppose you want to set the session variable via an UpdatePanel as in the previous example, but access it on a control outside the UpdatePanel; it is not possible. Instead of assigning the value of the session variable uid to TextBox2, you change it to TextBox1.
protected void Page_Load(object sender, EventArgs e)
{
if (Session["uid"] != null)
TextBox1.Text = Session["uid"].ToString();
}
On running the page, click on button2. The session variable uid is set to Bala, and for the subsequent clicks on button1, you get the name Bala displayed in TextBox1. Subsequent clicks on button2 does not yield you the same result. This indicates that when you set the server object via an UpdatePanel, the server object is not accessible in the controls outside the UpdatePanel when you perform partial rendering. A full page refresh will work in this case.
Conclusion
UpdatePanel is one of the basic controls in AJAX, but, its usage is not limited. Be sure to use it in your web pages to make them more dynamic and more powerful. You can improve the online experience and user-interaction without worrying much on the cost and time that is incurred by client-to-server transportation.
