14

Web Api で ASP.NET MVC 4 を使用するのは初めてです。

ユーザーがファイルをダウンロードできるようにしたいのですが、このファイルはサーバー側で作成します。ファイルを作成するために、次のコードを取得することができました

[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を呼び出し、ファイルをダウンロードするときに通常取得する「名前を付けて保存/開く」オプションを使用してファイルを返す方法がわかりません。

電話のかけ方とファイルのダウンロード方法を教えてください。ありがとう。

4

1 に答える 1

9

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を介して投稿するだけです

更新：これは投稿の完全な例であり、タイプミスなどはチェックされていないため、小さなエラーはデバッグしてください。

于 2012-10-19T14:07:18.330 に答える