Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET
Article

The magical effects of the UpdatePanel control in AJAX

Rate me:
Please Sign up or sign in to vote.
2.53/5 (16 votes)
7 Mar 2008CPOL4 min read 81K   31   12
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.

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:

ASP.NET
<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:

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

C#
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:

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

XML
<Triggers> 
<asp:PostBackTrigger ControlID="Button3" /> 
</Triggers> 

Write the following code in the Button’s Click event, and you get the results as expected.

C#
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:

updatepanel.jpg

Not changing any properties of the UpdatePanel, write the following code-behind:

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder BB Systems CIT-GPNP
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionAvoid to update any control on postback Pin
Pardeep Garg29-Jan-18 23:28
Pardeep Garg29-Jan-18 23:28 
Questiontnx Pin
lida shoaee20-Sep-12 21:49
lida shoaee20-Sep-12 21:49 
Generalhow to add web user control to an updatepanel Pin
mragers14-May-11 22:54
mragers14-May-11 22:54 
i want to programatically add a web user control to updatepanel
i tried this code:

myReportComponent cp1 = new myRportComponent();
updatePanel1.controls.add(cp1);

but the second line rises error (the controls property of updatepanel with id 'updatepanel1'can not be modified directly ...)

Adding a placeHolder in the updatepanel and changing the problematic line to placeHolder1.controls.add(cp1)
removed the error but my component will not be showed after the code execution.
what can i do?
GeneralRe: how to add web user control to an updatepanel Pin
mragers15-May-11 17:54
mragers15-May-11 17:54 
GeneralHttpContext.Current Pin
Neil Wilson20-Jan-10 4:08
Neil Wilson20-Jan-10 4:08 
Generalnice article Pin
Member 373477514-Apr-08 23:01
Member 373477514-Apr-08 23:01 
GeneralCold and Old! [modified] Pin
Balamurali Balaji7-Mar-08 17:51
Balamurali Balaji7-Mar-08 17:51 
AnswerRe: Cold and Old! Pin
peter gabris7-Apr-08 6:14
peter gabris7-Apr-08 6:14 
GeneralRe: Cold and Old! Pin
Bad Programmer5-Sep-08 0:53
Bad Programmer5-Sep-08 0:53 
General[Message Deleted] Pin
Bert delaVega7-Mar-08 13:07
Bert delaVega7-Mar-08 13:07 
GeneralRe: Magic? LOL. Pin
Dewey7-Mar-08 15:05
Dewey7-Mar-08 15:05 
GeneralGood Article but misleading title Pin
Madhur Ahuja7-Mar-08 2:10
Madhur Ahuja7-Mar-08 2:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.