ASP.NET MVC5 でcsvをpostでダウンロードするには

Question

ASP.NET MVC5 でcsv出力をしようとしています。

パラメータの複数ある画面で、ボタンも複数あるためAjaxを使用してPostしています。
ファイルのダウンロードがされず、またファイル作成もできず困っています。

そもそも、Postでファイルダウンロードを検討していること自体に問題があるのでしょうか。
ご教示ください。

//以下、抜粋
$('#download').click(
            function () {
                var param= new Object();
                //param set
                if (parking != null) {
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("CreateCsv", "Csv")",
                        data: JSON.stringify(param),
                        contentType: "application/json; charset=utf-8",
                        datatype:'json',
                        success: function () {
                            debugger
                            alert("success");
                        },
                        failure: function (data) {
                            debugger
                            alert(data.StatusMessage);
                        },
                        error: function (data) {
                            debugger
                            alert(data.StatusMessage);
                        }
                    })
                }
            }
        );


[HttpPost]
        public ActionResult CreateCsv(Param Pram)
        {
            if (Request.IsAjaxRequest())
            {

                // DB からデータ取得

                // CSV 内容生成

                 var fileName = string.Format("filename_{0}.csv", DateTime.Now.ToString("yyyyMMddHHmmss"));

                var data = Encoding.UTF8.GetBytes(csvString);

                var stream = new MemoryStream(data);
                var writer = new StreamWriter(stream);

                //var fileStreamResult = new FileStreamResult(stream, System.Net.Mime.MediaTypeNames .Text.Plain);
                //fileStreamResult.FileDownloadName = fileName;

                //return fileStreamResult;

                writer.Write(data);
                writer.Flush();
                stream.Position = 0;

                return File(stream, "text/csv", fileName);

            }
            return null ;
        }

Action result を変えてみたり、return値をbyteにしてみたり、試行錯誤を行いましたがファイルの作成の痕跡もなく行き詰っています。

Comments

[ShikaTech]

コードは「```」で囲みましょう。https://teratail.com/help/question-tips#questionTips3-7

[退会済みユーザー]

動かないコードを丸投げしないで、クライアント側 (JavaScript のコード) に問題があるのか、サーバー側に問題があるのか、Fiddler や Visual Studio のデバッガを使って切り分けてください。そして、サーバー側に問題があるなら、CSV を生成するコードに問題があるのか、ダウンロードするコードに問題があるのかを切り分けてください。

[AyanoTokuyama]

まずは、考え方の根本的な誤りを確認しようと思い、質問させていただいております。
ちなみに、csv生成コードには問題はありませんでした。
（Getでダウンロードは可能。その後うまくいかないためいろいろ操作）

[退会済みユーザー]

> Getでダウンロードは可能
その jQuery ajax のコードで問題なくダウンロードしてファイルに保存できたと言ってますか？

[AyanoTokuyama]

Getでのダウンロードは、c#側のコードで確認していましたので、そのままのコードではありません。
おっしゃられている通りの方法で解決しました。

[退会済みユーザー]

「c#側のコード」の意味不明ですが、少なくとも質問者さんが解答欄に書いたスクリプトは「私が言った通りの方法」ではないです。あと、JavaScript はブラウザ依存であることをお忘れなく。

Answer 1

動かないコードを丸投げしないで切り分けを行うようお願いしたのに対し、以下の答しかもらえていませんが、

csv生成コードには問題はありませんでした。
（Getでダウンロードは可能。その後うまくいかないためいろいろ操作）

それをベースに話をすると・・・

まず、上記の「ダウンロードは可能」の意味ですが、何をもってそう言っているのでしょう？

サーバーからブラウザに CSV データが送られてきた後、ブラウザが CSV ファイルを PC のディスクに作成するところまで「ダウンロード」という言葉に含んでいるとすると、質問者さんが質問に書いた jQuery ajax のコードでは GET か POST かに関係なくダメです。

何故なら、Blob（生データ）が取得できていないから。

質問者さんの jQuery のバージョンは何だか不明ですが、もし、jQuery 3.0 より前のものであれば、jQuery ajax ではなく、ネイティブの XMLHttpRequest を使うことになるはずです。

jQuery 3.0 以降であれば Blob は取得できるそうですが（未検証・未確認です）、質問者さんが書いたコードでは Blob は取得できてないし、そこを書き直して Blob を取得できるようにしたとしても、その後 CSV ファイルの作成・保存のためのコードを書かないと PC のディスクにファイルは作成されません。

詳しくは以下の記事を読んでください。

Using jQuery's ajax method to retrieve images as a blob
https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob

もし、上記の「ダウンロード」の意味が「サーバーからブラウザに CSV データが送られるまで」ということで、それが GET は可能だが POST がダメということですと、「csv生成コードには問題はありませんでした」というところが勘違いとしか考えられません。

Comments

[AyanoTokuyama]

blobについての認識がありませんでした。
時間が取れず、追記できずに申し訳ありません。
参考にさせていただき、もう少し試してみます。ありがとうございます。

Answer 2

Fileでのリターンを諦めStringで返してクライアント側からblobのUrlを呼ぶようにしました。
文字コードがUTF-8にしかならず困っていますがこれに関しては別の問題なのでもう少し調べてみようと思います。
ご指摘などあれば、お願いします。

//以下、抜粋
 public string CreateCsv(param param)
{
 //csv生成
 return csvのstring
}

$('#download').click(
            function () {
                    //paramをセット
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("CreateCsv", "Csv")",
                        data: JSON.stringify(param),
                        contentType: "application/json; charset=utf-8",
                        success: function () {
                             var blob = new Blob([result], { type: 'application/octet-stream' });
                               　//ファイル名を合成
                                var link = document.createElement('a');
                                link.href = window.URL.createObjectURL(blob);
                                link.download = filename;
                                link.click();
                        }
                    })
        );