Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Updateprogress Not Working with Postbacktrigger in Asp.net Ajax UpdatePanel

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.


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


<script type="text/javascript">
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


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Show Loading Image while uploading images using updatepanel</title>
<style type="text/css">
.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>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%= UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:200px">
<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>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt="" src="loading.gif" />
</div>
</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 RSS subscribe by email Subscribe by Email

5 comments :

Unknown said...

works perfectly,

thank you so much

Unknown said...

Works Perfectly But animation is not working

Anonymous said...

is it possible to do with animation.

Chandra Sekhar said...

It Works perfectly but not work with validations of file upload control

Anonymous said...

Worked for me thanks

Give your Valuable Comments

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

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.