テンプレートヘルパー

テンプレートヘルパー


【テンプレートヘルパー】

DisplayForやEditorForなどモデル定義に応じて出力を自在に変えられるヘルパー。
・DisplayFor:データの表示
・EditorFor:データ編集項目の生成
例えば、EditorForではプロパティの型がstringならテキストボックス、boolならチェックボックスを
それぞれ出力する。
色々メリットがあるのでTextBoxFOrやCheckBoxForよりもテンプレートヘルパーを使用したほうがいい。

以下はテンプレートの標準的な動作を確認するための例
・モデル1(Bank):銀行 (1)—(n) モデル2(Branch):支店
 
[モデル1(Bank.vb)]

[モデル2(Branch.vb)]

テンプレートヘルパーに関係する属性

・DataType:追加的な型情報
・DisplayName:表示名
・DisplayFormat:表示の書式
・DisplayColumn:外部キーで関連づいた参照先テーブルの表示項目
 
Scaffolding機能により自動作成する
arrow_down
[出力結果(詳細画面)]
・Urlがハイパーリンクで表示される。
・UpdDateプロパティが指定した日付フォーマットで表示される。
・Booleanの項目がチェックボックスで表示される。
・支店(Branchsプロパティ)には、BranchエンティティのDisplayColumn属性で指定したName
 プロパティの列挙として表示される。
24
[出力結果(編集画面)]
・Categoryプロパティがコンボボックスとして表示される。
・Descriptionプロパティがテキストエリアとして表示される。
25
 

【テンプレートのカスタマイズ】

標準のテンプレートだけではなく、独自のテンプレートも作成できる。
例)DateTime型のプロパティに対してEditForメソッドでポップアップカレンダー付きのテキストボックス
  を出力する方法について以下の通り

①jQuery UIライブラリをインポート

・以下のjQuery UIのサイトからThemeRollerでGalleryを選択してテーマを決めてjQuery UI
のライブラリをダウンロードする。
http://jqueryui.com/themeroller/
26
・解凍して出来たjquery-ui-1.11.4.customをScriptsフォルダに格納
・datepickerの日本語化と、指定したクラスの要素に対してdatepickerを設定するコードを作成して
 jsファイル(jQcustom.js)に保存

・BundleConfig.vbに、jQuery UIのjsとcssおよび作成したjQcustom.jsのパスを設定

・jQuery UIのjsについては、jQueryのjsの後に読み込まれるように設定(逆だとjQuery UIが効かなくなる)

②EditForメソッドのカスタマイズテンプレートの作成

EditorForメソッドのテンプレートを以下のパスに作成します。
~/Views/Shared/EditorTemplates/DateTime.vbhtml

※@ModelTypeで宣言している型はエンティティではなく、プロパティ。DateTime?の?はnull許容型。
 (テンプレートに渡されるモデルはプロパティである。なのでmodel.プロパティではなく直にmodelを使用している)
※classにcalendarを指定することで、jQuery UIのdatepicker()を適用する。
arrow_down
[出力結果]
27
 

【テンプレート決定の優先順位】

テンプレートヘルパーは決められた優先順位によってテンプレートを決定する。
【優先順1位】
 テンプレートヘルパーの第2引数で明示的にテンプレートを指定する。
 以下はUpdDateプロパティに対してテンプレート(CustomCalendar.vbhtml)を紐付ける例
 [ビュー]

【優先順2位】
 UIHint属性によりテンプレートを指定する。
 以下はUpdDateプロパティに対してテンプレート(Calendar.vbhtml)を紐付ける例

【優先順3位】
 DataType属性の型のテンプレート
 以下はUpdDateプロパティに対してテンプレート(Date.vbhtml)が紐付く

【優先順4位】
 プロパティの型のテンプレート
 以下はUpdDateプロパティに対してテンプレート(DateTime.vbhtml)が紐付く