How to download a file using web api in ASP.NET MVC 4 and jquery

Question

I am new to using ASP.NET MVC 4 with Web Api.

I want to allow user to download a file, this file I will be creating on the server side. For creating the file I have managed to get hold of the following code

[ActionName("Export")]
public HttpResponseMessage PostExportData(SomeModel model)
{           
    string csv = _service.GetData(model);
    HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
    result.Content = new StringContent(csv);
    //a text file is actually an octet-stream (pdf, etc)
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    //we used attachment to force download
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
    result.Content.Headers.ContentDisposition.FileName = "file.csv";
    return result;            
}

HOW TO CALL THIS WEB API METHOD USING JQUERY ?

But I am not sure of how to call this web api using jquery and make it return me a file, with a "save as / open" option that you normally get when downloading any file.

Can some one please help me and guide me in how to make the call and download the file. Thanks.

Mihalis Bagos · Accepted Answer · 2012-10-20 15:28:07Z

9

You can do something like this inside the view where you want to use jquery. I assume the name of the controller is ExportController. You also have to break down the model variables, or alternatively collect the model inside HttpResponseMessage PostExportData(SomeModel model) via some other way.

html:

<a class="export">export</a>

javascript:

<script>
$('a.export').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = '@Url.Action('Export', 'ExportController', new { property = model.property, property = model.property2 })';
});
</script>

To use POST

function UpdateForm(modelObject) {
   if ($('#hidden-form').length < 1)
   {
       $('<form>').attr({
           method: 'POST',
           id: 'hidden-form',
           action: '@Url.Action('Export', 'Export')'
       }).appendTo('body');
   }
   $('#hidden-form').html('');
   for(var propertyName in modelObject) {
       $('<input>').attr({
            type: 'hidden',
            id: propertyName,
            name: propertyName,
            value: modelObject[propertyName]
       }).appendTo('#hidden-form');
    }
}

$('a.export').click(function(e) {
    e.preventDefault();
    var modelObject = { property1 : "property1" };
    UpdateForm(modelObject);
    $('#hidden-form').submit();
});

Then you can just post #hidden-form via js which will trigger the file download

Update: This is a full example for posting, and its not checked for typos etc so debug any minor errors.

edited Oct 20, 2012 at 15:28

answered Oct 19, 2012 at 14:07

Mihalis Bagos

2,5201 gold badge22 silver badges32 bronze badges

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

6 Comments

Mihalis Bagos Over a year ago

You have to drop the Controller part from the name, and also drop the ` new { property = model.property, property = model.property2 }` as its not working, its an example of how you should add variables there

Mihalis Bagos Over a year ago

If you have you use post you can do it via api.jquery.com/jQuery.post . You should drop the new { property = model.property, property = model.property2 } part again, and only use the base url generated by the helper. You will also have to somehow create a javascript object that will be posted with the request. I don't know your app so I can't help more than that, it really depends on you html and the data it holds. By the way, a get request (the example I gave) works because querystring variables are parsed properly too.

Mihalis Bagos Over a year ago

The number of parameters doesn't indicate the verb of the request. Just look at facebook's API, and the query strings you have to generate. I will update with a post method too though

Mihalis Bagos Over a year ago

What do you mean the action is not called? This is a function in javascript that you have to call, like UpdateForm(modelObject); AFTER you have created modelObject. Then you can submit the form using jquery: api.jquery.com/submit . I am going to write an example for the usage but you really have to look into this yourself, this is like doing your job for you

Mihalis Bagos Over a year ago

Try the last example. It will post the form to your action, and trigger the download of the file, which is what you want. You have to provide the parameters to var modelObject = { property1 : "property1" }; in order to post the model correctly. If you provide definition of SomeModel I can give you a working example for that too

|

Collectives™ on Stack Overflow

How to download a file using web api in ASP.NET MVC 4 and jquery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related