从 HttpPost Asp.Net MVC 方法保存的返回文件答案

【问题标题】：Return file for Saving from HttpPost Asp.Net MVC method从 HttpPost Asp.Net MVC 方法保存的返回文件
【发布时间】：2016-04-04 06:28:07
【问题描述】：

我有一个 Asp.Net MVC 项目，在其中的一页上，用户可以将加载的数据编辑到表中（更改图像、字符串、项目顺序等...）。

完成所有编辑后，客户端按下“下载”按钮，并将生成的 xml 文件保存在他的硬盘上，以供将来进行下一步操作。

所以我有一个简单的 html 表单：

 <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>

此表单数据通过 angularJs 函数调用发送，如下所示：

$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);
        });
};

调用该函数后，将准备好的http post请求发送到asp.net mvc 下载 action：

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

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

我希望我的下载方法返回 FileResult，因此客户端上会出现一个文件保存对话框。但什么都没有发生。

我尝试过构造各种响应头，返回不同的MimeType，改变Download方法的返回类型，甚至尝试从Download方法中调用[HttpGet]方法，但客户端仍然没有出现。

在浏览器网络监控中搜索 - 只发送了一个 POST 请求。

是否可以将数据从 HttpPost 方法发送到客户端，以这种方式从 angularJs 函数调用？我缺少什么，为什么浏览器中没有显示保存对话框？

或者任何人都可以提出任何其他更合适的解决方案来实现这一目标？

【问题讨论】：

Post Request 的 HttpResponse 状态码是 200 还是 500？仅用于测试，您可以尝试使用带有一些虚拟数据的 ActionLink（带有 HttpGet）来查看文件下载是否有效？
您将需要处理 ajax 响应，如 this question。可以找到使用 typescript 和名为 FiledSaver 的库的类似方法in this other question
@user1672994: HttpResponse 是 200，我不能通过 Get 发送这个表单数据，因为我必须发送图像数据。我以前通过asp.net mvc+jQuery实现了工作，现在卡住了，试图通过angularJs来实现。

标签： javascript c# angularjs asp.net-mvc http-post

【解决方案1】：

我希望我的下载方法返回 FileResult，所以，一个文件保存对话框将出现在客户端。但什么都没有发生。

什么都没有发生是正常的。我建议您不要使用 AJAX 下载文件。只需构造一个普通的隐藏 HTML 表单，然后将此表单自动提交给 Download 控制器操作。然后会出现“文件保存”对话框，提示用户保存文件。

如果您绝对需要使用 AJAX 执行此操作，那么应该注意您可以使用 HTML5 FileAPI，它允许您将二进制响应保存在 AJAX 回调中。但请注意，这仅适用于现代浏览器，如果您需要在您的网站中支持一些较旧的浏览器，则无论如何您都需要第一种方法。

【讨论】：