Updateprogress Not Working with Postbacktrigger in Asp.net Ajax UpdatePanel

By: Suresh Dasari Jun 16, 2015

Introduction:

Here I will explain how to solve the problem of “updateprogress not working with postbacktrigger in asp.net or updateprogress with postbacktrigger in updatepanel not showing loading image” in asp.net using c#, vb.net with example. Generally in ajax updatepanel updateprogress will work for asynchronous postback requests but to make it work with ajax postbacktrigger we need to write JavaScript function.

Description:

In previous articles I explained bind gridview in updatepanel in asp.net, jQuery display gridview row details in new popup window in asp.net, ajax updatepanel with triggers example in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to solve the problem of “updateprogress not working with postbacktrigger” in asp.net.

To show updateprogress with postbacktrigger we need to write JavaScript function and need to call that function in button OnClientClick that would be like as shown below

function showProgress() {

var updateProgress = $get("<%= UpdateProgress.ClientID %>");

updateProgress.style.display = "block";

}

</script>

If you want to check it in complete example open your aspx page and write the code like as shown below

<title>Show Loading Image while uploading images using updatepanel</title>

.overlay

{

position: fixed;

z-index: 999;

height: 100%;

width: 100%;

top: 0;

background-color: Black;

filter: alpha(opacity=60);

opacity: 0.6;

-moz-opacity: 0.8;

}

</style>

function showProgress() {

var updateProgress = $get("<%= UpdateProgress.ClientID %>");

updateProgress.style.display = "block";

}

</script>

</head>

<body>

<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">

<asp:FileUpload ID="uploadfiles1" runat="server" />

<asp:Button ID="btnUpload" Text="Upload" runat="server" onclick="btnUpload_Click" OnClientClick="showProgress()" /><br />

<asp:Label ID="lblMsg" runat="server"/>

</div>

</ContentTemplate>

<asp:PostBackTrigger ControlID="btnUpload" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

After completion of aspx page create new folder uploads in your application to upload files and add following namespaces in codebehind

C# Code

using System;

using System.IO;

After completion of adding namespaces you need to write the code like as shown below

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnUpload_Click(object sender, EventArgs e)

{

string fileName = Path.GetFileName(uploadfiles1.FileName);

uploadfiles1.SaveAs(Server.MapPath("~/uploads/") + fileName);

lblMsg.Text = "File Uploaded Successfully";

}

VB.NET Code

Imports System.IO

Partial Class VBCode

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btnUpload_Click(sender As Object, e As EventArgs)

Dim fileName As String = Path.GetFileName(uploadfiles1.FileName)

uploadfiles1.SaveAs(Server.MapPath("~/uploads/") & fileName)

lblMsg.Text = "File Uploaded Successfully"

End Sub

End Class

Demo

Updateprogress Not Working with Postbacktrigger in Asp.net Ajax UpdatePanel

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

5 comments :

Unknown said...: works perfectly,

thank you so much; January 29, 2016 at 3:30 PM
Unknown said...: Works Perfectly But animation is not working; April 27, 2016 at 2:34 AM
Anonymous said...: is it possible to do with animation.; August 23, 2016 at 7:23 AM
Chandra Sekhar said...: It Works perfectly but not work with validations of file upload control; November 1, 2017 at 2:06 AM
Anonymous said...: Worked for me thanks; December 2, 2017 at 1:54 AM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview