ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Whenever you start working on ASP.NET AJAX Page, the first thing you would notice is the Script Manager tag.  The Script Manager tag has to be present in all pages where you try to implement Partial Page Updates.  It can be present only once in a page.  The second thing you would notice is that the <asp:UpdatePanel> is THE Control for getting started or rather ajax enabling your web pages.  It takes care of most of your common needs in implementing Partial Updates.

The UpdatePanel control is a server side control that comes as a part of the Toolbox when you install ASP.NET AJAX.  You can download ASP.NET AJAX for free from http://ajax.asp.net and install for using with your existing Visual Studio 2005 and ASP.NET 2.0 Web Applications.

So here goes a typical ASP.NET AJAX Page.

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <div>
  // Page Contents Go Here
  </div>
</form>
 

Now, to understand the working of UpdatePanel, we need to put some labels and a  Button Control which invokes a method in the code behind and retrieves the Current Date and Time

So lets start expanding our Page with those Controls

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Label ID="Label1" runat="Server"></asp:Label>
            <br />
            <asp:Label ID="Label2" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
       </div>
</form>

Now in the Code Behind lets define the Page_Load and Button2_Click Methods

 protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "The time now is " + System.DateTime.Now.ToString();
       
    }

protected void Button2_Click(object sender, EventArgs e)
    {
        Label2.Text = "The time now is " + System.DateTime.Now.ToString();
    }

When you run this page, you will notice that the Label1 displays the Current Date and Time and when you click ont he button "Click Me Again" the Label 2 also displays the Current Date and Time.

Hang on, also did you notice that the Label1 also changed the Date Time though you didnt intend to do it.  The reason is, when you clicked on the button, it invoked the Page_Load again and subsequently refreshed the page and hence Label1 also got the latest Date Time information.

What is important here is that, the whole page gets refreshed and this would be significantly heavy if the page contains a lot of controls, sections which retrieve data from different sources.  Unfortunately, this has been the way we have been writing web pages where a refresh is inevitable to make a server side request.

Now, let us slighly modify the above ASPX Code by adding the UpdatePanel Control

     <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:Label ID="Label1" runat="Server"></asp:Label>
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="Server">
           
<ContentTemplate>
            <asp:Label ID="Label2" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
        
    </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
 

We have added Update Panel control and a Content Template which holds the contents which need to implement Partial Refresh.

When we run this page, you will notice that initially when the page loads the Label1 displays the Current Date and Time.

Subsequently, when you click on "Click Me Again" Label2 also appears with the Current Date, but Label1 remains unchanged.

Keep clicking on the "Click Me Again" Button and you will notice that the Label1 Data remains the same whereas the DateTime displayed in Label 2 gets updated.

This is result of the Update Panel which takes care of partially updating the contents of the page without having to reload the whole page.

However, when you do a manual refresh of the page (F5) you will notice that both the Labels get updated with the latest Date Time information.

Any server control that is placed within the Update Panel and Content Template invokes a partial page refresh and only the relevant section gets updated without the whole page getting refreshed.

Though this article was a little elaborate, the idea was to make it in simple words for people who begin with ASP.NET AJAX.

Let us explore Update Progress and other ASP.NET AJAX Controls in the next articles.

Cheers !!! 

Print | posted on Friday, May 11, 2007 2:48 AM

Comments on this post

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Harish,

Greetings from Vancouver, BC. Do you know if this Ajax Panel can be used to hold a Tree control and have just the Tree control updated when its nodes are altered?

Robert W.
Left by Robert Werner on May 25, 2007 6:47 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi Harish Ranganathan,the artcle that you have written is so super... and it helped me lot in understanding the funda behind ajax concept
Left by santhosha k r on Feb 21, 2008 10:54 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Excellent article for beginners
Left by Krishna on Mar 06, 2008 6:09 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
I am trying to update some controls using ajax. The updating control is a combo box and on selected index change event, i am updating other controls like textboxes and label. But it hangs. I debugged but it goes through the event in code without any error and just hangs on the page. I tried doing it without ajax and i get save changes prompt when i m not even trying to leave the page. any help???
Left by Sus on Apr 08, 2008 6:40 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Anyone know how to get this event to happen without a button and just an onblur event in the textbox?

Thanks.
Left by Brian D. on Apr 24, 2008 9:09 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi,
Very nice,,am new in ajax.......so that was very helpful
thnks'Hari
Left by harikrishnan on Jun 06, 2008 1:14 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi
Its a nice article..but i wnated to know that if i want to avoid page refresh in case of calendar how can i do that with ajax..??

If you can guide me regarding that...i ll be really thankful to you..

Left by Utsavi Gajjar on Jun 27, 2008 8:57 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
This time I repeated your code exactly in another website and both the labels get updated with the current time...=( any suggestions???
Left by Bo on Jul 15, 2008 3:30 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
its really to good.its helpful for me. thanks for this.
Left by umesh daiya on Aug 19, 2008 5:35 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi,

The informations what you have provided is well and good. so that one person can easily understand the basic things about the Ajax Controls and its advantage.But my problem is something different ie,

I am facing a problem while using Update Panel.Thatz nothing but the tab index is not working and Client Side Script is not running for the contrls what we have placed inside the Update Panel. So that the Page Flickering is still remaining even for a single button click also.

So please look forward my problem and help me out.

Regards,
Vava
Left by Vava on Oct 16, 2008 6:27 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi
Nice article.. But trigger is missing
Left by Suvarna on Dec 11, 2008 3:41 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi
Gud article.. But trigger is missing
Left by Suvarna on Dec 11, 2008 3:42 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Some say it doesn't work - it does, but you need a lot of entries in the web.config (httpHandlers, httpModules,...).

They are automatically created when you create an ASP.NET AJAX-Enabled WebSite instead of an ordinary one.
Left by Olaf Schreiber on Jan 13, 2009 4:44 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
hey
its a very nice article. it helps me in understanding the basic concept of update control very easily..thankss
Left by sari on Feb 25, 2009 12:47 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
nice article for beginer
Left by Aviinash Pohane on Mar 05, 2009 3:14 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
thanx harish !!! Really very good article for begineers
Left by Avinash on Jun 18, 2009 12:43 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Great tutorial, however the problem some of you might be having is that your button is not in the update panel. Try moving the button into that panel and everything should work as described.
Left by C#er on Jun 22, 2009 6:46 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Thank you. perfectly explained for beginners!! got an idea of ajax
Left by Riddhi on Jul 08, 2009 9:18 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
thanks, well explained for beginers
Left by dev on Jul 09, 2009 5:34 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
does update panel also include control for whom we have to send request without sending the entire page eg if i have a drop downlist and image control and the selected value image should be displayed in image control than do we have to include both image and drop downlist or only image as image will be getting refreshed
Left by sankalp on Jul 24, 2009 7:00 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
thanx..
really great example..
i think it'l b helpful for my work a lot..
i really appreciate it..
Left by mith on Aug 06, 2009 1:43 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Thank you for a easy and most helpfull details on Update Panal on Site.
Left by Peeyush Dwivedi on Aug 26, 2009 2:21 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Hi. Thanks Was looking all over for simple ajax explanation. Really Helpful
Left by Hennie on Sep 20, 2009 10:32 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Very nice article!It will be good understanding for beginners....
Left by Hari on Jan 20, 2010 4:02 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
thank you very much, really it is great info.. about ajax for beginner like me, thank you again
Left by ali alabdy on Jul 14, 2010 7:39 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
It's realy useful artical for beginners. Thanks a lot.
Left by Mumin on Jul 24, 2010 10:11 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
i need to ajax update
Left by aziz on Aug 08, 2010 4:05 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
great article !
Left by janhavi on Aug 16, 2010 11:00 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Nice Article! Keep up with good work and distributing Knowledge.
Left by Ravi on Oct 07, 2010 1:37 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
hi this article very useful to me........
Left by kesavan on Oct 21, 2010 6:12 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
very good for beginners
Left by azhar on Nov 09, 2010 1:20 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Harish,
The article is simply superb. :)
A small suggestion, if this article has link to its successor [articles on update panel] it will be too good.
Gokul.
Left by Gokul on Nov 19, 2010 2:51 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
how to use ajax update panel in asp.net
Left by Bipul kumar singh on Jul 26, 2011 11:20 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
I have tried as you explain in your article. In my master page. there are three updatepanels, all three have different usercontrols. When i am doing any event in one usercontrol, Page_Load event of other two usercontrols are also fired.
Could you please explain me what's wrong with it or if i could not understand it.
Thanks
Left by Bharat on Jul 27, 2011 7:51 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
This is very important AJAX Control
Left by Deepak Goel on Aug 11, 2011 6:27 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
superb article for ajax update panel
Left by aditya pratap singh on Sep 30, 2011 10:20 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
This is one of the best articles I read online. No crap, just useful information. Very well presented. I have found another good collection of ajax interview question and answer.
http://www.mindstick.com/Interview/698/what%20is%20the%20update%20panel%20control
Left by Ajay Singh on Nov 23, 2011 9:00 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
I found this website as very useful.
Left by Afroze on Jan 08, 2012 12:00 AM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Thank you for this motherf*cking great article,

This saved my day good sir, explaining this to this depth made me understand the UpdatePanel completely.
Left by Thankyou on Jan 25, 2012 7:26 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
thnx ..
Left by mitul agrawal on Jan 29, 2012 6:56 PM

# re: ASP.NET AJAX Update Panel Control, the most useful AJAX Control

Requesting Gravatar...
Thanx dude it's Really nice
Left by Mesar ali on Feb 27, 2013 6:36 PM

Your comment:

 (will show your gravatar)