C# .Net Core でファイルをWebからダウンロードする方法

はじめに

今回はファイルをダウンロードする方法についてまとめます。
file.zip というファイルをダウンロード出来るようにしました。

開発環境

・Windows10 Pro
・VisualStudio2019
Visual Studio のインストール | Microsoft Docs

動作

画面上のダウンロードボタンを左クリックします。
f:id:knkomko:20190710082415p:plain:w350

ファイルがダウンロードできます。
f:id:knkomko:20190710082634p:plain:w350

ダウンロードしたファイルは、ダウンロードフォルダに保存されます。
f:id:knkomko:20190710083221p:plain:w350

1. ASP.Net Core MVC アプリケーションを作成する

ASP.NET Core Webアプリケーションを選択して、次へ。
f:id:knkomko:20190710081128p:plain:w350

Web アプリケーション(モデルビューコントローラー)を選択して、作成。
f:id:knkomko:20190710081201p:plain:w350

2. フォルダの作成とファイルの追加

Downloadフォルダをプロジェクトの下に作成します。
Downloadフォルダに file.zip のファイルを作成します。
f:id:knkomko:20190710123936p:plain:w350

3. ボタンの追加

f:id:knkomko:20190710124359p:plain:w350

Index.cshtml にダウンロードボタンを追加します。

<button class="btnDownload" type="button">ダウンロード</button>

4. ボタン押下時のアクションを追加 1/2

f:id:knkomko:20190710123908p:plain:w350

HomeController.cs に Download メソッドを追加します。

[Route("Download")]
public ActionResult Download()
{
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Download", "file.zip");
    var file = System.IO.File.ReadAllBytes(filePath);
    return File(file, MediaTypeNames.Application.Zip, "file.zip");
}

5. ボタン押下時のアクションを追加 2/2

js フォルダに download.js ファイルを作成します。
f:id:knkomko:20190711123023p:plain:w350

download.js にボタン押下時 Download メソッドを呼び出す処理を追加します。
注意点として、変数 mySiteUrl のポート番号が実行した時のポート番号と違う場合には変更してください。

$('.btnDownload').click(function () {
    var documentUrl = document.URL;
    var baseUrl = documentUrl.substring(0, documentUrl.indexOf('currentPageName'));
    var mySiteUrl = 'https://localhost:44369/'
    location.href = mySiteUrl + '/Download'
});

6. jsファイルを読み込む一文を追加

f:id:knkomko:20190711124210p:plain:w350

_Layout.cshtml に download.js を読み込む一文を追加します。
これがないとダウンロード時に Uncaught ReferenceError: $ is not defined とエラーになります。

<script src="~/js/download.js"></script>

stackoverflow.com

7. 動作確認

ファイルのダウンロードが出来ることを確認して終了です。
f:id:knkomko:20190710083221p:plain:w350

参考資料

ASP.NET Core MVC で Web アプリを作成する | Microsoft Docs
ASP.NET MVCでCSVダウンロード - IT業界のすみっこ暮らし
 ASP.NET Core MVCにおけるファイルダウンロードのあれこれ - tekitoumemo’s diary

Grow up

生活とプログラミング