When you are using simple asp.net application and you have to click on button, the hole page is postback to the server.
If we want to avoid this full
postback of page and round trip to server we need to use ajax updatepanel
control for partial page postback.
Ajax updatepanel is used to avoid
full postback of the page, avoid refresh of the whole page content with
postback. By using Ajax updatepanel we can refresh only required part of page
instead of refreshing whole page.
UpdateMode Property
When an UpdatePanel control is not
inside another UpdatePanel control, the panel is updated according to the
settings of the UpdateMode
and ChildAsTriggers properties, together with the collection of triggers.
By default updatepanel contains UpdateMode="Always"
if we want to set it conditionally we need to change this property UpdateMode="Conditional"
If
the UpdateMode property is
set to Always, the UpdatePanel control's content
is updated on every postback that originates from anywhere on the page.
ChildrenAsTriggers Property
If
the UpdateMode property is
set to Conditional
1.The
postback is caused by a control that is defined as a trigger by using the
Triggers property of the UpdatePanel control. the
control explicitly triggers an update of the panel content.
2.
The ChildAsTriggers property is set to true
and a child control of the UpdatePanel control
causes a postback.
3.A
child control of a nested UpdatePanel control
does not cause an update to the outer UpdatePanel
control unless it is explicitly defined as a trigger
4.When an UpdatePanel control is inside
another UpdatePanel control, the child panel is automatically updated when the
parent panel is updated.
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
Example
.aspx Page
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="UpdatePanel.aspx.cs"
Inherits="Admin_UpdatePanel"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdPnlTest"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<table width="30%" align="center"
style="border: 1px solid
black;" cellpadding="5"
cellspacing="0"
border="0">
<tr>
<td
colspan="4"
class="clsError">
<br />
</td>
</tr>
<tr>
<td
colspan="4"
style="color: Green; font-family: Times New Roman;
font-size: 14px;
font-weight: bold;">
<asp:Label ID="lblUpdatePanelResult" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td
colspan="4"
class="clsError">
<br />
</td>
</tr>
<tr>
<td
colspan="4"
style="color: Blue;">
</td>
</tr>
<tr>
<td
colspan="4"
class="clsError">
<asp:Button ID="btnUpdatePanel" CssClass="CLSBUTTON" runat="server" Text="Update Panel"
OnClick="btnUpdatePanel_Click"
/>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="btnUpdatePanel"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
<br />
<br />
<table width="30%" align="center"
style="border: 1px solid
black;" cellpadding="5"
cellspacing="0"
border="0">
<tr>
<td colspan="4" class="clsError">
<br
/>
</td>
</tr>
<tr>
<td colspan="4" style="color: Green;">
</td>
</tr>
<tr>
<td colspan="4" class="clsError">
<br
/>
</td>
</tr>
<tr>
<td colspan="4" style="color: Blue; font-family: Times New Roman;
font-size: 14px;
font-weight: bold;">
<asp:Label ID="lblWithoutUpdatePanelResult"
runat="server"></asp:Label>
</td>
</tr>
<tr>
<td colspan="4" class="clsError">
<br
/>
</td>
</tr>
<tr>
<td colspan="4" class="clsError">
<asp:Button ID="btnWithoutUpdatePanel"
runat="server"
CausesValidation="false"
CssClass="CLSBUTTON"
Text="Without
Update Panel" OnClick="btnWithoutUpdatePanel_Click" />
</td>
</tr>
</table>
</form>
</body>
</html>
.aspx.cs Page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Admin_UpdatePanel
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void btnUpdatePanel_Click(object
sender, EventArgs e)
{
lblUpdatePanelResult.Text = "Using
Update Panel Refreshed at " +DateTime.Now.ToString();
}
protected void
btnWithoutUpdatePanel_Click(object sender, EventArgs e)
{
lblWithoutUpdatePanelResult.Text = "Without
Using Update Panel Refreshed at " + DateTime.Now.ToString();
}
}
Result:
