【Razor】モデルからJavaScriptの配列（連想配列）を作る【ASP.NET Core】

RazorでモデルからJavaScriptの配列（連想配列）を作りたい！

概要

今回の記事では、RazorでモデルからJavaScriptの配列（連想配列）を作る手順を掲載する。

仕様書

環境

• .NET 5.0

手順書

下記のようなC#のモデルをJavaScriptに渡してみる。（RecordをJavaScriptの配列や連想配列に変換する）

using System;
using System.Collections.Generic;

namespace Models
{
    public class Record
    {
        public int ID;
        public string Name;
        public string Value;
    }

    public class ViewModel
    {
        public List<Record> records;
    }
}

配列。

@model Models.ViewModel

<script type="text/javascript">
    var array = [];

    @foreach(var record in Model.records ) {
        @:array.push({@record.ID, "@record.Name", "@record.Value"});
    }
</script>

連想配列。

@model Models.ViewModel

<script type="text/javascript">
    var array = [];

    @foreach(var record in Model.records ) {
        @:array.push({"id": @record.ID, "name": "@record.Name", "value": "@record.Value" });
    }
</script>

まとめ（感想文）

C#の部分からJavaScriptの部分にデータを渡す際に使えるかもね！！