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