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

nas

ASP.NETのRazorのセレクトボックスの取得と設定のサンプルです。
言語はVB.NETです。

確認環境
・Microsoft Visual Studio Community 2019

目次

@Html.DropDownListのサンプル

vbhtmlに記述する@Html.DropDownListのサンプルです。セレクトボックスを生成します。

@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行目の引数は、セレクトボックスのnameとidの値になります。
3～6行目の引数は、セレクトボックスのvalue値と表示の値になります。
7行目の引数は、未選択時の文言です。
8行目は、クラスの値を指定しています。この他にも項目をカンマ区切りで追加できます。

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のサンプル

vbhtmlに記述する@Html.DropDownListのサンプルです。セレクトボックスを生成します。

@Html.DropDownListFor(
      Function(model) model.a1,
        New SelectListItem() {
        New SelectListItem() With {.Value = "red", .Text = "赤"},
        New SelectListItem() With {.Value = "yellow", .Text = "黄"},
        New SelectListItem() With {.Value = "blue", .Text = "青"}
      },
      "色を選択して下さい",
      New With {.class = "color1"}
)

上記例では、Models(モデル)のクラスに「a1」という変数があり、コントローラで「a1」に"test1"という文字列をセットしています。
2行目の引数は、nameとidの値がa1になります。
3～6行目の引数は、セレクトボックスのvalue値と表示の値になります。
7行目の引数は、未選択時の文言です。
8行目は、クラスの値を指定しています。この他にも項目をカンマ区切りで追加できます。

以下は、モデルのクラスにある変数の定義です。

 Public Property a1 As String

HTMLコードで見た場合

上記コードを実行した結果以下のようなHTMLになります。

<select class="color1" id="a1" name="a1">
    <option value="">色を選択して下さい</option>
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>

@Html.DropDownListForの初期値をセットする場合

上記コードにある変数a1にvalue値をセットするとセットした値で初期表示されます。

以下は例として変数a1にyellowをセットしました。

<select class="color1" id="a1" name="a1"><option value="">項目を選択して下さい</option>
    <option value="red">赤</option>
    <option selected="selected" value="yellow">黄</option>
    <option value="blue">青</option>
</select>

3行目のようにselectedがセットされます。

 

jQueryでvalue値を取得する

vbhtmlに記述するjQueryでセレクトボックスの選択されたvalue値を取得するサンプルです。

@ModelType AspVbProject2.test1Actionform

<!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 = $('#a1').val();
                console.log(str1); //red/yellow/blue
            });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="ボタン" />
    <div>
        @Html.DropDownListFor(
            Function(model) model.a1,
                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>

1行目は、モデルです。変数a1を定義しています。
19行目は、@Html.DropDownListForです。
20行目のa1がセレクトボックスのidの値になります。
22～24行目は、value値とテキストの値です。
10行目は、jQueryのvalでセレクトボックスの選択されたvalue値を取得しています。

コントローラでvalue値を設定しビューに渡す

コントローラでセレクトボックスのvalue値を設定しビューに渡すサンプルです。

以下は、コントローラです。ViewBagを使用しています。

    ViewBag.Select1 = New SelectListItem() {
        New SelectListItem() With {.Value = "red", .Text = "赤"},
        New SelectListItem() With {.Value = "yellow", .Text = "黄"},
        New SelectListItem() With {.Value = "blue", .Text = "青"}
     }
     Return View("page1", ta1)

以下は、ビューです。

      @Html.DropDownListFor(
           Function(model) model.a1,
              CType(ViewBag.Select1, IEnumerable(Of SelectListItem)),
              "色を選択して下さい",
              New With {.class = "color1"}
       )

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

関連の記事

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

△上に戻る