Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Ajax updatepanel example with triggers in asp.net

May 1, 2012
Introduction:

In this article I will explain what is Ajax updatepanel control, advantages of updatepanel control and how to use multiple updatepanels in asp.net.

Description:

Previously I explained many articles relating to 
Ajax. Now I will explain what is ajax updatepanel control and use of ajax updatepanel control in asp.net.

During work with our applications if we entered any values in textbox controls and click on a button in form we will see full postback of our page and we will lost all the controls values whatever we entered previously this happend because of postback. If we want to avoid this full postback of page and round trip to server we need to write much code instead of writing much code we can use ajax updatepanel control.
Ajax updatepanel will help us to avoid full postback of the page i.e., avoid refresh of the whole page content with postback and stop flickering of the page which is associated with a postback and allows only partial postbacks. By using Ajax updatepanel we can refresh only required part of page instead of refreshing whole page.

Ajax updatepanel contains property called UpdateMode this property is used to specify whether UpdatePanel is always refreshed during a partial render or if it refresh only when a particular trigger hit. By default updatepanel contains UpdateMode="Always" if we want to set it conditionally we need to change this property UpdateMode="Conditional"

Ajax updatepanel control contains two child tags those are ContentTemplate and Triggers.

ContentTemplate is used to hold the content of the page means suppose we designed page with some controls we will place controls inside of the ContentTemplate

Triggers we used in a situation like need to refresh updatepanel only whenever I click some button control in that situation I will define those controls with this Triggers child tag.

Our Sample update panel control will be like this

<asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server"
 ForeColor="red" />
……………………………………………………..
………………………………………………………
……………………………………………………….
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1"
 EventName="Click" />
</Triggers>
 </asp:UpdatePanel>
Now we will create one sample application with updatepanels for that first create application and design your aspx page will be likes this

<html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head1" runat="server">
 <title>UpdatePanel Example in asp.net</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server"/>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <fieldset style="width:30%">
 <legend>Update Panel-1</legend>
 <asp:Label ID="lbl1" runat="server" ForeColor="green"/><br />
 <asp:Button ID="btnUpdate1" runat="server" Text="Update Both Panels" OnClick="btnUpdate1_Click" />
 <asp:Button ID="btnUpdate2" runat="server" Text="Update This Panel" OnClick="btnUpdate2_Click" />
 </fieldset>
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <fieldset style="width:30%">
 <legend>Update Panel-2</legend>
  <asp:Label ID="lbl2" runat="server" ForeColor="red" />
  </fieldset>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="btnUpdate1" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>
If you observe above code in UpdatePanel2 I defined Triggers property with btnUpdate1. Here UpdatePanel2 content will update only whenever we click on btnUpdate1 because we defined UpdatePanel2 property UpdateMode="Conditional" and we set AsyncPostBackTrigger property with btnUpdate1

Write following code in code behind

C#.NET

protected void btnUpdate1_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
protected void btnUpdate2_Click(object sender, EventArgs e)
{
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
}
VB Code


Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpdate1_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
Protected Sub btnUpdate2_Click(ByVal sender As Object, ByVal e As EventArgs)
lbl1.Text = DateTime.Now.ToLongTimeString()
lbl2.Text = DateTime.Now.ToLongTimeString()
End Sub
Demo
If you observe above sample whenever I click on button “Update Both Panels” it’s updating data in both updatepanels but if click on button “Update This Panel” it’s updating data in first updatepanel because in both updatepanels we defined condition UpdateMode= "Conditional" and set Triggers conditions because of that here updatepanels will update conditionally and in UpdatePanel2 we written AsyncPostBackTrigger property to update panel only whenver we click on btnUpdate1.

Download sample code attached




If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

33 comments :

Anonymous said...

hi nice one

sandeep kumar said...

hi

Anonymous said...

Super Suresh..Pls continue doing this good work..Thanks a lot

Anonymous said...

ya its very easy to understad thanks

arif said...

thanks a lot suresh keept it up and continue this
thanks

Anonymous said...

Good work Mr.Suresh

Anonymous said...

Hi Suresh,

What is the difference between scriptmanager without updatepanel
and
scriptmanager with updatepanel ?

In both case there is no full postback.

Anonymous said...

very nice and verrryyy helpful

Anonymous said...

good artical..

Anonymous said...

Good and usefull work Mr.Suresh

Anonymous said...

Very good suresh it is very helpful to all developer those facing problem in using trigger in update panel , thanks keep doing this

jawahar said...

Hi suresh ....i had one query is it possible to use partial page rendering using update panel with user control

Anonymous said...

Can able to post whole projects sample?

Anonymous said...

Good one Sir. . Thanks

Harsh Bhavsar said...

Great Article...

Kashish said...

Superb...Hope to have more such useful articles..

Thanks A lot :)

Anonymous said...

i copied the coding as it is... but it updates the both the pannel... plz help...

Anonymous said...

The sample code downloaded from this website runs fine. Its amazing work. But, I couldn't run on my own. The same code. I cant understand what have been done in wen.config file... Plz help...

manasa said...

Thnk u so much for your valuable coding... it is very helpful to me..

manasa said...

Thank u suresh.. I want more examples on sessions, cookies, viewstate and hiddenfields.. and I want loggin code by using sessions in asp.net with c# .net..

nick(neel)_love all friend said...

nice

Kaushik Rao said...

Hi suresh,
Can u jus let me know how I can get ua email id... I need ua help pls... Waiting for positive reply...

Gausya Smile said...

hai sir,nice website,this is help to me many quations.....Thanks sir

Anonymous said...

very nice

Anonymous said...

Thank a lot its awesome
continue this work

The Fresh said...

Excelente articulo, justo lo que necesitaba, excelente pagina.

Anonymous said...

Thanks very much sir, it is very simple to understand me with the example

balaji said...

in my pc...i dnt have Ajax updatepanel control so what should i do now...

Anonymous said...

well written Thanks

Anil Emizr said...

i performed same thing with the textbox with event text_changed with autopostback property, i am not sure whether it is doing full post back or partial post back as i dont see page flickering, Problem is that javascript which i am using doesnt work after the postback.. what may be the solution..

if i enable enableviewstate =true in a textbox to retain the values given by javascript, values retain, but as i need to do textbox_textchanged event first, this is not helpful for me. how to make javascript work even after postback. please help

Ajay Shedge said...

Hello sir,
I have use update panel for gridview but problem is that when I click on add button which is in footer row i want show textbox1 value (this textbox1 also in footer row ) in another textbox2 (this textbox2 placed outside of gridview and update panel) . but this value doesn't show in other textbox2. Please help me.

Anonymous said...

Very Nice Article...

Anonymous said...

Hi want know how to use update panel for image tag.. Could you tell me?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.