How to hide UpdateProgress Image

Posted by Sharpcnet under C# on 3/13/2014 | Points: 10 | Views : 5890 | Status : [Member] | Replies : 9
I have one Ajax UpdateProgress for many UpdatePanels in the page. One of the updatepanel's has a gridview with a download button. Once user clicks on the button, the 'wait' Image shows up, but keeps showing even after the download is complete.

How should I hide it, once the download is done.

ASPX: 

<asp:UpdateProgress Id="UpdateProgress 1" runat="server" DisplayAter="1">
<ProgressTemplate>
<asp:Image id="imgWait" runat="server" ImageUrl="~/Images/wait.gif"/>
</ProgressTemplate>
</asp:UpdateProgress>


JS: 

function HideImage()
{
$(#imgWait).hide();
}


Code Behind: 

protected void Download(object sender, CommandEventArgs e)
{
string sFile = e.CommandArgument.ToString();
Response.Redirect("Download.Aspx?file="+sFile,false);
ScriptManager.RegisterStartupScript(this.Page,this.GetType(),
"script","HideImage();",true);
}


Download.Aspx: 

page_load()
{
if(!string.IsNullOrEmpty(Request.QueryString["file"]))
{
string path = Server.MapPath(Request.QueryString["file"]);
System.IO.FileInfo file = new System.IO.FileInfo(path);
if ( file.Exists )
{
Response.Clear();
Response.AddHeader("Content-Disposition", "attachment; filename=" +
file.Name);
Response.AddHeader("Content-Length", file.Length.ToString());
Response.ContentType = "application/octet-stream";
Response.WriteFile(file.FullName);
Response.Flush();
Response.End();
}
}
}





Responses

Posted by: A2H on: 3/13/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,
I would suggest you to try hiding the loading image in download method rather than hiding it using js function like given below

protected void Download(object sender, CommandEventArgs e)
{

string sFile = e.CommandArgument.ToString();
Response.Redirect("Download.Aspx?file=" + sFile, false);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),"script", "HideImage();", true);
//Hide the Image after download is complete
Image Image1 = UpdateProgress1.FindControl("imgWait") as Image;
if (Image1 != null)
{
Image1.Visible = false;
}

}


Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/13/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
You can check the below link for more details

http://www.nullskull.com/q/10337151/hi-not-able-to-hide-image-in-updateprogress.aspx

Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sharpcnet on: 3/13/2014 [Member] Starter | Points: 25

Up
0
Down
Tried that, but, its failing the if condition, i.e, unable to find the image control

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/13/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,
After reviewing your code I noticed that you have a space in your updateprogress control id'UpdateProgress 1'. AFAIK This is not correct and it will throw errors on build.
If this is your UpdateProgress id in your page then please change it to 'UpdateProgress1' and then try to use my code.
I have tested it and its works fine in my sample application

Please find the complete code:
HTML
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAter="1">
<ProgressTemplate>
<asp:Image ID="imgWait" runat="server" ImageUrl="~/Images/wait.gif" />
</ProgressTemplate>
</asp:UpdateProgress>


C#:
 
protected void Download(object sender, CommandEventArgs e)
{

string sFile = e.CommandArgument.ToString();
Response.Redirect("Download.Aspx?file=" + sFile, false);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "HideImage();", true);
//Hide the Image after download is complete
Image Image1 = UpdateProgress1.FindControl("imgWait") as Image;
if (Image1 != null)
{
Image1.Visible = false;
}

}


Hope this helps.

Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sharpcnet on: 3/16/2014 [Member] Starter | Points: 25

Up
0
Down
The Id was just a typo here. The c# code you pasted, is it from your solution. If hiding an image from C#, there should be no need for ScriptManager. Right. The issue still remains. Could you share your solution as it worked for you.

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/17/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,

Actually I have tried all the scenarios in your code. Except the Response.Redirect part, hence in my sample application the update progress was working fine and I thought the code which I tried is working fine.

Today I have added the Response.Redirect part also and it turns out to the cause for the issue. Yes In other words you cannot use UpdateProgress with Response.Redirect at the same time.

But fortunately we have a solution for this issue. Use Window.Location(Javascript-ClientSide ) to redirect the page rather than Repsonse.Redirect(Server Side )

Please find the Implementation

You need to modify your Download button click like given below

protected void Download(object sender, EventArgs e)

{
//Get your file path here
string sFile = e.CommandArgument.ToString();


//Dont use Response.redirect to go to Download page
//Response.Redirect("Download.Aspx?file=" + sFile, false);


//Call the Javascript function which will redirect to Downlaod page
//Note that you need to pass the filepath here as a parameter

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Download", "GotoDownloadPage( '" + sFile + "');", true);
}


You need to add a Javascript function to your page which will do the redirection

<script type="text/javascript">

function GotoDownloadPage(filepath)
{
window.location.href = "Download.aspx?file=" + filepath;
}
</script>


This will resolve the issue

Please accept my apologies for the inconvenience caused.

Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/17/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Complete Code is given below for your reference

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function GotoDownloadPage(filepath)
{
window.location.href = "Download.aspx?file=" + filepath;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAter="1" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Image ID="imgWait" runat="server" ImageUrl="~/Images/wait.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Download" OnClick="Download" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>


C#:
protected void Page_Load(object sender, EventArgs e)
{

}

protected void Download(object sender, EventArgs e)
{
//Get your file path here
string sFile = e.CommandArgument.ToString();


//Dont use Response.redirect to go to Download page
//Response.Redirect("Download.Aspx?file=" + sFile, false);


//Call the Javascript function which will redirect to Downlaod page
//Note that you need to pass the filepath here as a parameter

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Download", "GotoDownloadPage( '" + sFile + "');", true);
}


Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sharpcnet on: 3/18/2014 [Member] Starter | Points: 25

Up
0
Down
Thank you, that worked but created a new issue. The gridview has 2 columns - View & Delete. Both these columns have icons for each row. When clicked on View icon, the file downloads. After the file is downloaded, the progress image does not stay now, but all the icons in the grid dissappear. Why does this happen. I really want to use icons instead of text.

----

For Those, who would like to use just C# instead of JS:

string sFile = e.CommandArgument.ToString();

string script = "location.href='../Download.aspx?file=" + sFile + "';";
ScriptManager.RegisterStartupScript(this.Page,this.GetType(),"script",script,true);


Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/19/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,
By any change are you creating the image controls dynamically at run time? if that is the case then this is the default behavior for dynamic controls,Because ASP.net do not remember dynamic objects.

As a solution you need to recreate the controls on every postback.

Thanks,
A2H
My Blog

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response