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

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

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

2022-10-11 | , , ,

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の部分にデータを渡す際に使えるかもね!!