ASP.NET AJAX File Downloads using IFRAMEs
(No Ratings Yet)
Loading ...All implemented this functionality in ASP.NET applications at least several times. Any time you’re dealing with report data, it’s expected that the data be available for download. Unfortunately, AJAX makes this somewhat difficult. Since there is no traditional HTTP response, you have no context with which to send the file to the browser for normal download.
Enter inline frames (IFRAME). Probably one of the most under utilized HTML elements around, dynamically creating an IFRAME allows you to round trip an HTTP request and response without disrupting the AJAX-ness of your async postback. Since any browser that supports XmlHttpRequest supports IFRAMEs, it is as safe to use as AJAX is in the first place. This is a simple example of the technique, using a static list of files in a dropdown, but it could be adapted to more dynamic file creation scenarios easily.
This is the example download page. The JavaScript comments explain how the IFRAME is created and directed to the GenerateFile.aspx:
<html>
<body>
<form id="form1" runat="server">
<asp :ScriptManager runat="server" ></asp>
<script language="javascript">
// Get a PageRequestManager reference.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Hook the _initializeRequest event and add our own handler.
prm.add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args)
{
// Check to be sure this async postback is actually
// requesting the file download.
if (sender._postBackSettings.sourceElement.id == "DownloadFile")
{
// Create an IFRAME.
var iframe = document.createElement("iframe");
// Get the desired region from the dropdown.
var region = $get("Region").value;
// Point the IFRAME to GenerateFile, with the
// desired region as a querystring argument.
iframe.src = "GenerateFile.aspx?region=" + region;
// This makes the IFRAME invisible to the user.
iframe.style.display = "none";
// Add the IFRAME to the page. This will trigger
// a request to GenerateFile now.
document.body.appendChild(iframe);
}
}
</script>
<asp :UpdatePanel runat="server">
<contenttemplate>
<asp 
ropDownList runat="server" ID="Region">
</asp><asp :ListItem Value="N">North Region</asp>
<asp :ListItem Value="W">West Region</asp>
<asp :ListItem Value="SE">Southeast Region</asp>
</contenttemplate></asp>
<asp :Button runat="server" ID="DownloadFile" Text="Generate Report" ></asp>
</form>
</body>
</html>
GenerateFile.aspx can be empty, other than the Page directive to wire up the code file. There, you write the file to the response object just the same as you normally would:
protected void Page_Load(object sender, EventArgs e)
{
string FileResponse;
string Region = Request.QueryString["Region"];
// Code here to fill FileResponse with the
// appropriate data based on the selected Region.
Response.AddHeader("Content-disposition", "attachment; filename=report.csv");
Response.ContentType = "application/octet-stream";
Response.Write(FileResponse);
Response.End();
}
Now, when DownloadFile is clicked the file will be sent to the user asynchronously. Easy as that.
Source: http://encosia.com/2007/02/23/ajax-file-downloads-and-iframes/
Related Listings:
- Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...
- Pageflakes or Netvibe Ajax IGoogle panes IGoogle, PageFlakes, NetVibes. Beloved child wears many names. Gaia was...
- Username availability checker – Ajax Script When you have a name as common as mine, you...
- File uploads using ajax Here you can test out the AJAX file upload script....
- File Tree Panel – Easy Management Files File Tree Panel is client-server application where client (browser) provides...
Do you like this post?
Tags:
4 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
|
|
|
|
April 27th, 2009 at 6:59 pm
[...] See original here: ASP.NET AJAX File Downloads using IFRAMEs [...]
September 4th, 2009 at 3:37 pm
Hi,
Thanks for your posting. It works fine for IE 7. But, for IE 6, it does not open the dialog box where it suppose to show Open, Save and Cancel button.
Do you have any idea?
October 8th, 2009 at 8:05 am
forget ie6, it’s the worst ever browser from microsoft. move on.
November 14th, 2009 at 12:13 am
http://code.msdn.microsoft.com/AjaxFileDownload