Update Panel is Ajax control in ASP.Net that refreshes a selected portion of a web page.
It is made up of two child tags:
ContentTemplate
Triggers
User control is placed in ContentTemplate tag, whereas certain triggers are defined in the Triggers tag that makes UpdatePanel control.update web page content.
The code in ASP that uses UpdatePanel control is below:
<asp:UpdatePanel ID="myupdatepane" runat="server">
The request is sent or data is posted to the server asynchronously without submitting the whole page.
Following is the ASPX page:
<%@ Page Language="C#" %>
<!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>Example to display UpdatePanel</title>
<style type="text/css">
#updtpnl {
width:450px; height:150px;
}
</style>
</head>
<body><form id="myform" runat="server">
<div style="padding-top: 10px">
<asp:ScriptManager ID="scrmnr" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updtpnl" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="lbl" runat="server" Text="Panel created."></asp:Label><br />
<asp:Button ID="btn1" runat="server" OnClick="Button1_Click" Text="Button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel><br /></div>
</form></body></html>
Add the following code in C# page:
protected void Button1_Click(object sender, EventArgs e)
{
lbl.Text = "Refreshed at " + DateTime.Now.ToString();
}
The panel content should change every time button is clicked without page refresh.
