ASP.NET MVC file download and jQuery parameter

Question

I have a (ViewResult) Controller which receives a string parameter, generates a PDF file, and sends the PDF file back to the browser. I’ve tested the controller itself, and it works fine. Unfortunately, when I try to post to this controller from the $.ajax jQuery function (passing a simple string), the Controller always receives the string parameter as null. I've tried a hundred different configurations of the $.ajax function. Here's the controller, which returns a PDF to the browser (it works...as long as I create the HTML within the method):

[HttpPost]
public ActionResult HtmlToPdf(String htmlData)
{ }

Here's the jQuery I'm using in my view (triggered by a button click):

function getPdf() {
    var htmlData = “blah, blah, etc.”;
    $.ajax({
        url: '/Home/HtmlToPdf',
        type: 'post',
        data: JSON.stringify(htmlData),
        contentType: 'application/json; charset=utf-8',
        success: handleSuccess,
        error: handleError
    });
}

I've tried 'post', 'get', json, text, html, stringify, different content types, etc. Does anyone know how to correctly send a string (the var 'htmlData' above) to a controller? Post? Get? Something else? Thanks.

Try not stringifying your object, send it as data: htmlData — Jose
– Jose, Commented Dec 19, 2013 at 23:44
Hmmm, I have had problems like that before...I'd remove the contentType portion, I've found that even when encoding it as you have done (even with the correct type), by removing it, MVC will decipher it correctly. Just my 2 cents ;) — Jose
– Jose, Commented Dec 19, 2013 at 23:54
Try using Razor to encode the Url as well, something like @Url.Action("myAction", "myController")` — Jose
– Jose, Commented Dec 19, 2013 at 23:56

StarNamer · Accepted Answer · 2013-12-21 13:23:30Z

5

You need to send it as a json object:

function getPdf() {
    var htmlData = “blah, blah, etc.”;
    var dataToPost = { htmlData: htmlData };
    $.ajax({
        url: '/Home/HtmlToPdf',
        type: 'POST',
        data: JSON.stringify(dataToPost),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: handleSuccess,
        error: handleError
    });
}

You then access in HomeController by just declaring it as an argument as you have done. The point is that you need to pass the name of the argument as part of the JSON object. The fact that you variable name is also 'htmlData' is irrelevant. The above could as easily be ...

var stuff = "blah, etc...";
var dataToPost = { htmlData: stuff };

Obviously for multiple arguments you just have more items in your object...

var dataToPost = { arg1: someData, arg2: 2, arg3: true }

... with ...

public ActionResult DoStuff(string arg1, int? arg2, bool? arg3) {}

If you want to pass an array add traditional:true to the $.ajax argument object.

I also note that I've always put 'POST' in upper case since, if you look at the documentation here the datatype: arguments (e.g. 'json') are listed in lower case, but 'GET' and 'POST' for type:are in upper case.

---------------------------- Update -------------------------

As mentioned in comments, for a simple file download, it's probably easier to use a GET.

The basic controller is something like (I'm trimming down code so haven't tested this)

public FileResult DownloadFile(string filename)
{
    byte[] fileContent = new byte[0];
    using(FileStream fs = File.OpenRead(filename)) {
        fileContent = new byte[fs.Length];
        fs.Read(fileContent, 0, Convert.ToInt32(fs.Length));
    }
    UTF8Encoding encoder = new UTF8Encoding();
    return File(encoder.GetBytes(fileContent), "applicaton/text", filename);
}

Then in the javascript do:

$.get('/Home/DownloadFile',
    function(data, textStatus, jqXHR) { /* don't think anything needs to be done */ }
).error(alert('Download failed'));

This obviously downloads a text file so you'd need to play with the encoding (possibly/probably don't need one?) and contentType string for PDF (I think it's just 'application/PDF'). Also, to repeat, I haven't tested this exact code, just edited the logic out of an existing application. Good luck.

edited Dec 21, 2013 at 13:23

answered Dec 20, 2013 at 0:11

StarNamer

7201 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheDudeDude Over a year ago

Very strange; still doesn't work. I have to use a GET because the controller is returning a FileStreamResult. If I use an Html.ActionLink instead of a plain button, the controller action is called correctly....I just can't pass a long string like I'd like to. Using the button (and the $.ajax function) will call the controller action, but on success, the browser doesn't render the resulting PDF file. Is there a particular action/command I need to use in 'success' to simply render the server's response?

TheDudeDude Over a year ago

(in response to your update above): That looks too simple! I'll try it on Monday. FWIW, I'm the only .NET dev at work who ever ventures into jQuery(!). Thanks again.

Misi Over a year ago

"The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods introduced in jQuery 1.5 are deprecated as of jQuery 1.8."

Alconja · Accepted Answer · 2013-12-19 23:43:12Z

2

Try sending your data as a json object and setting the dataType to 'json':

function getPdf() {
    var htmlData = “blah, blah, etc.”;
    $.ajax({
        url: '/Home/HtmlToPdf',
        type: 'post',
        data: { htmlData: htmlData },
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: handleSuccess,
        error: handleError
    });
}

answered Dec 19, 2013 at 23:43

Alconja

14.9k3 gold badges62 silver badges61 bronze badges

4 Comments

TheDudeDude Over a year ago

I've tried that too, with no success. Really, I've used literally dozens of different 'configurations' of the $.ajax function. I'm starting to wonder if it has something to do with POST vs. GET, or some other thing.

TheDudeDude Over a year ago

Oh, one other thing: if I use your syntax above (data: { htmlData: htmlData }), the function throws the error function. I don't know why. If I just use [data: htmlData], the controller is successfully called. :-p

Alconja Over a year ago

@TheDudeDude - did you add the dataType: 'json' when you sent it as json?

Alconja Over a year ago

@TheDudeDude - if that's still not working for you, another one to try is to remove the dataType property again and change your data property to be like this: data: $.param({htmlData: htmlData }). The issue with the example in your question is that the data you're sending doesn't have a key/value pair, so when MVC receives it, it's just a raw string rather than actual HTTP POST/GET parameters it can match up to the action. The versions I've suggested will send the post data as htmlData=blah%2C+blah%2C+etc. which MVC should theoretically interpret properly...

TheDudeDude · Accepted Answer · 2013-12-21 02:03:44Z

0

Thanks for the answers. I think all of them were correct, and good. I gave up on this one, though, because I think I was trying to do something that's not really possible: sending an ajax call to the server and having the server "finish the job" by returning a binary file to the browser (as a PDF). The ajax function was executing, getting a success message, and running its success function. Lost in all this was the fact that the browser was supposed to be receiving a file response, not an ajax response. Sorry if I'm not explaining it very well. Anyway, I dropped back and punted: I'm generating my file by rendering a .NET report (.rdlc) as a PDF, and sending that to the browser. Crude, but effective. In hindsight, I don't think ajax was even the way to go on this. :-p. Thanks again for the help.

answered Dec 21, 2013 at 2:03

TheDudeDude

1231 gold badge4 silver badges15 bronze badges

2 Comments

StarNamer Over a year ago

This can be done in AJAX as we do it all the time. I haven't looked at the code recently, but recall that one technique used was to do an initial POST to generate the file and return data to update the screen then, in the success function, issue a second POST which returns the file. I'll look up the code.

TheDudeDude Over a year ago

@starnamer Oh, nice answer! I hadn't thought of two separate POSTs. I think I will revisit, thanks!

StarNamer · Accepted Answer · 2013-12-22 13:18:29Z

Using the double POST method and a free jQuery extension 'fileDownload' from here

/*
* jQuery File Download Plugin v1.4.1
*
* http://www.johnculviner.com
*
* Copyright (c) 2013 - John Culviner
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*/

Which basically wraps a POST in some code which helps handling some of the complexity...

We have (with large chunks removed (!)...

        $.ajax({
            url: emr.baseURL + '/Control/SaveData',
            type: 'POST',
            data: JSON.stringify(dataToPost),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (json) {
// stuff deleted which updates page
                        $.fileDownload(
                            '/Control/Export',
                            {
                                data: {
// data list deleted...
                                    ))
                                },
                                httpMethod: 'POST'
                            });
                    }
            },
            error: function () {
// deleted
            }
        });

With controller methods (cut down)

public JsonResult SaveData(/* ... */)
{
    /*
     ... do stuff ...
     */
    return /* JsonResult... */;
}

[HttpPost]
public void Export(/* ... */)
{
    /*
     ...
     */
    HttpContext context = System.Web.HttpContext.Current;
    /*
     ...
     */
    byte[] XLSXdata;
    /*
     ...Fill XLXSdata...
     */
    context.Response.Clear();
    context.Response.ClearHeaders();
    context.Response.ClearContent();
    context.Response.Buffer = false;
    context.Response.ContentType = "application/vnd.ms-excel";
    context.Response.AddHeader("content-disposition", "attachment;filename="+filename);
    context.Response.Charset = "";
    context.Response.BinaryWrite(XLSXdata);
    context.Response.Flush();
    context.Response.End();
}

Obviously, this is explicitly controlling what goes into the reponse.

Hope this helps!/

Collectives™ on Stack Overflow

ASP.NET MVC file download and jQuery parameter

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related