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

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

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

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

TestView1.vbhtmlに@Html.TextBoxと@Html.TextBoxForでテキストボックスを生成します。

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

https://localhost:44320/test1/testview1

ビュー(TestView1.vbhtml)

@ModelType asp_test1.ActionForm
<!DOCTYPE html>
<html>
<head>
</head>
<body>
@Html.TextBox("text1", "red", New With {.maxlength = 5})
@Html.TextBoxFor(Function(model) model.text1, New With {.maxlength = 5})
</body>
</html>

@Html.TextBox

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

HTMLは以下のようになります。

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

@Html.TextBoxFor

8行目は、@Html.TextBoxForです。
value値をフォームから設定しています。

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

HTMLは以下のようになります。

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

フォーム

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

Public Class ActionForm

	Public Property text1 As String

End Class

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

コントローラ(Test1Controller.vb)

Namespace Controllers
	Public Class Test1Controller
		Inherits Controller

		Function TestView1() As ActionResult
			Dim actionForm As New ActionForm
			actionForm.text1 = "ABCDE"
			Return View(actionForm)
		End Function
	End Class
End Namespace

7行目の文字列は、テキストボックスに表示されます。

jQueryでvalue値を取得する

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

@ModelType asp_test1.ActionForm
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="button" id="button1" value="ボタン" />
	@Html.TextBoxFor(Function(model) model.text1, New With {.maxlength = 5})

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

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

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