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

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

確認環境
・Microsoft Visual Studio Community 2019

テキストボックス	@Html.TextBoxのサンプル
	@Html.TextBoxForのサンプル
	jQueryでvalue値を取得する

@Html.TextBoxのサンプル

@Html.TextBoxでテキストボックスを生成するサンプルです。
ビュー(vbhtml)に記述しています。

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

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

HTMLコードで見た場合

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

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

@Html.TextBoxForのサンプル

@Html.TextBoxForでテキストボックスを生成するサンプルです。
このサンプルでは、フォーム、コントローラ、ビューを使用します。

フォーム

以下は、ActionForm1という名前のフォームです。

Public Class ActionForm1

    Public Property text1 As String

End Class

3行目は、テキストボックスのvalue値を入れるプロパティです。

コントローラ

以下は、test1Controllerという名前のコントローラです。

Namespace Controllers
    Public Class test1Controller
        Inherits Controller

        Function Index() As ActionResult
            Dim actionform As New ActionForm1

            actionform.text1 = "赤です"

            Return View("view1", actionform)
        End Function
    End Class
End Namespace

8行目は、テキストボックスの値をフォームのプロパティにセットしています。

ビュー

以下は、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.TextBoxFor(Function(model) model.text1, New With {.maxlength = 5})
</body>
</html>

1行目は、コントローラで値をセットしたフォームを指定しています。
11行目は、テキストボックスです。
1つめの引数(model.text1)は、テキストボックスのnameとidの値がtext1になり、value値が「赤です」になります。
2つめの引数は、maxlength=5です。この他にも項目をカンマ区切りで追加できます。

HTMLコードで見た場合

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

<input type="text" id="text1" name="text1" value="赤です" maxlength="5" />

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

jQueryでvalue値を取得する

ボタンを押すと、jQueryでテキストボックスのvalue値を取得するサンプルです。
以下は、view1という名前のビュー(vbhtml)です。

@ModelType asp_3.ActionForm1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
        $(function () {
            $("#button1").click(function () {
                const str1 = $('#text1').val();
                console.log(str1); // 赤です
            });
        });
  </script>
</head>
<body>
  <input type="button" id="button1" value="ボタン" />
  @Html.TextBoxFor(Function(model) model.text1, New With {.maxlength = 5})
</body>
</html>

13行目は、jQueryのvalでテキストボックスのvalue値を取得しています。
#text1は、21行目のmodel.text1のidを指しています。

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