連載:ASP.NET MVC入門【バージョン3対応】

第5回 新しいビュー・エンジン「Razor」の基本を理解しよう

山田 祥寛(http://www.wings.msn.to/
2011/07/25
Page1 Page2 Page3 Page4

ビュー開発を効率化する「ビュー・ヘルパー」

 ビュー・ヘルパーとは、ビュー・スクリプトを記述する際に役立つメソッドのこと。ASP.NET MVCでは、サーバ・コントロールを利用できない代わりに、ビュー・ヘルパーを利用することで、リンクやフォーム要素の生成などをごくシンプルなコードで表現できる。

 以下では、その中でも最もよく利用すると思われるフォーム、リンク系ヘルパーをまとめておく。そのほか、検証系のヘルパーについては前回の記事を参照いただきたい。また、フォーム系ヘルパーの中でもDisplayFor/EditorForメソッドについては、次回あらためて解説の予定である。

■フォームを生成する − Html.BeginFormメソッド −

 BeginFormメソッドは、using命令と合わせて宣言することで、usingブロックの開始時に<form>開始タグを、ブロックの終了時に</form>終了タグを、それぞれ出力する。引数を省略した場合、<form>タグのaction属性には現在のアクションがそのままセットされる。

 引数を省略した例はこれまでの回でも何度も登場しているので、以下ではもろもろの引数を指定した場合の例を見てみよう。

@using (Html.BeginForm(
  "Edit", // アクション名
  "Books", // コントローラ名
  new { id = "978-4-7981-2344-8", flag = "1" }, // ルート・パラメータ
  FormMethod.Post, // HTTPメソッド(method属性)
  new { enctype = "multipart/form-data"} // そのほかの属性
)) {
  ……フォームの内容……
}
@Using Html.BeginForm(
  "Edit", ' アクション名
  "Books", ' コントローラ名
  New With {.id = "978-4-7981-2344-8", .flag = "1"}, ' ルート・パラメータ
  FormMethod.Post, ' HTTPメソッド(method属性)
  New With {.enctype = "multipart/form-data"} ' そのほかの属性
)
  ……フォームの内容……
End Using
リスト22 BeginFormメソッドによるフォームの生成(上:C#、下:VB)

<form action="/Books/Edit/978-4-7981-2344-8?flag=1"
  enctype="multipart/form-data" method="post">〜</form>
リスト23 実行時にリスト22により出力されるHTMLコード

 ルート定義に含まれないパラメータを指定した場合、そのパラメータはクエリ情報として追加される点にも注意してほしい。

■ルート定義に基づいてフォームを生成する − Html.BeginRouteFormメソッド −

 BeginRouteFormメソッドは、BeginFormメソッドと同じく、<form>タグを生成するためのメソッドであるが、ポスト先を(文字列ではなく)ルート・パラメータを表す匿名型として指定できる点が異なる。

 以下は、リスト22のコードをBeginRouteFormメソッドで書き換えたものだ。

@using (Html.BeginRouteForm(
  "Default", // ルート名
  new {
    action = "Edit", // アクション名
    controller = "Books", // コントローラ名
    id = "978-4-7981-2344-8",
    flag = "1" // そのほかのパラメータ
  }, // ルート・パラメータ
  FormMethod.Post, // HTTPメソッド(method属性)
  new { enctype = "multipart/form-data"} // そのほかの属性
)) {
  ……フォームの内容……
}
@Using Html.BeginRouteForm(
  "Default", ' ルート名
  New With {
    .action = "Edit", ' アクション名
    .controller = "Books", ' コントローラ名
    .id = "978-4-7981-2344-8",
    .flag = "1" ' そのほかのパラメータ
  }, ' ルート・パラメータ
  FormMethod.Post, ' HTTPメソッド(method属性)
  New With {.enctype = "multipart/form-data"} ' そのほかの属性
)
  ……フォームの内容……
End Using
リスト24 BeginRouteFormメソッドによるフォームの生成(上:C#、下:VB)

■ラベルを生成する − Html.LabelForメソッド −

 LabelForは、指定されたプロパティの表示名(DisplayName属性)や言語設定に応じて<label>タグを生成するためのメソッドだ。関連付けるプロパティは、「model => model.プロパティ名」のようにラムダ式として指定できる(これは、以降で紹介している「〜For」メソッドについて、すべて同様)。

@Html.LabelFor(model => model.Isbn)
@Html.LabelFor(Function(model) model.Isbn)
リスト25 LabelForメソッドによるラベルの生成(上:C#、下:VB)

<label for="Isbn">ISBNコード</label>
リスト26 実行時にリスト25により出力されるHTMLコード

■テキストボックス/テキストエリアを生成する − Html.TextBoxFor/PasswordFor/TextAreaForメソッド −

 TextBoxFor/PasswordFor/TextAreaForメソッドは、それぞれ一般的なテキストボックス、パスワード入力ボックス、複数行テキストエリアを生成するためのメソッドだ。テキストボックス/テキストエリアには、プロパティの現在値が反映される。

テキストボックス:
@Html.TextBoxFor(
  model => model.Title, // プロパティ
  new { size = 15, maxlength = 18 } // そのほかの属性
)

パスワード入力ボックス:
@Html.PasswordFor(
  model => model.Password, // プロパティ
  new { size = 10, maxlength = 20 } // そのほかの属性
)

テキストエリア:
@Html.TextAreaFor(
  model => model.Title, // プロパティ
  10, // 行数
  70, // 桁数
  new { @class = "area" } //そのほかの属性
)
テキストボックス:
@Html.TextBoxFor(
  Function(model) model.Title, ' プロパティ
  New With {.size = 15, .maxlength = 18} ' そのほかの属性
)

パスワード入力ボックス:
@Html.PasswordFor(
  Function(model) model.Password, ' プロパティ
  New With {.size = 10, .maxlength = 20} ' そのほかの属性
)

テキストエリア:
@Html.TextAreaFor(
  Function(model) model.Title, ' プロパティ
  10, ' 行数
  70, ' 桁数
  New With { .class = "area" } ' そのほかの属性
)
リスト27 TextBoxFor/PasswordFor/TextAreaForメソッドによるテキストボックスの生成(上:C#、下:VB)

テキストボックス:
<input id="Title" maxlength="18" name="Title"
  size="15" type="text" value="JavaScript本格入門" />

パスワード入力ボックス:
<input id="Password" maxlength="20" name="Password"
  size="10" type="password" />

テキストエリア:
<textarea class="area" cols="70" id="Title" name="Title" rows="10">
JavaScript本格入門</textarea>
リスト28 実行時にリスト27により出力されるHTMLコード

 エンティティ側で検証属性が定義されている場合には、検証パラメータを表すdata-xxxxx属性も合わせて出力される。本稿では、TextBoxFor/PasswordFor/TextAreaForメソッドがまずデフォルトで出力するコードを分かりやすくするため、これらの属性は割愛しているので注意されたい。

[注意]readonly属性、class属性などに要注意(C#の場合)

 そのほかの属性としてclass、readonlyのような属性を指定する場合には要注意だ。というのも、これらのキーワードはC#の予約語であるため、そのまま指定してしまうと、エラーとなってしまうのだ。

 このような属性を指定する場合は、キーワードをキーワードとして見なさないようにするため、プロパティ名の先頭に「@」を付与しなければならない(リスト27の太字部分)。



 INDEX
  ASP.NET MVC入門【バージョン3対応】
  第5回 新しいビュー・エンジン「Razor」の基本を理解しよう
    1.ASPXとの比較で理解するRazor文法(1)
    2.ASPXとの比較で理解するRazor文法(2)
  3.ビュー開発を効率化する「ビュー・ヘルパー」(1)
    4.ビュー開発を効率化する「ビュー・ヘルパー」(2)
 
インデックス・ページヘ  「ASP.NET MVC入門【バージョン3対応】」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH