Return file for Saving from HttpPost Asp.Net MVC method

Question

I have an Asp.Net MVC project, and on one page of it, user can edit loaded data into table(change images, strings,items order, etc...).

After all edits have made, the client pushes Download button, and save the resulted xml-file on his hard-drive for the next manipulations in future.

So i have a simple html form:

 <form name="mainForm" data-ng-submit="sendForm()" ng-controller="ImportController" novalidate enctype="multipart/form-data">

    <!-- table structure definition removed for briefing -->

    <td>
        {{data.Items[$index].Id}}
    </td>
    <td>
        <img class="center-cropped" ng-src="data:image/jpg;base64, {{data.Items[$index].Image}}">
    </td>
    <td>
        <input class="form-control" type="text" value="{{data.Items[$index].LastName}}" />
    </td>

    <td>
        <input class="form-control" type="text" value="{{data.Items[$index].FirstName}}" />
    </td>
    <td>
        <input class="form-control" type="text" value="{{data.ClaimItems[$index].MiddleName}}" />
    </td>
    <input class="btn-success" id="submit-btn" type="submit" data-ng-disabled="mainForm.$invalid" value="Download" />

</form>

This form data is sent through angularJs function call which looks like:

$scope.sendForm = function () {

    // some preparations to send image data through json
    for (var i = 0; i < $scope.data.Items.length; i++) {
        $scope.data.Items[i].ImageAsString = $scope.data.Items[i].Image;
    }

    $http.post("Download", { array: $scope.data })
        .success(function (responseData) {
            console.log(responseData);
        })
        .error(function (responseData) {
            console.log("Error !" + responseData);
        });
};

After this function is called, the prepared http post request is sent to asp.net mvc Download action:

    [HttpPost]
    public FileResult Download(ItemsArrayWrapper array)
    {
       // here goes incoming data processing logic
       // ...

       return File(array.ConvertToItemsArray().Serialize(), "text/xml", name);
    }

I want my Download method to return FileResult, so, that a file saving dialog will appear on the client. But nothing is happening.

I've tryed to construct various Response headers, to return different MimeTypes, change return types of Download method, and even tryed to call [HttpGet] method from Download method, but still nothing is appeared on the client.

Searched in browser network monitoring - there is only one POST request is sent.

Is it possible to send data from HttpPost method to client, that has been called from angularJs function in a such way? What i am missing, and why the saving dialog is not showed in browser?

Or can anyone suggest any other more suitable solutions to achieve this?

What is the HttpResponse status code of Post Request - 200 or 500? Only for testing, can you try with ActionLink (with HttpGet) with some dummy data to see if file download works? — user1672994, Dec 30 '15 at 10:12
You will need to handle the ajax response, as in [this question](http://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post). A similar approach using typescript and a library called FiledSaver can be found [in this other question](http://stackoverflow.com/questions/14215049/how-to-download-file-using-angularjs-and-calling-mvc-api) — Daniel J.G., Dec 30 '15 at 10:15
@user1672994: HttpResponse is 200, and i can't send this form data through Get, because i have to send image data. I have previous working realization through asp.net mvc+jQuery and now stucked, trying to implement this through angularJs. — Fragment, Dec 30 '15 at 10:17

score 2 · Accepted Answer · edited May 23 '17 at 10:30

I want my Download method to return FileResult, so, that a file saving dialog will appear on the client. But nothing is happening.

It's normal that nothing is happening. I would recommend you not using AJAX for downloading files. Just construct a normal hidden HTML form and then auto-submit this form to the Download controller action. Then the File Save dialog will appear to prompt the user for saving the file.

If you absolutely need to do this using AJAX then it should be noted that you could use the HTML5 FileAPI that allow you to save the binary response in an AJAX callback. But note that will work only in modern browsers and if you need to support some older browsers in your website you will need the first approach anyway.

Return file for Saving from HttpPost Asp.Net MVC method

1 Answers1

Linked