ASP.NET(VB) Razorのセレクトボックスの取得/設定

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行目の１つ目の引数は表示するビュー名で、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