In this article I will explain how to automatically refresh ASP.Net AJAX UpdatePanel in ASP.Net.
UpdatePanel can be refreshed automatically after specific time or regular interval using the following two techniques.
1. Using AJAX Timer control.
2. Using JavaScript.
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
I have placed a Timer control inside the AJAX UpdatePanel and its Interval has been set to 1000 milliseconds i.e. one second.
Thus now every second the Timer executes its OnTick event which in turns refreshes the UpdatePanel and thus the Label is set with the current time.
HTML
<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
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
In order to refresh AJAX UpdatePanel with JavaScript you need to make use of a Hidden Button and place it inside the UpdatePanel you want to refresh automatically.
The 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.
HTML
<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
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
