Simple way to do File download with UpdatePanel and overlay ProgressIndicator

The Scenario:
In async postback, the regular file download won’t work , because there is no HTTP Response
The Solution:
With a little twist, I acheived FileDownload as follows
It does not use IFrame nor a regular postback button in Trigger section of UpdatePanel.
I am assuming, on the click of a download button, there are some lengthy stuff to do & after that task is done , the “Open/Save/Cancel” box pops-up.
In my case, I used “System.Threading.Thread.Sleep(3000)” to substitute the lengthy task & let the progress indicator kick-in.
I am using an ImageButton to start filedownload.
Plus there is another animated image in ProgressIndicator.
With little css trick, I overlay the ProgressIndicator’s gif(image) on top of Filedown Imagebutton’s image.
Now at the end of this async Postback, using javascript, I redirect to another aspx file which does the real download.
Here’s the complete code
The project has 2 aspx files
Default2.aspx/.cs contains all UpdatePanel & UI stuff
Default.aspx has just the download code.
(A) Relevant code from Default2.aspx file
<style type=”text/css”>
    background-color: white;
    position: absolute;
    top: 180px;
    left: 180px;
    width: 30px;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 180px;
    left: 255px;
    width: 60px;
    height: 60px;
    <form id=”form1″ runat=”server”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
    <script language=”javascript” type=”text/javascript”>
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        var postBackElement;
function InitializeRequest(sender, args) {
            postBackElement = args.get_postBackElement();
function EndRequest(sender, args) {
            if ( == ‘ImageButton1’) {
                window.location.href = ‘Default.aspx’
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
       <div class=”progress”>
         <asp:ImageButton ID=”ImageButton1″ runat=”server” Width=”30px” Height=”30px” 
                ImageUrl=”~/PDF_icon.gif” onclick=”ImageButton1_Click” ></asp:ImageButton>
        <div class=”progress2″>Test.pdf</div>
 <asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
       <div class=”progress”>
              <img id=”a1″   src=”simple.gif” width=”20px” height=”20px”  />
(B) Relevant code from Default2.aspx.cs file
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
(C)Relevant download code in default.aspx.cs
public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
            “content-disposition”, string.Format(“attachment; filename={0}”, “Test.pdf”));
         Response.ContentType = “application/octet-stream”;
This entry was posted in AJAXToolKit and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s