In this article I will explain how to refresh (reload) UpdatePanel from JavaScript in ASP.Net.
Refreshing or reloading is achieved by making an ASP.Net AJAX UpdatePanel do a PostBack using JavaScript. This article will explain the different ways you can refresh or reload an UpdatePanel using JavaScript.
1. Using Hidden Button
2. Using __doPostBack
In order to illustrate the refreshing or reloading of AJAX UpdatePanel using JavaScript, I will make use of a Label control in which the current time will be displayed.
1. Using a Hidden Button
The Hidden Button technique requires use of a Button, ImageButton or LinkButton. The Button will be placed inside the UpdatePanel that you want to refresh and it will be made invisible using CSS.
Now to refresh the UpdatePanel using JavaScript, you just need to access the Button and call its Click function.
This way the Button’s OnClick event handler on server side is invoked and the Label displays 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:Button ID="btnSubmit" runat="server" OnClick = "GetTime" style = "display:none" />
</ContentTemplate>
</asp:UpdatePanel>
<input type="button" value = "Get Current Time" onclick = "GetCurrentTime()" />
<script type = "text/javascript">
function GetCurrentTime() {
document.getElementById("<%=btnSubmit.ClientID %>").click();
}
</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");
}
2. Using doPostBack method
Another way is to make use of the __doPostBack JavaScript method of ASP.Net. Here we don’t require any other control to do a PostBack instead we need to assign OnLoad event to the UpdatePanel and then make the UpdatePanel do PostBack using the __doPostBack method.
To the __doPostBack function we need to pass the name of the UpdatePanel as EventTarget while the EventArgument can be left blank.
When the __doPostBack method is executed, it invokes the OnLoad method thus updating the Label with the current time.
HTML
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad = "OnLoad">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<input type="button" value="Get Current Time" onclick="GetCurrentTime()" />
<script type="text/javascript">
function GetCurrentTime() {
__doPostBack("<%=UpdatePanel1.UniqueID %>", "");
}
</script>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
}
protected void OnLoad(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString("hh:mm:ss tt");
}
![Refresh an ASP.Net UpdatePanel using JavaScript]()
Demo
Downloads
