jquery - 如何在 ASP.NET MVC 4 和 jquery 中使用 Web api 下载文件

Question

我刚开始使用 ASP.NET MVC 4 和 Web Api。

我想允许用户下载文件，我将在服务器端创建该文件。为了创建文件，我设法获取以下代码

[ActionName("Export")]
public HttpResponseMessage PostExportData(SomeModel model)
{           
    string csv = _service.GetData(model);
    HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
    result.Content = new StringContent(csv);
    //a text file is actually an octet-stream (pdf, etc)
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
    //we used attachment to force download
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
    result.Content.Headers.ContentDisposition.FileName = "file.csv";
    return result;            
}

如何使用 JQUERY 调用此 WEB API 方法？

但我不确定如何使用 jquery 调用此 Web api 并使其返回一个文件，并带有下载任何文件时通常会出现的“另存为/打开”选项。

有人可以帮助我并指导我如何调用电话和下载文件吗？谢谢。

Answer 1

您可以在要使用 jquery 的 View 中执行类似的操作。我假设 Controller 的名称是 ExportController。您还必须分解模型变量，或者收集 HttpResponseMessage PostExportData(SomeModel model) 内的模型
通过其他方式。

html:

<a class="export">export</a>

JavaScript:

<script>
$('a.export').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = '@Url.Action('Export', 'ExportController', new { property = model.property, property = model.property2 })';
});
</script>

使用POST

function UpdateForm(modelObject) {
   if ($('#hidden-form').length < 1)
   {
       $('<form>').attr({
           method: 'POST',
           id: 'hidden-form',
           action: '@Url.Action('Export', 'Export')'
       }).appendTo('body');
   }
   $('#hidden-form').html('');
   for(var propertyName in modelObject) {
       $('<input>').attr({
            type: 'hidden',
            id: propertyName,
            name: propertyName,
            value: modelObject[propertyName]
       }).appendTo('#hidden-form');
    }
}

$('a.export').click(function(e) {
    e.preventDefault();
    var modelObject = { property1 : "property1" };
    UpdateForm(modelObject);
    $('#hidden-form').submit();
});

然后你可以通过js发布#hidden-form，这将触发文件下载

更新:这是一个完整的发布示例，未检查拼写错误等，因此请调试任何小错误。