SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ASP.NET MVC 2入門

ASP.NET MVC 2による検証機能

ASP.NET MVC 2入門(中編)


  • X ポスト
  • このエントリーをはてなブックマークに追加

サーバーサイド検証

 サーバーサイドの検証は、MVC 1/xVal同様にIsValidメソッドを使います。ViewPageの追加から見ていきましょう。

 1)ソリューション エクスプローラを展開し、Homeフォルダ上で[追加]-[ビュー]を選択

 2)選択後[ビューの追加]ダイアログが表示されるので、次の表のように設定後、[追加]ボタンをクリック(図3)

Add Viewの設定
項目名 設定内容
ビュー名 Create
厳密に型指定されたビューを作成する チェック
ビューデータクラス CodeZineMVC2.Models.publishers
ビューコンテンツ Create
その他の項目 既定のまま
図3 ビューの追加ダイアログの設定例
図3 ビューの追加ダイアログの設定例

 作成されたビューには特に設定は行いません。

 3)HomeController.csファイルに検証設定を記述

 HomeController.csを展開し、Aboutメソッドの下に次のように設定します。

HomeController.csファイルの記載例
using CodeZineMVC2.Models;

<中略>

// CreateページにGETリクエストされた時
public ActionResult Create()
{
  return View();
}

// CreateページからPostリクエストされた時
[HttpPost]
public ActionResult Create(publishers createPublishers)
{
  // 検証メッセージが格納されているかチェック(無ければTrue)
  if (ModelState.IsValid)
  {
    return RedirectToAction("Index");
  }
  else
  {
    return View(createPublishers);
  }
}

 Createページに初回アクセス時は前項で追加したCreate.aspxページがそのまま表示されます。テキストに入力後、CreateボタンをクリックするとサーバーサイドでDataAnnotationの設定と検証し、適切ではない値が入力されている場合はModelStateコレクションにエラーメッセージが格納されます。エラーがある場合は、CreatePageに入力データ、エラーメッセージと共にCreateページに表示します。エラーがない場合は、Indexページへとルーティングされます。

 お気づきかと思いますが、サーバーサイド検証は一度サーバにアクセスしないと検証が実施されません。ユーザビリティなどを検討するとサーバにアクセスしなくとも検証できる方が理想です。

 それを実現するのがクライアントサイド検証です。

クライアントサイド検証

 クライアントサイドの検証はより簡単です。

  • 3つのJavaScriptファイルをページに追加
  • クライアントサイド検証を実施するHtmlヘルパーメソッドの追記

 では、Createページに対して設定してみましょう。

Create.aspxファイルの記載例
<h2>Create</h2>

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>

<% Html.EnableClientValidation(); %>

 これだけです。Html.EnableClientValidationメソッドはクライアントサイドに配置したJavaScriptファイルを使用して、入力検証を有効にするメソッドです。開発者が検証スクリプトを記載することはありません。クライアントサイド検証を有効化している場合、GETリクエスト時にクライアントサイド検証のスクリプトも同時に送信されます。そのため、サーバーサイドに通信することなく検証が実施できます。

 実際の実行結果は図1のとおりです。

 なお、今回はASP.NET MVC 2プロジェクトが提供しているスクリプトをそのまま使用しましたが、jQuery Validationを使用するにはASP.NET MVC 2 Futuresをダウンロードし、格納されているMicrosoftMvcJQueryValidation.jsを使用します。設定例は次のとおりです。

Create.aspxファイルの記載例
<h2>Create</h2>

<%-- jQueryを使用する場合 --%>
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>" type="text/javascript"></script>

<% Html.EnableClientValidation(); %>

 このようにスクリプトを配置するとjQueryによる検証が実現できます。

次のページ
カスタムの検証属性の作成と検証

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET MVC 2入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5316 2010/08/03 13:24

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング