In this Post I will explain what is Ajax updatepanel control,
advantages of updatepanel control and how to use multiple updatepanels in
asp.net that will prevent refreshing the whole page and will allow only a single content to perform their task without affecting other content.
Let's Start now...........................
Let's Start now...........................
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();
}
|
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.
----
Thanks .
No comments:
Post a Comment