如何在ASP.NET中使用Web API MVC 4和jQuery下载文件

问题描述：

我是新来使用ASP.NET MVC 4的Web API。

I am new to using ASP.NET MVC 4 with Web Api.

我想允许用户下载一个文件，这个文件我将在服务器端进行创建。对于创建文件我已经设法获得以下code的保持

I want to allow user to download a file, this file I will be creating on the server side. For creating the file I have managed to get hold of the following code

[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;            
}

如何调用此Web API方法使用jQuery？

但我不知道如何使用jQuery调用此Web API，并使其返回我一个文件，用另存为/打开选项，在下载任何文件时，你通常会得到。

But I am not sure of how to call this web api using jquery and make it return me a file, with a "save as / open" option that you normally get when downloading any file.

能否有人请帮助我，指导我如何进行呼叫和下载文件。谢谢你。

Can some one please help me and guide me in how to make the call and download the file. Thanks.

答

您可以做这样的事情，你想使用jQuery的视图中。我假定控制器的名称是ExportController。您还可以分解模型变量，或者收集在的Htt presponseMessage PostExportData模型（SomeModel模型）通过一些其他的方式。

You can do something like this inside the view where you want to use jquery. I assume the name of the controller is ExportController. You also have to break down the model variables, or alternatively collect the model inside HttpResponseMessage PostExportData(SomeModel model) via some other way.

HTML

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

JavaScript的：

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通过将触发文件下载

Then you can just post #hidden-form via js which will trigger the file download

更新：这是张贴一个完整的例子，它没有检查错别字等，以便调试任何小错误

Update: This is a full example for posting, and its not checked for typos etc so debug any minor errors.

如何在ASP.NET中使用Web API MVC 4和jQuery下载文件

相关推荐