How to download a file through ajax request in asp.net MVC 4

I think there is no need of Ajax call you can do simply using hyperlink as below example.

View Code

<a href="@Url.Action("DownloadAttachment", "PostDetail", new { studentId = 123 })">Download Form</a> 

Controller Method

public ActionResult DownloadAttachment(int studentId) { // Find user by passed id var file = db.EmailAttachmentReceived.FirstOrDefault(x => x.LisaId == studentId); byte[] fileBytes = System.IO.File.ReadAllBytes(file.Filepath); return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, file.Filename); } 

The following code will help you to create the pdf/excel file in server and allow to download in browser through ajax call.

Controller for creating the pdf/excel file

public async Task<JsonResult> CardStatusReportExport(ReportFilterInputModel cardStatusReportInputModel, string type, string sortOrder) { cardStatusReportInputModel.ReportType = Reprot_Type_Const.CardStatus; cardStatusReportInputModel.ReportFormat = type; var CardStatusReport = await _reportDocGeneration.DocGeneartion(cardStatusReportInputModel); string result = Path.GetTempPath(); string fileName = "CardStatusReport" + DateTime.Now.ToString("yyyyMMddHHmmssfff"); if (type.Equals(Constants.FILE_TYPE_PDF)) { fileName = fileName + Constants.FILE_EXTENSION_PDF; System.IO.File.WriteAllBytes(result + fileName, CardStatusReport); } else { fileName = fileName + Constants.FILE_EXTENSION_EXCEL; System.IO.File.WriteAllBytes(result + fileName, CardStatusReport); } return Json(new { fileName = fileName}); } 

The following controller code will allow to download the created file from a single ajax call

[HttpGet] public async Task<ActionResult> Download(string file) { var path = Path.Combine(Path.GetTempPath(),file); var memory = new MemoryStream(); try { using (var stream = new FileStream(path, FileMode.Open)) { await stream.CopyToAsync(memory); } } catch (Exception e) { ModelState.AddModelError("FileNotFoundError", e.Message); return Content(e.Message); } memory.Position = 0; return File(memory, GetContentType(path), Path.GetFileName(path)); } private string GetContentType(string path) { var types = MediaType.GetMimeTypes(); var ext = Path.GetExtension(path).ToLowerInvariant(); return types[ext]; } 

Use the below ajax call for creation of pdf/excel file and download the same.

$.ajax({ method: 'POST', data: { type: val, cardStatusReportInputModel: payload, sortOrder : sortOrder}, url: '@Url.Action("CardStatusReportExport", "Reports")' }).done(function (data, statusText, xhdr) { try { if (data.fileName != "") { window.location.href = "@Url.RouteUrl(new { Controller = "Reports", Action = "Download"})/?file=" + data.fileName; ShowMessageAlert('@Html.Raw(Localizer["Report has been exported successfully"].Value.ToString())'); } $("#divLoader").hide(); } catch (e) { $("#divLoader").hide(); } }).fail(function (xhdr, statusText, errorText) { alert('error'); $("#divLoader").hide(); }); 

public FileResult DownloadGeneralDocs(string docName) { string fileName = docName+".pdf"; var path = _globalWebSettings.Value.DownloadGeneralDocsPath; string filePath = ""; if (fileName!="") { filePath = (_env.WebRootPath + string.Format("{0}{1}",path, fileName)); } FileInfo file1 = new FileInfo(filePath); byte[] fileBytes = System.IO.File.ReadAllBytes(file1.FullName); return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName); } view.cshtml: <script> $(document).ready(function () { $("#docTable tbody tr td button").click(function (e) { var docName = $(this).closest("tr").find(".document_td_data").text(); $.ajax({ url: '@Url.Action("DownloadGeneralDocs", "Documents")', dataType: "html", cache:false, data: { 'docName': docName }, success: function (data) { window.location.href = "@Url.RouteUrl(new { Controller = "Documents", Action = "DownloadGeneralDocs" })/?docName=" + docName ; }, error: function (err, response) { console.log(err, response); alert(err, response.responseText); } }) }); }); 

Actually, there is no need to make double calls to API. It is possible to download a file by using the following code via JavaScript:

window.location.href = '@Url.Action("DownloadAttachment", "PostDetail", new { studentId = 123 })'; 

OR if your code is not placed in .cshtml file:

window.location.href = '/PostDetail/DownloadAttachment?studentId=123'; 

Below method would helps calling action from Ajax request from jQuery dialog window and it executes the action and can be closed dialog window as soon the action return success result

Controller

 [HttpGet] public ActionResult DownloadCampaign(string filePath, string mode) { string contentType = string.Empty; var sDocument = filePath; if (!System.IO.File.Exists(sDocument)) { return HttpNotFound(); } if (mode == "action") return Json(new {fileName = filePath}, JsonRequestBehavior.AllowGet); if (sDocument.Contains(".pdf")) { contentType = "application/pdf"; } else if (sDocument.Contains(".docx")) { contentType = "application/docx"; } else if (sDocument.Contains(".xls")) { contentType = "application/xlsx"; } return File(sDocument, contentType, sDocument); } 

JQuery - Ajax Request

$(document) .ready(function() { $("#btnDownload").click(function () { var file = $("#FilePath").val(); $.ajax({ url: '@Url.Action("DownloadCampaign", "FileList")', data: { filePath: file, mode:'action' }, method: 'GET', dataType: 'json', //contentType: 'application/json; charset=utf-8', success: function(data) { @*window.location = '@Url.RouteUrl("DownloadCampaign", "FileList", new { filePath = data1.fileName })';*@ window.location.href = "@Url.RouteUrl(new { Controller = "FileList", Action = "DownloadCampaign" })/?filePath=" + data.fileName + "&mode=download"; $("#downloadFile_dialog").dialog("close"); }, error: function (req, status, errorObj) { alert("Error"); } }); }); }); 

Please reach out to me if you need more information about this.