AJAX, file downloads, and IFRAMEs

We’ve probably 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" />

< 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:DropDownList runat="server" ID="Region">

< asp:ListItem Value="N">North Region< /asp:ListItem>

< asp:ListItem Value="W">West Region< /asp:ListItem>

< asp:ListItem Value="SE">Southeast Region< /asp:ListItem>

< /asp:DropDownList>

< asp:Button runat="server" ID="DownloadFile" Text="Generate Report" />

< /ContentTemplate>

< /asp:UpdatePanel>

< /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.