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

nas

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

確認環境
・Microsoft Visual Studio Community 2019

目次

@Html.TextBoxのサンプル

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

@Html.TextBox("text1", "red", New With {.maxlength = 5})

1つめの引数は、テキストボックスのnameとidの値になります。
2つめの引数は、valueの値になります。
3つめの引数のsizeは、sizeの値に、maxlengthはmaxlengthの値になります。この他にも項目をカンマ区切りで追加できます。

HTMLコードで見た場合

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

<input id="text1" maxlength="5" name="text1" type="text" value="red" />

 

@Html.TextBoxForのサンプル

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

@Html.TextBoxFor(
       Function(model) model.a1,
       New With {.maxlength = 5})

上記例では、Models(モデル)のクラスに「a1」という変数があり、コントローラで「a1」に"test1"という文字列をセットしています。
1つめの引数は、テキストボックスのnameとidの値がa1になり、value値がtest1になります。
2つめの引数のsizeは、sizeの値に、maxlengthはmaxlengthの値になります。この他にも項目をカンマ区切りで追加できます。

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

 Public Property a1 As String

HTMLコードで見た場合

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

<input id="a1" maxlength="5" name="a1" type="text" value="test1" />

 

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); //test1
            });
        });
    </script>
</head>
<body>
    <input type="button" id="button1" value="ボタン" />
    <div>
        @Html.TextBoxFor(
              Function(model) model.a1,
              New With { .maxlength = 5})
    </div>
</body>
</html>

1行目は、モデルです。変数a1を定義しています。
19行目は、@Html.TextBoxForです。
20行目のa1がテキストボックスのidの値になります。
value値は、modelの変数にセットされた値または、画面のテキストボックスから入力された値です。
10行目は、jQueryのvalでテキストボックスのvalue値を取得しています。

以下は、MicrosoftのRazor構文に関するリンクです。
https://docs.microsoft.com/ja-jp/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-vb

関連の記事

ASP.NET MVCのWebアプリでhello worldを表示する

△上に戻る