HTML
JavaScript
C#
初心者
ASP.NET_MVC

HTMLからJSに配列データを渡す(C#を使ったASP.NET MVCとEntityFrameworkでの応用もちょこっと)


HTML上のデータを配列で取得する方法。

大きく分けて2種類紹介します。

下記のデータをk=["ss","ss","ss"]と取得する方法を2種類紹介します。

結論から言うとgetElementsByClassNameだけでいい気もします。


getElementsByClassNameを用いて取得する方法

こちらで取得するのがよいそうです。


test.html

    <input class="hiddata" value="ss" />

<input class="hiddata" value="ss" />
<input class="hiddata" value="ss" />


tes.js

    var k = [];

for (var i = 0; i < 3; i++) {
k.push(document.getElementsByClassName('hiddata')[i].value);
}


getElementByIdを用いて取得する方法

idは一意であることが好ましいらしいとのことなので、idを配列のように記述し取得する方法です。


test.html

    <input id="hiddata3[0]" value="ss" />

<input id="hiddata3[1]" value="ss" />
<input id="hiddata3[2]" value="ss" />


tes.js

    var k = [];

for (var i = 0; i < 3; i++) {
k.push(document.getElementById('hiddata3['+i+']').value);
}


解説

上記の方法は仕組みが少し異なります。

"getElementsByClassName"で取得を試みると、同名のクラスが自動的に配列になります

"getElementById"で取得を試みると、同名の値を1つだけ取得します。(idは一意であるという原則があるから)

そこで、ループを用いてidの名前を書き換えることで複数の値を取得しています。


補足1:なぜvalueを付けなければいけないのか?

getElement●●で取得したばかりのものはHTMLCollectionという形式で保存されており、直接値の取得はできません

試しに以下のように記述し、取得を試みると、画像のようにHTMLCollectionという型のデータであることが分かります。


test.html

    <input class="hiddata" value="ss" />

<input class="hiddata" value="ss" />
<input class="hiddata" value="ss" />


tes.js

    var example = document.getElementsByClassName('hiddata');


cc1f09b8d54c3a998f04e52b219ef94e.png

よって、hiddata[0].valueとすることによって"ss"というデータを取得できます。

これをループによって繰り返し取得し、k=["ss","ss","ss"]の取得ができるようになります。


補足2:ASP.NET MVC+EntityFrameworkでの取得例

"getElementById"での取得は違う名前のidをたくさん取得する必要があるので、多少手間です。

ASP.NET MVC+EntityFrameworkを活用すればDBの情報を下記のように取得できます。

1.DBの情報をリストにしてViewBagに詰める


tes.cs

        public ActionResult Test()

{
var tes = db.Cleaner.Select(m=>m.Cgroup).Where(m=>m.HasValue).Distinct().ToList();
ViewBag.tes = tes;
return View();
}

2.隠しデータ(type="hidden")という形でこっそり渡す


tes.cshtml

@using (Html.BeginForm("Test", "Index"))

{
var s = 0;
foreach (var item in @ViewBag.tes)
{
<input type="hidden" id='hiddata[@(s)]' value="@item" />
s += 1;
}
}

3.jsで取得


tes.js

    var k = [];

for (var i = 0; i < 3; i++) {
k.push(document.getElementById('hiddata['+i+']').value);
}


後記

四苦八苦しながら習得した方法なので、使うならgetElementsByClassNameさえ使えれば大丈夫です。