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”>
.progress
{
    /*border:solid;*/
    background-color: white;
    position: absolute;
    top: 180px;
    left: 180px;
    width: 30px;
    height: 60px;
    padding-left:40px;
    padding-top:40px;
    z-index:1
}.progress2
{
    /*border:solid;*/
    background-color: white;
    position: absolute;
    top: 180px;
    left: 255px;
    width: 60px;
    height: 60px;
    padding-left:1px;
    padding-top:40px;
    z-index:1
}
</style>
</head>
<body>
    <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;
         prm.add_endRequest(EndRequest);
        prm.add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args) {
            postBackElement = args.get_postBackElement();
        }
function EndRequest(sender, args) {
            if (postBackElement.id == ‘ImageButton1’) {
                window.location.href = ‘Default.aspx’
            }
       }
    </script>
<div>    
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
   <ContentTemplate>
       <div class=”progress”>
         <asp:ImageButton ID=”ImageButton1″ runat=”server” Width=”30px” Height=”30px” 
                ImageUrl=”~/PDF_icon.gif” onclick=”ImageButton1_Click” ></asp:ImageButton>
        </div>
        <div class=”progress2″>Test.pdf</div>
   </ContentTemplate>
</asp:UpdatePanel>
           
 <asp:UpdateProgress ID=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
     <ProgressTemplate>
       <div class=”progress”>
              <img id=”a1″   src=”simple.gif” width=”20px” height=”20px”  />
       </div>
     </ProgressTemplate>
 </asp:UpdateProgress>
 </div>
(B) Relevant code from Default2.aspx.cs file
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    System.Threading.Thread.Sleep(3000);
}
(C)Relevant download code in default.aspx.cs
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.AddHeader(
            “content-disposition”, string.Format(“attachment; filename={0}”, “Test.pdf”));
         Response.ContentType = “application/octet-stream”;
        Response.WriteFile(“Test.pdf”);
        Response.End();
    }
}
Advertisements
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s