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
– user1672994, Commented Dec 30, 2015 at 10:12
You will need to handle the ajax response, as in this question. A similar approach using typescript and a library called FiledSaver can be found in this other question — Daniel J.G.
– Daniel J.G., Commented Dec 30, 2015 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
– Fragment, Commented Dec 30, 2015 at 10:17

Community · Accepted Answer · 2017-05-23 10:30:52Z

2

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.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Dec 30, 2015 at 10:19

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

Collectives™ on Stack Overflow

Return file for Saving from HttpPost Asp.Net MVC method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related