如何在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的视图中执行类似的操作.我假设控制器的名称是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();
});

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

更新:这是一个完整的发布示例,它没有检查拼写错误等所以调试任何小错误.