ASP.NETとVB.NET Razor構文のセレクトボックス

nas2019/10/28

ASP.NETとVB.NETのRazor構文のセレクトボックスのサンプルです。
(確認環境:Microsoft Visual Studio Community 2019)

目次

サンプル Razor構文のテキストボックス
  ビュー(TestView1.vbhtml)
  jQueryでvalue値を取得する

Razor構文のテキストボックス

TestView1.vbhtmlに@Html.DropDownListと@Html.DropDownListForでセレクトボックスを生成します。

また、ActionForm.vbを使用してテキストボックスに初期値を設定します。

https://localhost:44320/test1/testview1

 

ビュー(TestView1.vbhtml)

@ModelType asp_test1.ActionForm
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	@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 = "color"}
		)
	@Html.DropDownListFor(Function(model) model.selectedColor, 
		Model.color, "色を選択して下さい", New With {.class = "color"})
</body>
</html>

@Html.DropDownList

7行目は、@Html.DropDownListです。
8行目の引数(select1)は、セレクトボックスのnameとidの値になります。
10～12行目の引数は、セレクトボックスのvalue値と表示の値になります。
14行目の引数は、未選択時の文言です。
15行目は、クラスの値を指定しています。この他にも項目をカンマ区切りで追加できます。

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

17行目は、@Html.DropDownListForです。

1行目は、コントローラで値をセットしたフォームを指定しています。
17行目は、セレクトボックスです。
「model.selectedColor」の「selectedColor」はidとnameになります。
「selectedColor」の値はセクレクトボックスの初期値になります。
Model.colorは、セットしたリストの値を表示します。

上記のビューを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がセットされます。

画面には以下のように表示されます。

 

フォーム

Public Class ActionForm

	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 TestView1() As ActionResult
			Dim actionform As New ActionForm
			Dim color As New List(Of SelectListItem)

			color.Add(New SelectListItem() With {.Value = "red", .Text = "赤"})
			color.Add(New SelectListItem() With {.Value = "yellow", .Text = "黄"})
			color.Add(New SelectListItem() With {.Value = "blue", .Text = "青"})

			actionform.color = color
			actionform.selectedColor = "yellow"
			Return View("testView1", actionform)
		End Function
	End Class
End Namespace

7行目は、セレクトボックスのリストのインスタンスを生成しています。
9～11行目は、セレクトボックスの値をaddメソッドで追加しています。valueが値でtextが表示値になります。
13行目は、セットしたセレクトボックスの値をフォームにセットしています。
14行目は、初期値の値をフォームにセットしています。
15行目の１つ目の引数は表示するビュー名で、2つ目の引数はフォームです。

 

jQueryでvalue値を取得する

ボタンを押すと、jQueryでセレクトボックスのvalue値を取得するサンプルです。

@ModelType asp_test1.ActionForm
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="button" id="button1" value="ボタン" />

	@Html.DropDownListFor(Function(model) model.selectedColor,
		 Model.color, "色を選択して下さい", New With {.class = "color"})

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(function () {
			$("#button1").click(function () {
				const str = $('#selectedColor').val();
				console.log(str); //red/yellow/blue
		});
	});
	</script>
</body>
</html>

16行目は、jQueryのvalでセレクトボックスの選択されたvalue値を取得しています。

以下は、Microsoftのビューに関するリンクです。
https://docs.microsoft.com/ja-jp/aspnet/core/mvc/views/overview?view=aspnetcore-3.0#passing-data-to-views

関連の記事

ASP.NET+VB.NET Razor構文のテキストボックス

△上に戻る