ASP.NETのRazorのセレクトボックスの取得と設定のサンプルです。
言語はVB.NETです。
確認環境 ・Microsoft Visual Studio Community 2019 |
目次
セレクトボックス | @Html.DropDownListのサンプル |
@Html.DropDownListForのサンプル | |
jQueryでvalue値を取得する |
@Html.DropDownListのサンプル
@Html.DropDownListでセレクトボックスを生成するサンプルです。
ビュー(vbhtml)に記述しています。
@Html.DropDownList(
"select1",
New SelectListItem() {
New SelectListItem() With {.Value = "red", .Text = "赤"},
New SelectListItem() With {.Value = "yellow", .Text = "黄"},
New SelectListItem() With {.Value = "blue", .Text = "青"}
},
"色を選択して下さい",
New With {.class = "color1"}
)
2行目の引数(select1)は、セレクトボックスのnameとidの値になります。
3~6行目の引数は、セレクトボックスのvalue値と表示の値になります。
8行目の引数は、未選択時の文言です。
9行目は、クラスの値を指定しています。この他にも項目をカンマ区切りで追加できます。
HTMLコードで見た場合
上記コードを実行した結果以下のようなHTMLになります。
<select class="color1" id="select1" name="select1">
<option value="">色を選択して下さい</option>
<option value="red">赤</option>
<option value="yellow">黄</option>
<option value="blue">青</option>
</select>
@Html.DropDownListForのサンプル
@Html.DropDownListForでセレクトボックスを生成するサンプルです。
このサンプルでは、フォーム、コントローラ、ビューを使用します。
フォーム
以下は、ActionForm1という名前のフォームです。
Public Class ActionForm1
Public Property color As List(Of SelectListItem)
Public Property selectedColor As String
End Class
3行目は、セレクトボックスの値を入れるリストです。
5行目は、セレクトボックスの初期値を入れるStringの値です。
コントローラ
以下は、test1Controllerという名前のコントローラです。
Namespace Controllers
Public Class test1Controller
Inherits Controller
Function Index() As ActionResult
Dim actionform As New ActionForm1
Dim color1 As New List(Of SelectListItem)
color1.Add(New SelectListItem() With {.Value = "red", .Text = "赤"})
color1.Add(New SelectListItem() With {.Value = "yellow", .Text = "黄"})
color1.Add(New SelectListItem() With {.Value = "blue", .Text = "青"})
actionform.color = color1
actionform.selectedColor = "yellow"
Return View("view1", actionform)
End Function
End Class
End Namespace
7行目は、セレクトボックスのリストのインスタンスを生成しています。
9~11行目は、セレクトボックスの値をaddメソッドで追加しています。valueが値でtextが表示値になります。
13行目は、セットしたセレクトボックスの値をフォームにセットしています。
14行目は、初期値の値をフォームにセットしています。
15行目の1つ目の引数は表示するビュー名で、2つ目の引数はフォームです。
ビュー
以下は、view1という名前のビューです。
@ModelType asp_3.ActionForm1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@Html.DropDownListFor(Function(model) model.selectedColor, Model.color, "色を選択して下さい", New With {.class = "color1"})
</body>
</html>
1行目は、コントローラで値をセットしたフォームを指定しています。
11行目は、セレクトボックスです。
「model.selectedColor」の「selectedColor」はidとnameになります。
「selectedColor」の値はセクレクトボックスの初期値になります。
Model.colorは、セットしたリストの値を表示します。
上記のビューをHTMLでみた場合
上記のビューをHTMLでみた場合です。
<select class="color1" id="selectedColor" name="selectedColor">
<option value="">色を選択して下さい</option>
<option value="red">赤</option>
<option selected="selected" value="yellow">黄</option>
<option value="blue">青</option>
</select>
4行目のように設定した初期値にはselectedがセットされます。
画面には以下のように表示されます。
jQueryでvalue値を取得する
ボタンを押すと、jQueryでセレクトボックスのvalue値を取得するサンプルです。
以下は、view1という名前のビュー(vbhtml)です。
@ModelType asp_3.ActionForm1
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
$("#button1").click(function () {
const str1 = $('#selectedColor').val();
console.log(str1); //red/yellow/blue
});
});
</script>
</head>
<body>
<input type="button" id="button1" value="ボタン" />
<div>
@Html.DropDownListFor(
Function(model) model.selectedColor,
New SelectListItem() {
New SelectListItem() With {.Value = "red", .Text = "赤"},
New SelectListItem() With {.Value = "yellow", .Text = "黄"},
New SelectListItem() With {.Value = "blue", .Text = "青"}
},
"色を選択して下さい",
New With {.class = "color1"}
)
</div>
</body>
</html>
10行目は、jQueryのvalでセレクトボックスの選択されたvalue値を取得しています。
20行目のselectedColorがセレクトボックスのidの値になります。10行目の#a1はこのidを指します。
以下は、Microsoftのビューに関するリンクです。
https://docs.microsoft.com/ja-jp/aspnet/core/mvc/views/overview?view=aspnetcore-3.0#passing-data-to-views
関連の記事