UpdatePanel can be refreshed automatically after specific time or regular interval using the following two techniques.
1. Using
AJAX Timer control.
In order to illustrate the automatic refreshing of
AJAX UpdatePanel, I will make use of a
Label control in which the current time will be displayed.
1. Using AJAX Timer control
HTML Markup
The following
HTML Markup consists of:
ScriptManager - For enabling
AJAX functions.
UpdatePanel – For refreshing the Web Page partially.
ContentTemplate – Defining the content of the
UpdatePanel control.
The
ContentTemplate consists of
Label and
Timer control.
Label – Set with current time.
Timer – for show time.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
<asp:Timer ID="Timer1" runat="server" OnTick="GetTime" Interval="1000" />
</ContentTemplate>
</asp:UpdatePanel>
Code Behind
Inside the Page Load event handler, lblTime.Text is show the current time in the label.
GetTime method is for updates the time in DateTime format.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
}
protected void GetTime(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
2. Using JavaScript
HTML Markup
The following
HTML Markup consists of:
ScriptManager - For enabling
AJAX functions.
UpdatePanel – For refreshing the Web Page partially.
ContentTemplate – Defining the content of the
UpdatePanel control.
The
ContentTemplate consists of
Label and
Button control.
Label – Set with current time.
Button - Button will be made invisible using CSS.
Then the Button is referenced using
JavaScript and its Click event is triggered inside setInterval
JavaScript function so that it is executed periodically.
This way the Button’s
OnClick event handler on server side is invoked and the
Label displays the current time after regular Intervals.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
<asp:Button ID="btnSubmit" runat="server" OnClick="GetTime" Style="display:none" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
window.onload = function () {
setInterval(function () {
document.getElementById("<%= btnSubmit.ClientID %>").click();
}, 1000);
};
</script>
Code Behind
Inside the Page Load event handler, lblTime.Text is show the current time in the label.
GetTime method is for updates the time in DateTime format.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
}
protected void GetTime(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
Demo
Downloads
