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 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
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
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>
<Triggers><asp:PostBackTrigger ControlID="btnbigimg" /> </Triggers>
<ContentTemplate>
Image: FileUpload ID="imageUploadControl2" runat="server" /><asp:Button ID="btnbigimg" runat="server" Text="Submit" OnClick="btnbigimg_Click" />
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>
<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
Thanks For Help. Good Post.
ReplyDelete