Develop Reference

C# Return File not working to download an Excel file

I'm trying to download a file like this with an MVC project:
Controller:
[HttpPost]
[ActionName("ExportList")]
public async Task<IActionResult> ExportList(List<object> objectList)
{
var fileName = "fileName" ".xlsx";
try
{
var fileContent = await _serviceLayer.ExportListToExcel(objectList);
return File(fileContent, "application/vnd.ms-excel", fileName);
// return new JsonResult("ok");
}
catch(Exception ex)
{
return BadRequest(ex.Message);
}
}
then my service layer:
public Task<byte[]> ExportListToExcel(List<object> objectList)
{
try
{
using(var workbook = new XLWorkbook())
{
var worksheet = workbook.Worksheets.Add("Report");
var currentRow = 1;
#region Header
worksheet.Cell(currentRow, 1).Value = "val1";
worksheet.Cell(currentRow, 2).Value = "val2";
worksheet.Cell(currentRow, 3).Value = "val3";
#endregion
#region Body
foreach(var obj in objectList)
{
currentRow++;
worksheet.Cell(currentRow, 1).Value = obj.val1;
worksheet.Cell(currentRow, 2).Value = obj.val2;
worksheet.Cell(currentRow, 3).Value = obj.val3;
}
#endregion
using(var stream = new MemoryStream())
{
workbook.SaveAs(stream);
var content = stream.ToArray();
return Task.FromResult(content);
}
}
}
catch (Exception ex)
{
throw new Exception("Error");
}
}
I call the controller method with ajax:
function exportList() {
$.ajax({
type: "POST",
url: "#Url.Action("ExportList")",
data: { objectList: objectList},
dataType: "json",
success: function (data) {
//show success message
}, error: function (req, status, error) {
//show error message
}
});
}
I read a lot of posts and this is bassically what they suggest to download the file, but instead I'm returning to the view with the following error Message and the file is not being downloaded but the controller is not throwing any kind of exception message:
Any ideas to download the file?

Try Blob responseType,
$.ajax({
type: "POST",
url: "#Url.Action("ExportList")",
data: { objectList: objectList},
xhrFields: {
responseType: 'blob' // FileContentResult will return as blob
},
success: function (data) {
const url = window.URL.createObjectURL(data); // create url from blob
const link = document.createElement('a'); // create anchor at DOM
link.href = url;
link.setAttribute('download', 'file.xlsx'); // download attribute
document.body.appendChild(link);
link.click(); // trigger click for download
},
error: function (req, status, error) {
//show error message
}
});

Hi your problem is your javascript function exportList()
it's better create a redirect on where the file is and then download it.
In your export method
That will be part of your ExportList controller method:
// Generate a new unique identifier against which the file can be stored
string handle = Guid.NewGuid().ToString();
using (MemoryStream memoryStream = new MemoryStream())
{
//save your file to memory stream
workbook.SaveAs(memoryStream);
memoryStream.Position = 0;
TempData[handle] = memoryStream.ToArray();
}
// Note we are returning a filename as well as the handle
return new JsonResult()
{
Data = new { FileGuid = handle, FileName = "exporfile.xlsx" , FileType="xlsx"}
};
your download file should look like this:
public virtual ActionResult Download(string fileGuid, string fileName, string fileType)
{
if (TempData[fileGuid] != null)
{
byte[] data = TempData[fileGuid] as byte[];
if (fileType == "xlsx" || fileType == "xls")
{
return File(data, "application/vnd.ms-excel", fileName);
}
else if (fileType == "pdf")
{
return File(data, "application/pdf", fileName);
}
else
{
//sin especificar...
return File(data, "application/octet-stream", fileName);
}
}
else
{
return new EmptyResult();
}
}
then change your exportlist method:
function exportList() {
$.ajax({
type: "POST",
url: "#Url.Action("ExportList")",
data: { objectList: objectList},
dataType: "json",
success: function (data) {
var response = JSON.parse(data);
window.location = '/YourController/Download?fileGuid=' + response.FileGuid + '&filename=' + response.FileName +'&fileType=' + response.FileType;
}, error: function (req, status, error) {
//show error message
}
});
}

Ajax Response Doesn't work from server side (iis)

I try to save a file (image) on C# MVC and JS with the following function js
function Add() {
var data = new FormData();
var files = $("#txtUploadFile").get(0).files;
var cod = document.getElementById('cod').value;
var mat = document.getElementById('mat').value;
var status = document.getElementById('status').value;
var plant = document.getElementById('plant').value;
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
data.append("mat", mat);
data.append("status", status);
data.append("plant", plant);
data.append("code", cod);
}
$.ajax({
type: 'POST',
url: '/Pred/Admin/AddPred',
contentType: false,
processData: false,
data: data,
success: function (response) {
if(response.msg == 1)
{
refreshTable(response.data);
}
alert('Predio agregado.');
},
error: function (xhr, status, p3, p4) {
var err = "Error " + " " + status + " " + p3 + " " + p4;
if (xhr.responseText && xhr.responseText[0] == "{")
err = JSON.parse(xhr.responseText).Message;
}
});
}
}
}
and on the codebehind I used it
public ActionResult AddPred()
{
int isInsert=0;
string route = ConfigurationManager.AppSettings["MAPS_ROUTE"];
string[] status, plants, mats, codes;
int stat;
try
{
var requeststatus = Request.Params;
status = requeststatus.GetValues("status");
plants = requeststatus.GetValues("plant");
codes = requeststatus.GetValues("cod");
mats = requeststatus.GetValues("mat");
if (status[0] == "On")
stat= 1;
else
stat= 0;
string plant = plants[0];
string mat = mats[0];
string code = codes[0];
foreach (string file in Request.Files)
{
var fileContent = Request.Files[file];
if (fileContent != null && fileContent.ContentLength > 0)
{
var fileName = fileContent.FileName;
var path = Path.Combine(Server.MapPath(route), fileName);
path = Server.MapPath(route) + fileName;
var sqlpath = "." + route + "/" + fileName;
fileContent.SaveAs(path);
isInsert = ma.InsertPred(code, mat, stat, plant, sqlpath);
}
}
merge.preds = ma.GetPreds();
return Json(new { success = true, data = merge.preds, msg = isInsert }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
Response.StatusCode = (int)HttpStatusCode.BadRequest;
return Json("add failed");
}
}
But the server response ever is
POST myserver/Preds/Admin/AddPred 500 (Internal Server Error)
and I used console.log but I can't to get the error information, When used this code on local side, it's runs Okey, save the image and return model for refresh the front, but when put the aplication on the server, only return error, others funtions works (modal show, return model with json) but doesn't work save a image, I set permissions (write, load, modify) on the server folder,
someone give a idea for solves this problem, I don't know whats wrong

Try like this :
function getCities(id) {
$.ajax({
type: "POST",
url: "#Url.Action("Index", "Default")",
data: '{id: id }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
//alert(response.responseData);
window.location = '/Default/YourView';//
},
error: function (response) {
alert("error!"); //
}
});
}
//In your controller
public JsonResult Index(string id)
{
merge.country= mp.Country();
merge.city= mp.City(id);
return Json("you can return an object or a string, what you want");
}

ajax call (to send file) to call c# function not working(webmethod)

This form i want to send using ajax call with file, but it is not calling the c# function and not showing any error.
//form to submit
<form id="formfile" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" id="fileupload1"/>
</div>
<div class="modal-footer">
<input type="submit" id="savefiles" class="buttonType" onclick="saveFile();return false" value="Save File" />
</div>
</form>
This ajax call is used to call c# code and also send file(.pdf)
//ajax call in .aspx file
function saveFile() {
debugger;
var file = $('input[type="file"]').val();
var exts = ['pdf', 'PDF'];
var formData = new FormData();
formData.append("imageFile", $('#fileupload1')[0].files[0]);
if (file) {
var extension = file.substring(file.lastIndexOf('.') + 1, file.length);
if ($.inArray(extension, exts) > -1)
{
//var formData = new FormData($('#form1')[0]);
var fileUpload = $('#fileupload1').get(0);
var files = fileUpload.files;
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
formData.append(fileUpload.name, fileUpload);
//alert('File Uploaded Successfully!');
}
else
{
alert('Invalid file, Only pdf files can be uploaded!!!');
}
}
//var str = "abc";
$.ajax({
url: "FileUploader.aspx/savepdfFiles",
type: "POST",
//cache: false,
contentType: false,
processData: false,
data: formData,
success: function (data) {
debugger;
},
error: function (data) {
debugger
}
});
}
It will come into success section also, but not calling following method.
//c# code
[webMethod]
public static void savepdfFiles()
{
//code
}
In ajax call it goes into success. but not calling savepdfFiles() method.

EDIT 24/08/2016
You can convert your blob data to base 64 and send it in JSON
var filesLength = 0;
function SaveFileToTemp() {
var file = $('input[type="file"]').val();
var exts = ['pdf', 'PDF'];
var pdfList = [];
// var pdfFile = { FileName: '', B64Data: '' };
if (file) {
var extension = file.substring(file.lastIndexOf('.') + 1, file.length);
if ($.inArray(extension, exts) > -1) {
var fileUpload = $('#fileupload1').get(0);
var files = fileUpload.files;
filesLength = files.length;
for (var i = 0; i < files.length; i++) {
var reader = new window.FileReader();
reader.myFileIndex = i;
reader.onloadend = function () {
base64data = reader.result;
pdfList.push({ FileName: files[this.myFileIndex].name, B64Data: base64data.substr(base64data.indexOf(',') + 1) });
console.log(base64data);
filesLength--;
if (filesLength === 0) {
$.ajax({
url: "/FileUploader.aspx/savepdfFiles",
type: "POST",
//cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({ listPdf: pdfList }),
success: function (data) {
//alert('File Uploaded Successfully!');
debugger;
},
error: function (data) {
debugger
}
});
}
}
reader.readAsDataURL(files[i]);
}
}
else {
alert('Invalid file, Only pdf files can be uploaded!!!');
}
}
}
and in C#
[WebMethod]
public static void savepdfFiles(List<PdfFile> listPdf)
{
//code
foreach (var item in listPdf)
{
byte[] data = Convert.FromBase64String(item.B64Data);
System.IO.File.WriteAllBytes(string.Format("d:\\temp\\{0}",item.FileName), data) ;
}
}
this is my clas PdfFile for info
public class PdfFile
{
public string FileName { get; set; }
public string B64Data { get; set; }
}
Maybe you have to add this to your web.config to allow big json serialization :
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="10240000"/>
</webServices>
</scripting>
</system.web.extensions>
You have to set the appropiate value for maxJsonLength
Previous answer
I think I had this problem before from what i remember there is mechanism that doesn't allow you to this.
Maybe I'm wrong but I share you a link.
You will have to handle this with an ashx.
here is a built-in validation layer of protection that ASP.NET
enforces for both GET and POST based ASP.NET AJAX web methods, which
is that regardless of the HTTP verb being used, ASP.NET always
requires that the HTTP Content-Type header is set to the value
application/json. It this content type header is not sent, ASP.NET
AJAX will reject the request on the server.

I know this problem and it's easy to solve just you have to use Generic Handler.
Using generic handler with your AJAX call you can send any file to asp.net C# function.
In Generic Handler you have to write following c# code.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace UploadFile
{
/// <summary>
/// Summary description for UploadFileHandler
/// </summary>
public class UploadFileHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname;
if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
fname = testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
fname = Path.Combine(context.Server.MapPath("~/Uploads/"), fname);
file.SaveAs(fname);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Here is the example...
If you want Full Example Click here!

Using uploadify with ashx handler

Hi friends i have a form in which there are some text boxes, drop downs and as well as image . I am using knock out js to save the form details. And i am using uploadify plugin to upload my image to a local folder .I have implemented all this things but when it comes to saving the values till now i used a aspx code behind . For uploading purpose we had to choose ashx. So it will be like two server side postings going to happen!!
So i would like to save my data in ashx page rather than aspx.
But i am confused where exactly to start my upload..please some one help me with this!!!
i am saving my values in a save button event like below!!
self.AddEvent = function (args) {
// Here--> $('#file_upload').uploadify('upload');
ajax.Post("../Scripts/uploadify/UploadHandler.ashx", JSON.stringify({ objEnt: args }), false).success(function (data) {
if (data.d[0] > 0) {
// or Here--> $('#file_upload').uploadify('upload');
alert('success');
}
and my fileupload setting s are:
$('#file_upload').uploadify({
'swf': '../Scripts/uploadify/uploadify.swf',
'uploader': '../Scripts/uploadify/UploadHandler.ashx',
'method': 'post',
'formData': { 'someKey': Filename },
'buttonText': 'Browse',
'auto': false,
'folder': 'upload',
'fileTypeExts': '*.jpg;*.jpeg;*.gif;*.png',
'onSelect': function (file) {
var ext = file.name.split('.').pop();
$("#filename").val(Filename + '.' + ext);
},
'onUploadSuccess': function (file, data, response) {
if (response == true) {
$("#eventGrid").jqxGrid('updatebounddata');
}
}
});
It is not possible to call self.AddEvent in 'onUploadsuccess' in my situation...!!!
Please suggest me some best way to store my data and image at same time in ashx handler.
ashx:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream);
var stream = sr.ReadToEnd();
var javaScriptSerializer = new JavaScriptSerializer();
var asd = javaScriptSerializer.Deserialize<RootObject>(stream);
string Newname = context.Request.Form["someKey"];
BAL Bl = new BAL();
string[] args = new string[2];
//AddEvent method will add my data into database add return response "Success"//
args = AddEvent(asd.objEnt);
HttpPostedFile PostedFile = context.Request.Files["Filedata"];
string ext = Path.GetExtension(PostedFile.FileName);
string savepath = "";
string temppath = "";
temppath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
savepath = context.Server.MapPath(temppath);
string fileName = Newname + ext;
if (!Directory.Exists(savepath))
Directory.CreateDirectory(savepath);
PostedFile.SaveAs(savepath + #"\" + fileName);
context.Response.Write(temppath + "/" + fileName);
// context.Response.Write(args);
context.Response.StatusCode = 200;
}
}

$("#<%=FileUpload1.ClientID%>").uploadify({
'uploader': 'Upload.ashx',
'swf': 'uploadify/uploadify.swf',
'script': 'Upload.ashx',
'cancelImg': 'images/cancel.png',
'folder': '../Upload',
'multi': true,
'buttonText': 'select picture',
'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
'auto': false,
'onUploadStart': function () {
}
});
$.ajax({
type: "POST",
url: 'WebServiceAdmin.asmx/SaveData',
data: "{'p':'" + datam+ "'}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (d) { $('#FileUpload1').uploadify('upload', '*'); },
error: function () { }
});

download data as .xls format file

I need to download list data as .xls file.My controller code is follows.
[HttpGet]
public void AttendeeListToExport()
{
string campaign_id = string.Empty;
campaign_id = ((MemberProfile)HttpContext.Current.Profile).HOWCampaignID;
AutoCRM.Services.HOW.Attendee.Manage manage = new AutoCRM.Services.HOW.Attendee.Manage();
DataSet lst = manage.AttendeeListToExport(campaign_id);
if (lst != null)
{
if (lst.Tables[0].Rows.Count > 0)
{
DataTable dt = lst.Tables[0];
// Export all the details to Excel
string filename = campaign_id + "_" + DateTime.Now.ToString("ddMMyyyy") + ".xls";
Export objExport = new Export();
objExport.ExportDetails(dt, Export.ExportFormat.Excel, filename);
}
}
}
js code
$('#exportToExcel').on("click", function () {
alert('hi');
$.ajax({
url: "/api/Attendee/AttendeeListToExport",
async: true,
cache: false,
success: function (result) {
alert(result);
}
});
});
code executing correctly but file not downloading

You can download file through javascript in following both ways :
Using HiddenIFrame :
var downloadURL = function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
Using Jquery :
$('a').click(function(e) {
e.preventDefault(); //stop the browser from following
window.location.href = 'uploads/file.doc';
});
Download now!

If your Controller action returned a FileResult, you could download this from your javascript function like this:
$('#exportToExcel').on("click", function () {
window.open("/api/Attendee/AttendeeListToExport", "_blank");
});

You can't download files using ajax. You have to use a hidden iframe or link directly to the file.