PROGRAM VISUALBASIC

ASP.NET(VB.NET) MVCモデル入門~入力値をViewModelで受け取り画面に表示

入力項目を作成してViewModelで値を受け取り画面に表示する

今回は、前回のプログラムに新しく入力用のビューを追加して、入力した値を画面に表示してみましょう。
値を入力するボックスの作成には、HTMLヘルパーを使います。

コントローラーに入力用メソッドを追加

HomeControllerに、入力用ビューを呼び出すメソッド(Input())を追加します。
Input()メソッド側では、ViewModelをインスタンス化する必要はありません。
そのままInputビューを呼び出します。

入力用ビューの作成

入力項目を配置するビュー(Input.vbhtml)を作成します。
先頭行の@ModelTypeでHomeViewModelを指定して、HTMLヘルパーのHtml.TextBoxFor()で入力した値を格納します。
テキストボックスには、Html.TextBoxFor()以外にもHtml.TextBox()というメソッドがありますが、渡されたモデルに関連付けたい場合は、Html.XxxYyyFor()のようにForが付いたメソッドを使用します。
また、Formタグを作成するHtml.BeginForm()メソッドは、@Usingブロックと共に使います。
属性の指定の仕方は、「New With {.属性A = xx, .属性B = yy}」のようにします。

このビューでは、スタイルシートを使って、ラベルと入力項目を揃えるようにしています。

プログラムの実行

入力画面が最初に表示されるように、RouteConfig.vbのdefaultsを以下のように変更します。

プログラムを実行すると、最初に入力画面が表示されます。

vbmvc7-1
初期画面

入力項目に、適当な値を入力して、「送信」ボタンを押下します。

vbmvc7-2
値入力

入力された値が、画面に表示されます。

vbmvc7-3
実行結果

-PROGRAM, VISUALBASIC
-, , ,