从HttpPost Asp.Net MVC方法返回保存文件 [英] Return file for Saving from HttpPost Asp.Net MVC method
问题描述
我有一个Asp.Net MVC项目，在其一页上，用户可以将加载的数据编辑到表中（更改图像，字符串，项目顺序等）。
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...).
完成所有编辑后，客户端按下下载按钮，并将生成的xml文件保存在硬盘上，以备将来进行下一次操作。
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.
所以我有一个简单的html表格：
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>
此表单数据通过angularJs函数调用发送，如下所示：
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);
});
};
调用此函数后，准备好的http post请求发送到asp.net mvc 下载操作：
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);
}
我希望我的Download方法返回FileResult，因此，文件保存对话框将出现在客户端上。但是没有发生任何事情。
I want my Download method to return FileResult, so, that a file saving dialog will appear on the client. But nothing is happening.
我尝试构建各种Response头，返回不同的MimeTypes，更改Download方法的返回类型，甚至尝试调用[HttpGet]从下载方法的方法，但仍然没有出现在客户端上。
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.
在浏览器网络监控中搜索 - 只发送一个POST请求。
Searched in browser network monitoring - there is only one POST request is sent.
是否可以发送从HttpPost方法到客户端的数据，是否已经以这种方式从angularJs函数调用？我缺少什么，以及为什么保存对话框没有显示在浏览器中？
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?
推荐答案
我希望我的下载方法返回FileResult，因此，保存
的文件会出现在客户。但没有任何事情发生。
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表单，然后将此表单自动提交到下载控制器操作。然后会出现File Save对话框提示用户保存文件。
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.
如果你绝对需要使用AJAX这样做，那么应该注意你可以使用允许您在AJAX中保存二进制响应的 HTML5 FileAPI 打回来。但请注意，这仅适用于现代浏览器，如果您需要支持网站中的某些旧浏览器，则无论如何都需要第一种方法。
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.
这篇关于从HttpPost Asp.Net MVC方法返回保存文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
