【ASP.NET Core】CSVをアップロード / ダウンロード

ASP.NET Core WebアプリでCSVをアップロード・ダウンロードするやり方をまとめます。

【検証環境】.NET 6.0 / Razor Pages / CsvHelper v27.2.1

CsvHelper のインストール

CSVの入出力には CsvHelper というライブラリを利用するためインストールします。CsvHelper は自動でC#のクラスとマッピングしてくれるためCSVを扱う際は必須のライブラリです。

dotnet add package CsvHelper

View の準備

グレーのエリアにドラッグアンドドロップするか、ファイルの選択からCSVをアップロードする画面を用意しました（アイコンはBootstrapのCDNから引っ張ってきてます）

cshtml

<div class="text-center">
    <form method="post" enctype="multipart/form-data">
        <div id="uploadarea">
                <h1><span class="badge bg-secondary">CSV Upload</span></h1>
                <i class="bi bi-filetype-csv bi-lg"></i>
            <input type="file" id="formfile" name="formfile" />
        </div>
        <input type="submit" class="btn btn-primary form-control" />
    </form>
</div>

css

#uploadarea{
    background: #f6f6f6;
    padding-bottom:10rem;
    width:100%;
}
#uploadarea input {
    margin:10rem;
    width: 80%;
    /*text-align:center;*/
}
#uploadarea i {
    font-size:10rem;
    opacity: 0.1;
    width:100%;
    background: #f6f6f6;
    padding-bottom: 10rem;
    width: 100%;
}

javascript

JavaScriptではドラッグアンドドロップでアップロードできるようにします

※今回は実装していませんが、拡張子がcsvかチェックする処理も入れた方が良いです

https://blog.ver001.com/javascript-get-extension/

const setEvent = () => {
    let uploadarea = document.getElementById("uploadarea");
    let formfile = document.getElementById("formfile");

    uploadarea.addEventListener('dragover', function (e) {
        e.preventDefault();
    });
    uploadarea.addEventListener('dragleave', function (e) {
        e.preventDefault();
    });
    uploadarea.addEventListener('drop', function (e) {
        e.preventDefault();
        formfile.files = e.dataTransfer.files;
    });
}

setEvent();

CSVのアップロード処理

CSVの中身は下記の通り

Id,Name,Age
1,永野芽衣,21
2,本田翼,29
3,深田恭子,35

CSVファイルをアップロードして、CsvHelperでクラスにマッピングする処理を書いてみます

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

[BindProperty]
public IFormFile FormFile { get; set; }

public void OnPost()
{
    if (FormFile == null)
    {
        // ファイルが選択されていません
        return;
    }

    var ms = new MemoryStream();
    FormFile.CopyTo(ms);
    // これしないとマッピングしなかった
    ms.Position = 0;

    // クラスにマッピング
    using (var reader = new StreamReader(ms))
    {
        var config = new CsvHelper.Configuration.CsvConfiguration(new System.Globalization.CultureInfo("ja-jp", false))
        {

        };
        using (var csv = new CsvHelper.CsvReader(reader, config))
        {
            // IEnumerable<Person> で返してくれる
            var people = csv.GetRecords<Person>();
        }
    }
}

GetRecords メソッドでマッピングしてIEnumerable<>で返してくれるので、あとは加工するなり登録するなりして下さい

CSVのダウンロード処理

public IActionResult OnPost()
{
    var people = new List<Person>()
    {
        new Person() { Id = 1, Name ="織田信長", Age =30},
        new Person() { Id = 2, Name ="豊臣秀吉", Age = 20},
        new Person() { Id = 3, Name ="徳川家康", Age=10},
    };
    var ms = new MemoryStream();
    using (var writer = new StreamWriter(ms))
    {
        using (var csv = new CsvHelper.CsvWriter(writer, new System.Globalization.CultureInfo("ja-jp", false)))
        {
            csv.WriteRecords(people);
            writer.Flush();
            return File(ms.ToArray(), "text/csv", "exportFileName.csv");
        }
    }
}

下記CSVファイルがファイル名「exportFileName.csv」でダウンロードできました

Id,Name,Age
1,織田信長,30
2,豊臣秀吉,20
3,徳川家康,10

Asp Net Core