Return 从 HttpPost 保存的文件 Asp.Net MVC 方法

Question

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

完成所有编辑后，客户按下下载按钮，并将生成的 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);
        });
};

调用此函数后，将准备好的httppost请求发送到asp.netmvc下载action:

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

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

我希望我的 Download 方法为 return FileResult，这样，一个文件保存对话框将出现在客户端上。但是什么也没有发生。

我尝试构建各种响应头，return 不同的 MimeType，改变 return 类型的下载方法，甚至尝试从下载方法调用 [HttpGet] 方法，但仍然客户端上什么也没有出现。

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

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

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

Answer 1

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

没有事情发生很正常。我建议您不要使用 AJAX 下载文件。只需构建一个普通的隐藏 HTML 表单，然后 auto-submit 此表单到 Download 控制器操作。然后会出现文件保存对话框提示用户保存文件。

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

Return 从 HttpPost 保存的文件 Asp.Net MVC 方法

Return file for Saving from HttpPost Asp.Net MVC method

javascript

c#

asp.net-mvc

http-post

angularjs