Question

我有一个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 下载操作：

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

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

我希望我的Download方法返回FileResult，因此，客户端上会出现一个文件保存对话框。但没有任何事情发生。

我尝试构建各种Response头，返回不同的MimeTypes，更改Download方法的返回类型，甚至尝试从Download方法调用[HttpGet]方法，但客户端仍然没有出现任何内容。

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

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

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

Answer 1

我希望我的Download方法返回FileResult，因此，保存文件对话框将出现在客户端上。但没有任何事情发生。

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

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

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

1 个答案: