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.
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 Email
|
|||
44 comments :
hi nice one
hi
Super Suresh..Pls continue doing this good work..Thanks a lot
ya its very easy to understad thanks
thanks a lot suresh keept it up and continue this
thanks
Good work Mr.Suresh
Hi Suresh,
What is the difference between scriptmanager without updatepanel
and
scriptmanager with updatepanel ?
In both case there is no full postback.
very nice and verrryyy helpful
Good and usefull work Mr.Suresh
Very good suresh it is very helpful to all developer those facing problem in using trigger in update panel , thanks keep doing this
Hi suresh ....i had one query is it possible to use partial page rendering using update panel with user control
Can able to post whole projects sample?
Good one Sir. . Thanks
Great Article...
Superb...Hope to have more such useful articles..
Thanks A lot :)
i copied the coding as it is... but it updates the both the pannel... plz help...
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...
Thnk u so much for your valuable coding... it is very helpful to me..
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..
nice
Hi suresh,
Can u jus let me know how I can get ua email id... I need ua help pls... Waiting for positive reply...
hai sir,nice website,this is help to me many quations.....Thanks sir
very nice
Thank a lot its awesome
continue this work
Excelente articulo, justo lo que necesitaba, excelente pagina.
Thanks very much sir, it is very simple to understand me with the example
in my pc...i dnt have Ajax updatepanel control so what should i do now...
well written Thanks
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
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.
Very Nice Article...
Hi want know how to use update panel for image tag.. Could you tell me?
Hello Suresh,
how to handle gridview events such as RowEditing, Row_Deleting in ajax update panel in trigger
Hi suresh
its a good article it was helped me today Thank you
Very helpful article,thank's.
THANK YOU VERY MUCH...IT SOLVED MY PROBLEM :)
One of the best example for beginners...Thanks buddy for the post !!!
I have a GridView inside an UpdatePanel. Each row has a checkbox which writes back to the SQL table whether it is true or false. If on page load checkbox1 starts out being false, I click it, the SQL table is updated to the TRUE value and the GV is updated inside the UpdatePanel. If I click the checkbox1 again, now it is false, the GV is updated but the database gets the old value instead of the new. Here is a question I posted in SO: http://stackoverflow.com/questions/28861925/how-to-send-the-updated-value-of-a-checkbox-inside-an-updatepanel
thankq very much suresh :-)
very nice....... it is giving clear clarity thanks bro :)
very nice ,easily understandable
hii sir
i have textbox inside the updatepanel.i want Trigger on textchange event....
my code is working correctly on other page but not working on my project page...
if i make the EnableEventValidation ="false" then it correctly working on my project page and if i make EnableEventValidation ="true" then it throw following error:
"Server Error in '/MU' Application.
Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation."
plzz help.........
How to manage update panel from code behind.(C#)
I am very gratefully to you thanks
Note: Only a member of this blog may post a comment.