Skip to main content

Working with Ajax UpdatePanel 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 works on very smooth concepts. but in some cases we got stuck while using Ajax updatepanel. But you need not to worry. Here i am showing you how to resolve the issues for different cases

 Lets start with very basic use of Ajax updatepanel
<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>
 <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" />
 </ContentTemplate>
 </asp:UpdatePanel>
</div>
 </form>
 </body>
</html>
This is the simplest form of using  Ajax updatepanel
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.  
Lets try an example with the use of trigger
<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.


I hope you understand the concept of using Ajax updatepanel
Now if you are using  a FileUpload Control with Ajax updatepanel. It will create a problem like after clicking on the button the file was not saved to desire location and link of that image was not saved to the database. So to solve such kind of problem just do the following thing


<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="conditional">
<Triggers><asp:PostBackTrigger ControlID="btnbigimg" /> </Triggers>
<ContentTemplate>
  Image: FileUpload ID="imageUploadControl2" runat="server" /><asp:Button ID="btnbigimg" runat="server" Text="Submit" OnClick="btnbigimg_Click" />
</ContentTemplate>
</asp:UpdatePanel>
C#.NET

protected void btnbigimg_Click(object sender, EventArgs e)
{
  //Your code to upload file will come here
}

here we use PostBackTrigger to solve the problem

---------------------------------------------------------------------------------------------------------------------

Now if you are using  a Fck editor or CKEditor with Ajax updatepanel. It will Also create a problem like after clicking on the button the content of that that editor was not saved to the database or may be on twice clicking data was saved. So to solve such kind of problem just do the following thing.
<FCKeditorV2:FCKeditor ID="fckabout" runat="server" BasePath="fckeditor/" Value='<%# Bind("text") %>' Height="500px"></FCKeditorV2:FCKeditor>
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnabout" runat="server" Text="Submit" OnClick="btnabout_Click" /> </ContentTemplate>
</asp:UpdatePanel> 

C#.NET

protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterOnSubmitStatement(
fckabout.GetType(),
"editor",
"FCKeditorAPI.GetInstance('" + fckabout.ClientID + "').UpdateLinkedField();"); 
}
protected void btnabout_Click(object sender, EventArgs e)
{
  //Your code to Save content of fckeditor or ckeditor will come here
}

   
 here we use placed only button inside the updatepanel

Comments

Post a Comment

Popular posts from this blog

Contact us Forms Links

Hi Friends This is my second post to blogger.com. and this time I am going to share my few useful resource links with you all. This post is regarding to “How to create contact us form to the html page” So please go to the following sites 1) http://wufoo.com/gallery/templates/forms/contact-form/ Thats it
Post a Comment
Read more
Hello Friends This is an important moment for me! This is the first blog I’ve ever written. It’s something I’ve wanted to do for a long time, but wasn’t sure how to do it, where, when, or even if. And finally, now here I am. People say that blogs are like a diary (do I hide it under my bed, lock it with a key? Tell it all my secrets? It seems like a wonderful place to share my thoughts with you, or what I do.) It’s going to be fun sharing my thoughts with you, outside the context of a book. Ok let me tell you about myself. I am a I.T Engineer and having 2 year experience about the I.T Sector. After Completion of my graduation i worked as a "Web Designer" for 1.3 years then i Switch my profile to software engineer and I am working as a Software engineer from 6 months. so basically my blogs are all bout to the new technologies, interesting and important codes and some useful resources. For more about myself please visit my website: http://www.lokeshchadha.co.cc/ . 1)..Downl...
Post a Comment
Read more

By pass single quote or special character in ck editor or fck editor in any language

By pass single quote or special character in ck editor or fck editor in any language like asp.net , php etc   whenever we are using ckeditor or fckeditor we are able to pass the data successfully but if single quote  '  or symbols like '|>|<|\\+ is present in our content then it will not save the data I search a lot for the solution of this topic.  Every post is provide some rumors but finally after using ck editor for long time, i found the solution. so friends now you can pass any type of data in fckeditor or ck editor  ------------------------------------------------------------------------------------------------------------------------ AdditionalNumericEntities With this setting, you can define a set of characters which will be translated to their relative numeric entities in the output HTML. This is quite useful if you don't want single quotes (') to be inserted in the text (being transformed to ′):...
2 comments
Read more