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

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

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

■チェックボックス/ラジオボタンを生成する − Html.CheckBoxFor/RadioButtonForメソッド −

 CheckBoxFor/RadioButtonForは、指定されたプロパティに対応するチェックボックス/ラジオボタンを生成するためのメソッドだ。checked属性の値は、プロパティ値とvalue属性の値との比較によって決定される。

チェックボックス:
@Html.CheckBoxFor(
  model => model.Cd, // プロパティ
  new { tabindex = 3 } // そのほかの属性
)

ラジオボタン:
@Html.RadioButtonFor(
  model => model.Publish, // プロパティ
  "翔泳社", // 値(value属性)
  new { tabindex = 3 } // そのほかの属性
)

@Html.RadioButtonFor(
  model => model.Publish, // プロパティ
  "技術評論社", // 値(value属性)
  new { tabindex = 3 } そのほかの属性
)
チェックボックス:
@Html.CheckBoxFor(
  Function(model) model.Cd, ' プロパティ
  New With {.tabindex = 3} ' そのほかの属性
)

ラジオボタン:
@Html.RadioButtonFor(
  Function(model) model.Publish, ' プロパティ
  "翔泳社", ' 値(value属性)
  New With {.tabindex = 3} ' そのほかの属性
)

@Html.RadioButtonFor(
  Function(model) model.Publish, ' プロパティ
  "技術評論社", ' 値(value属性)
  New With {.tabindex = 3} ' そのほかの属性
)
リスト29 CheckBoxFor/RadioButtonForメソッドによるチェックボックス/ラジオボタンの生成(上:C#、下:VB)

チェックボックス:
<input id="Cd" name="Cd" tabindex="3" type="checkbox" value="true" />
<input name="Cd" type="hidden" value="false" />

ラジオボタン:
<input id="Publish" name="Publish" tabindex="3" type="radio" value="翔泳社" />
<input checked="checked" id="Publish" name="Publish" tabindex="3"
  type="radio" value="技術評論社" />
リスト30 実行時にリスト29により出力されるHTMLコード

 CheckBoxForメソッドでは、本来のチェックボックスと同名の隠しフィールドを出力している点に注目だ。これはチェックボックスがチェックされなかった場合にも、チェックされなかったという情報(具体的にはfalse値)を送信するための方策だ。

 こうした隠しフィールドが存在せず、かつ、チェックボックスが選択されなかった場合、ブラウザはサーバに対して特別に値を送信しない。

■選択ボックス/リストボックスを生成する − Html.DropDownListFor/ListBoxForメソッド −

 DropDownListFor/ListBoxForは、指定されたプロパティに対応する選択ボックス/リストボックスを生成するためのメソッドだ。selected属性の値は、プロパティ値と選択オプションの値(SelectListItemオブジェクトのValueプロパティ)との比較によって決定される。

選択ボックス:
@Html.DropDownListFor(
  model => model.Publish, // プロパティ
  new SelectListItem[] {
    new SelectListItem() { Value="翔泳社", Text="翔泳社" },
    new SelectListItem() { Value="技術評論社", Text="技術評論社" },
    new SelectListItem() { Value="秀和システム", Text="秀和システム" }
  }, // オプション・リスト
  "選択してください", // 空値のオプション(ラベル・テキスト)
  new { @class = "list" } // そのほかの属性
)

リストボックス:
@Html.ListBoxFor(
  model => model.Publish, // プロパティ
  new SelectListItem[] {
    new SelectListItem() { Value="翔泳社", Text="翔泳社" },
    new SelectListItem() { Value="技術評論社", Text="技術評論社" },
    new SelectListItem() { Value="秀和システム", Text="秀和システム" }
  }, // オプション・リスト
  new { size = 5 } // そのほかの属性
)
選択ボックス:
@Html.DropDownListFor(
  Function(model) model.Publish, ' プロパティ
  New SelectListItem() {
    New SelectListItem() With
                {.Value = "翔泳社", .Text = "翔泳社"},
    New SelectListItem() With
                {.Value = "技術評論社", .Text = "技術評論社"},
    New SelectListItem() With
                {.Value = "秀和システム", .Text = "秀和システム"}
  }, ' オプション・リスト
  "選択してください", ' 空値のオプション(ラベル・テキスト)
  New With {.class = "list"} ' そのほかの属性
)

リストボックス:
@Html.ListBoxFor(
  Function(model) model.Publish, ' プロパティ
  New SelectListItem() {
    New SelectListItem() With {.Value = "翔泳社", .Text = "翔泳社"},
    New SelectListItem() With {.Value = "技術評論社", .Text = "技術評論社"},
    New SelectListItem() With {.Value = "秀和システム", .Text = "秀和システム"}
  }, ' オプション・リスト
  New With {.size = 5} ' そのほかの属性
)
リスト31 DropDownListFor/ListBoxForメソッドによる選択ボックス/リストボックスの生成(上:C#、下:VB)

選択ボックス:
<select class="list" id="Publish" name="Publish">
  <option value="">選択してください</option>
  <option value="翔泳社">翔泳社</option>
  <option selected="selected" value="技術評論社">技術評論社</option>
  <option value="秀和システム">秀和システム</option>
</select>

リストボックス:
<select id="Publish" multiple="multiple" name="Publish" size="5">
  <option value="翔泳社">翔泳社</option>
  <option value="技術評論社">技術評論社</option>
  <option value="秀和システム">秀和システム</option>
</select>
リスト32 実行時にリスト31により出力されるHTMLコード

 リスト31では便宜上、オプション・リスト(SelectListItemオブジェクトの配列)をビュー・スクリプトにハード・コーディングしているが、あくまでこれは便宜的なコードである。一般的にはアクション側でビュー変数として用意するのが望ましい。

■隠しフィールドを生成する − HiddenForメソッド −

 HiddenForメソッドは、隠しフィールドを生成するためのメソッドである。

@Html.HiddenFor(
  model => model.Title, // プロパティ
  new { } // そのほかの属性
)
@Html.HiddenFor(
  Function(model) model.Title, ' プロパティ
  Nothing ' そのほかの属性
)
リスト33 HiddenForメソッドによる隠しフィールドの生成(上:C#、下:VB)

<input id="Title" name="Title" type="hidden" value="JavaScript本格入門" />
リスト34 実行時にリスト33により出力されるHTMLコード

■モデルと関連付かないフォーム要素を生成する − TextBox/Labelメソッドなど −

 TextBoxFor、LabelFor、ListBoxForなどのいわゆる「XxxxxFor」メソッドには、「For」なしのTextBox、Label、ListBoxなどのメソッドも用意されている。一般的には、XxxxxForメソッドはモデルに関連付いたフォーム要素を生成するために、Forなしのメソッドはモデルとは連携しないフォーム要素を生成するために、それぞれ利用するものと考えておけばよいだろう*3

*3 厳密には、Forなしのメソッドでもモデル連携のフォーム要素は生成できる。しかし、Visual StudioでIntelliSense機能が利用できない、ViewBagに同名のプロパティがある場合はそちらが優先して関連付けられてしまうなどの理由から、利用すべきでない。

 例えば以下は、keywdという名前のテキストボックスを生成する例である。

@Html.TextBox(
  "keywd", // 要素名
  null, // 値(value属性)
  new { size = 15, maxlength = 19 } // そのほかの属性
)
@Html.TextBox(
  "keywd", ' 要素名
  Nothing, ' 値(value属性)
  New With {.size = 15, .maxlength = 19} ' そのほかの属性
)
リスト35 TextBoxメソッドによるテキストボックスの生成(上:C#、下:VB)

<input id="keywd" maxlength="18" name="keywd" size="15" type="text" value="" />
リスト36 実行時にリスト35により出力されるHTMLコード

 そのほかのForなしメソッドも、「要素名を文字列で指定する」「必要に応じて、値を指定する必要がある」などの違いがあるほかは、ほぼXxxxxForメソッドと同じ要領で利用できる。詳しい構文については、MSDNライブラリで「System.Web.Mvc.Html 名前空間」を参照してほしい。

■ハイパーリンクを生成する − Html.ActionLinkメソッド −

 ActionLinkメソッドは、指定されたコントローラ/アクション名、そのほかのパラメータ値から、ハイパーリンクを生成するためのメソッドだ。

@Html.ActionLink(
  "詳細", // リンク・テキスト
  "Details", // アクション名
  "Books", // コントローラ名
  new { id = Model.Isbn }, // ルート・パラメータ
  new { @class = "menu" } // そのほかの属性
)
@Html.ActionLink(
  "詳細", ' リンク・テキスト
  "Details", ' アクション名
  "Books", ' コントローラ名
  New With {.id = Model.Isbn}, ' ルート・パラメータ
  New With {.class = "menu"} ' そのほかの属性
)
リスト37 ActionLinkメソッドによるハイパーリンクの生成(上:C#、下:VB)

<a class="menu" href="/Books/Details/978-4-7741-4466-5">詳細</a>
リスト38 実行時にリスト37により出力されるHTMLコード

 よく似たメソッドとして、RouteLinkメソッドも用意されている。RouteLinkメソッドがActionLinkメソッドと異なる点は、リンク先を(文字列ではなく)ルート・パラメータを表す匿名オブジェクトとして指定できる点である(ちょうどBeginFormメソッドとBeginRouteFormメソッドとの違いと同じと考えれば、分かりやすいだろう)。

 以下は、リスト37をRouteLinkメソッドで書き換えた例だ。

@Html.RouteLink(
  "詳細", // リンク・テキスト
  "Default", // ルート名
  new {
    action = "Details", // アクション名
    controller = "Books", // コントローラ名
    id = Model.Isbn // そのほかのパラメータ
   }, // ルート・パラメータ
   new { @class = "menu" } // そのほかの属性
)
@Html.RouteLink(
  "詳細", ' リンク・テキスト
  "Default", ' ルート名
  New With {
    .action = "Details", ' アクション名
    .controller = "Books", ' コントローラ名
    .id = Model.Isbn ' そのほかのパラメータ
  }, ' ルート・パラメータ
  New With {.class = "menu"} ' そのほかの属性
)
リスト39 リスト37をRouteLinkメソッドで書き換えたコード

 以上、今回はRazorの基本文法と、ビュー開発には欠かせないビュー・ヘルパーについて解説した。次回は、今回説明しきれなかったビュー・ヘルパーであるEditFor/DisplayForメソッドについて解説する予定である。End of Article

 

 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間