HtmlHelperクラス
ASP.NET MVCでは、ViewPageを作る際に反復処理か、MVCに関する知識が求められます。また、サーバーコントロールも利用できないので、少しでもHTMLを簡単に書くために、HtmlHelper
クラスが用意されています。ViewPage上で利用可能なので積極的に利用してください。以下にHtmlHelper
クラスの主要メソッドを記述します。
メソッド | 概要 |
ActionLink | 指定されたActionへのハイパーリンクを生成 |
CheckBox | チェックボックスを生成 |
DropDownList | ドロップダウンリストを生成 |
Encode | エンコードされた文字列を生成 |
Hidden | hidden要素を生成 |
ListBox | リストボックスを生成 |
Password | パスワードテキストボックスを生成 |
RadioButton | ラジオボタンを生成 |
RenderPartial | 指定したユーザーコントロールを表示 |
RouteLink | 異なるルートへのハイパーリンクを生成 |
TextArea | テキストエリア要素を生成 |
TextBox | テキストボックスを生成 |
ValidationMessage | 検証メッセージを表示 |
ValidationSummary | 検証結果の要約を表示 |
それぞれパラメタを指定するだけで、HTMLタグを生成するので積極的に活用しましょう。以下の例は、ViewPage上でデータを表示するためのコードを記述します(Encode
メソッドを使用)。
<h2>Data</h2> <ul> <% foreach (var item in Model) { %> <li> <%= Html.Encode(item.pub_id) %> </li> <% } %> </ul>
上記のコードは、Modelに値が入っている場合、その数だけpub_nameを列挙表示するというものです。実際の出力結果は以下のソースです。
<h2>Data</h2> <ul> <li> 0736 </li> <li> 0877 </li> <中略> </ul>
ただ、文字列を生成するメソッドでも、foreachと組み合わせることで恩恵は大きくなります。foreachステートメントはASP.NET MVCでは多用することになるので、この雰囲気はしっかりと掴みましょう。
続いて、ActionLink
メソッドのサンプルです。
<p> <%= Html.ActionLink("Publishersテーブルの一覧ページ", "Index", "Pubs")%> </p>
上記のコードでは、第一パラメタに表示されるテキストを、第二パラメタにActionメソッドを、第三パラメタにControllerクラスを指定しています。これにより、どのControllerクラスのどのActionメソッドを使うかが指定されるわけです。なお、第三パラメタは現在のController内のActionメソッドを使用する場合は省略可能です。
実際の出力結果は以下のソースです。
<p> <a href="/Pubs">Publishersテーブル</a> </p>
本来は、href="/Pubs/Index"となるべきです。今回は、ルーティングルールで、既定のActionメソッドにIndex指定を行っているため、Indexが省略されています。
実開発時には検証機能も多用するでしょう。検証機能は、ValidationMessage
・ValidationSummary
メソッドを使います。このメソッドはView側では帰結しません。Controller側でも処理を記述する必要があります。
<%= Html.ValidationSummary("新規作成に失敗しました。エラーメッセージに沿って修正してください。") %> <中略> <p> <label for="pub_id">pub_id:</label> <%= Html.TextBox("pub_id") %> <%= Html.ValidationMessage("pub_id", "*") %> </p>
上記のコードでは、ValidationSummary
メソッド内に、検証エラーが発生した時のサマリメッセージを入力します。既定で、ValidationSummary
メソッドは検証エラーのメッセージを列挙します。、ValidationMessage
メソッドは、検証対象の項目(ここではTextBox
メソッド)を第一パラメタ設定します。第二パラメタはオプションで、指定しなければ、Controller側で指定したメッセージが表示されます。指定するとそのテキストが表示されます。つまり、ここで検証エラーが発生した場合はpub_idテキストボックスの横に*と表示されます。
続いて、Controllerクラス側の設定です。
public ActionResult Create(publishers Pub) { // 文字列が空かどうか入力チェック if(Pub.pub_id.Trim().Length==0) ModelState.AddModelError("pub_id", "pub_idは必須項目です。"); if(!ModelState.IsValid) return View(); <Create処理>
Create
メソッドのパラメタにModelを設定し、pub_idテキストボックスに入力された値をTrim
メソッドで空白を削除した時の文字数が0(null)ならば、ModelStateはDictionary型で、フォームに対する検証情報を格納します。AddModelError
メソッドの第一パラメタにキーとして、検証対象の項目を設定し、第二パラメタに検証結果メッセージを設定します。
その後、IsValid
メソッドで、検証メッセージが格納されているかチェックを行い、検証メッセージがあれば、元のViewにルーティングするというような流れになります。
実際の出力結果は以下のソースです。
<span class="validation-summary-errors">新規作成に失敗しました。エラーメッセージに沿って修正してください。</span> <ul class="validation-summary-errors"> <li>pub_idは必須項目です。</li> </ul> <中略> <p> <label for="pub_id">pub_id:</label> <input class="input-validation-error" id="pub_id" name="pub_id" type="text" value="" /> <span class="field-validation-error">*</span> </p>
検証部分は次回も解説します。