ASP.NET AJAX Extensions Update Panel and Triggers

So far we have been using Update Panels with controls inside the Update Panel which initiate the partial page refresh.

What if we want to refresh an Update Panel based on an external event like a Button which is not necessarily a part of the UpdatePanel's content template?  Wait ! Dont jump into ugly ways of refreshing the whole page using F5 !

Triggers is your friend in this case.  A trigger can be defined within the Update Panel to specify which control needs to trigger a partial refresh for that section.

For that matter, the only 2 tags you can directly place within an UpdatePanel are ContentTemplate and Triggers.  If you directly try placing HTML or Web Controls within the UpdatePanel, it will start throwing compilation errors.

Ok, let us jump into code to understand more.  As usual copy paste the following HTML Source and Code behind to your page.

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <div>
        Label outside the Update Panel Refreshed at:
        <asp:Label ID="Label2" runat="Server"></asp:Label>
        <br />
        <br />
        <asp:Button ID="Button1" runat="Server" Text="Refresh" OnClick="Button1_Click" />
        <br />
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="Server" UpdateMode="conditional">
        <ContentTemplate>
            Label within the Update Panel Refreshed at:
            <asp:Label ID="Label1" runat="server"></asp:Label>
       
        </ContentTemplate>
        <Triggers>
            <%--<asp:PostBackTrigger ControlID="Button1" />--%>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
      
        </asp:UpdatePanel>
       
   
    </div>
    </form>

Code behind

 protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = System.DateTime.Now.ToString();
        Label2.Text = System.DateTime.Now.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
       
    }

Now, when you run this page, you will notice that when you click on the "Refresh" button you will see that the label below the Refresh button gets updated whereas the label above remains with old value.

Couple of interesting things to notice:-

The Button control is defined outside the UpdatePanel unlike our previous samples.

The Triggers contains something called as AsyncPostBackTrigger for which the ControlID is specified as Button1 and EventID is specified as Click.  For now, forget the commented PostBackTrigger definition.

The AsyncPostBackTrigger initiates an async call back and the button associated doesnt do a refresh or postback explicitly to execute the code.  In fact, the code you place within the Button1_Click event will throw error, if you want to do something like Response.Write.

Though the Button is a normal asp:Button, it doesnt invoke a postback but refreshes the contents of the Update Panel.

Now, if you comment the AsyncPostBackTrigger line and uncomment the PostBackTrigger line, and run the page, you will notice that the whole page refreshes upon clicking on the "Refresh" Button.  This works like a normal button although it does update the contents of the UpdatePanel.

In normal cases you would use AsyncPostBackTrigger since it implies the partial page refresh mechanism.

Cheers !!!

Print | posted on Wednesday, May 16, 2007 8:15 AM

Comments on this post

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Hi,
Thanks for the this good article. But I want to know wheather it is possible to do following.

On clicking a button will update a ajax panel and do some work outside the ajax panel.

If so how? waht I have to do for that?
Left by Abul Kalam on Jan 06, 2008 2:26 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Hi ! there is a mistake in the code ...i copied the code above and when i click the refresh button, the value in the label 1 and label 2 both change...and the page is going for postback....does ur code has error or i did mistake..??
Left by Asim on Feb 05, 2008 9:13 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
sorry the code worked well ...actually the mistake i made is that i forgot to choose AJAXenabledwebsite while creating the website
thanks
Left by asim on Feb 05, 2008 11:32 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
try this link
Left by balouta on Feb 13, 2008 3:12 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Thanks it is the nice example
My Question is same as Abul Kalam i want to update the label that is outside the Updatepanel
Was that possible on the click of the refresh button updatepanel update and also the label update that is outside the update panel
???
Left by Abdul Saboor on Jul 16, 2008 2:18 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
FSFSDFSAFSDFAFDSFSDFASDFSDFSDFSDFASFSFSDFSDF
SFSDFSDFSDFSFSF
Left by jhkjhkhjk on Sep 26, 2008 12:01 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
I have the button inside a control and the Label is in the page, how do I go about it, thanks in advance.
Left by Ihsan on Oct 30, 2008 3:20 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Many thanks for this article. Very short and extremely useful. Learnt a lot in few minutes. I was not sure about the concept of <Triggers> and now I believe I can deliver a lecture on it. Much appreciated. Welldone and keep it up. M Basit.
Left by Muddassir Basit on Jan 04, 2009 5:13 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Thanks .It is a good article .my application looking very good .
Left by Narendra Mohan on Jan 09, 2009 10:03 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Thanks for such a simple and beneficial notes.
Left by Mangal Singh on Jan 19, 2009 11:50 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
nice article
Left by sid on Feb 19, 2009 11:07 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
I have a doubt about update panel. It is, if I have 3 dependent Dropdownlists say A,B,C. On selecting A, B gets loaded similarly C.

In normal website on selecting a value in A, page refreshes so it blinks, If update panel is used then wat will happen?

Can we avoid this sort of blinking?
Left by Shilpa on Feb 25, 2009 2:17 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
i have asp.net page with apdate panel .
i have file uploder control inside update panel and one button that i use to uplode image.
because update panel file uplode control is not work then i used triger but i could't find file uplode
value
can any body help me about this problem
Left by mayank on Apr 02, 2009 6:34 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Nice Article!!!!!
Left by Prachi on May 19, 2009 4:03 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
I m using three dropdown list. When first one text changed then second one will load according to selected one, and when second one text changed then third one will load according to second one but first and second dropdown list doesn't changed. Plz help me our with solution.
Left by sam on Jun 21, 2009 7:12 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Thanks.. It's good article!!!
Left by Dinesh on Jul 10, 2009 2:27 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
awesome.simply great.
Left by hasan on Sep 02, 2009 3:32 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Article was helpful....I was bit confused with AsynPostBackTrigger...Now i got clear idea about these....
Left by Rajesh on Sep 24, 2009 6:54 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Hello Dear,

This is Deepak Tiwari - Marketing Analyst at investinnest.com,(Pioneer Medialine Services Pvt Ltd), InvestInNest.com is one of India's Largest Real Estate. We feel our site would be very useful to your users and in regards to the same would like to request you to kindly place our link on your site.

In return it would be our pleasure to place your links in our resources section of www.investinnest.com.


Details of my site are as follows:

Title – India Property
URL - http://www.investinnest.com/

Desc - India Property Real Estate - InvestInNest is a leading residential indian real estate property consultant for NRI/foreigner. buy premium residential properties in india including real estate in india, india properties, houses, apartments, flats, land and villas in india.


Hope to hear your soonest and positive reply.

Awaiting your response.

Regards
Deepak Tiwari
Internet Marketing,
Website: www.investinnest.com
Email : dtiwari@investinnest.com

Left by Deepak Tiwari on Nov 10, 2009 9:57 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Simple.. yet powerful.. Thanks mate..
Left by Chandar on Dec 02, 2009 1:50 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Its very simple notes that can be understand by a beginner ******
Left by Hari on Jan 20, 2010 6:51 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
How to use triggers in case of drop down list control
Left by Nikhil on Mar 23, 2010 4:21 AM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Triggers explained in powerfully in simple line.
Left by Gokul on Nov 19, 2010 7:44 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
I couldn't find the <asp:AsyncPostBackTrigger tag in trigger tag??
Left by jhony on Jan 27, 2011 10:08 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Oops... Sorry I found it...
Left by jhony on Jan 27, 2011 10:15 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
I'm using an UpdateProgress control and a ReportViewer inside an update panel. If I try to output the report as a pdf file I get the error message: Sys.WebForms.PageRequestManagerParserErrorException
So i moved the button outside the update panel and now the report outputs as PDF which is great. However, now my UpdateProgress does not work because it needs the button inside the update panel. So I used the trigger as recommended, but now I get the same Sys.WebForms.PageRequestManagerParserErrorException error message error message
Just like as though the button was inside the updatepanel. Thanks
Left by greg on Apr 14, 2011 7:24 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
much apriciated, simple and much clear.
got really good idea from u mate.

thanks a lot

keep on posting for us..
Left by theva on May 19, 2011 7:42 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Hi all,
I have an check box in update Panal. and button is in out of update panal. when i check that check pox now page is not refreshed that's fine but button should be disabled when i check that check box is it possible or not if it's possible please let us know......
Left by Naresh on Jul 06, 2011 6:01 PM

# India Property | Residential Property in India | Commercial property in India

Requesting Gravatar...
Such Nice Post It is use full for us.
If you find to India Property? Welcome to Favista.com – It is trusted Indian Real Estate Broker search Buy, sell and rent, Indian properties, commercial property in India & residential property in India, homes, apartments, flats, villas and lands in India.
Left by India Property on Sep 10, 2012 1:00 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
This is a nice post for web programmers. I was very useful for me. I am developing real estate sites in Mumbai. It would be great to have many of these kind of posts.
Left by mumbai properties on Dec 21, 2012 12:13 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
Awesome stuff, i specially liked the gradient in the stacks, i didn't know that earlier. It’s really cool in terms of the resources and look.
Left by New Jersey Golf courses for leas on Jan 24, 2013 1:46 PM

# Ocus 24k Retail Shops

Requesting Gravatar...
Just like as though the button was inside the updatepanel. Thanks http://www.ocus24k.info/
Left by hometrustrealty on Jun 02, 2013 4:20 PM

# Griha Pravesh

Requesting Gravatar...
This is very informative blog...Thanks for sharing with us.
Left by vijayk on Jun 04, 2013 5:31 PM

# Nirmal Sports City

Requesting Gravatar...
I’m really impressed together with your writing skills as well as with the layout for your weblog. Anyway keep up the excellent quality writing, I have also avail information about the best new project..Nirmal Sports City
Left by vijayk on Jun 07, 2013 2:39 PM

# Supertech Araville

Requesting Gravatar...
I have had great time reading your post. It’s actually quiet awesome, it is surprising how you have learn t to write your feelings and thoughts in so precise manner. It's good really. I have also avail information about the best new project..Supertech Araville
Left by vijayk on Jun 07, 2013 4:31 PM

# Ocus Perfect 24k Sohna Road

Requesting Gravatar...
Call Hometrust @ 8882 111 222 for BEST DEALS in Ocus 24k, Retail Shops in Ocus Perfect 24k, Studio / Serviced Apartments in Ocus 24k Sector 68 Sohna Road Gurgaon.http://www.ocus24k.info/
Left by hometrustrealty on Jul 13, 2013 4:16 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
article is nice but in my web application i have use dropdownlist and i have to use update panel to that list.The dynamic value cant be change in textbox. How i do apply the update panel to dropdownlist and how i use multiple update panel to avoid page refreshing. Give some idea
Left by vinothkumar on Sep 10, 2013 4:55 PM

# re: ASP.NET AJAX Extensions Update Panel and Triggers

Requesting Gravatar...
thanks for your help. update panel property updatemode useful for me :)
Left by nasir on Dec 30, 2013 1:40 PM

Your comment:

 (will show your gravatar)