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
関連の記事
ASP.NET(VB) Razorのセレクトボックスの取得/設定
ASP.NET MVCでhello worldを表示する(VB.NET)