In this article I will explain with an example, how to do Partial PostBack using JavaScript in ASP.Net.
Partial PostBack using JavaScript is achieved by making an ASP.Net AJAX UpdatePanel do a Partial PostBack using the following two ways.
1. Using Hidden Button
2. Using __doPostBack
In order to illustrate partial PostBack 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");
}
![Partial PostBack using JavaScript in ASP.Net]()
Demo
Downloads
