Downloading a file onto client in ASP.NET MVC application using JQuery - asp.net-mvc

Question

I have a ASP.NET MVC controller with a method which needs to serve up a file to the client(browser). The controller action is invoked with a JQuery $.ajax call. The user needs to be prompted to download the file once the controller action has finished.
I used Response.Transmitfile/Response.WriteFile in the controller method but both have not prompted me to download the file in IE browser even though the file has been created and I am using the right file path as well.
When i invoke the same method directly by typing the controller URL in the browser I am prompted immediately to download the file created.
Could anyone let me know if there is something missing in this flow ?
I suspect it is the way I am calling the controller action in JQuery. How do i use the response of the JQuery Ajax call to ensure the client is prompted to download the file ?
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreatePresentation(string id)
{
//do something here , create the file and place in a location on the server itself
string filename = Path.GetFileName(filePath);
Response.ContentType = "APPLICATION/OCTET-STREAM";
System.String disHeader = "Attachment; Filename=\"" + filename +
"\"";
Response.AppendHeader("Content-Disposition", disHeader);
FileInfo fileToDownload = new FileInfo(filePath);
Response.WriteFile(fileToDownload.FullName);
}
On the Javascript side, this is how i invoke the controller action
function CreatePresentation()
{
// something here
$.ajax({
type: "POST",
url: "http://localhost:4844/ActionBar/CreatePresentation",
data:data
});
} // end of function

Answer 1

when you use $.ajax, or for that matter any other AJAX mechanism, you're going around the normal browser file-transfer pipeline. It's the main pipeline that trigger's the browser's Save This File dialog, not the AJAX one.
To achieve what you want, you'll want to use a synchronous location change rather than an asynchronous one: rather than using $.ajax, just set document.location:
function CreatePresentation()
{
//snip code that creates a map called "data"
var paramSnippets = [];
for (item in data)
{
paramSnippets.push(item + "="+data[item]);
}
document.location = "http://localhost:4844/ActionBar/CreatePresentation" + "?" + paramSnippets.join("&");
}
edited in response to comments: included example