ASP.NET MVC 3 - Remote Validation(1)

ASP.NET MVC 3 になり、クライアントサイドでのバリデーションが
デフォルトでサポートされるようになりました。

いままではクライアント側(つまりViewの.aspx内で)で明示的に
EnableClientValidation()ヘルパーメソッドを呼び出していたのですが
MVC 3 ではその必要が無くなりました。

実装方法については、プロジェクトを作ると自動生成されるテンプレートの
[Log On]周りのソースを見るのが分かりやすいと思います。

以下、テンプレートの[My MVC Application]のソースを抜粋したものです。

1.AccountModels.cs

    public class LogOnModel

    {

        [Required]

        [Display(Name = "User name")]

        public string UserName { get; set; }
        [Required]

        [DataType(DataType.Password)]

        [Display(Name = "Password")]

        public string Password { get; set; }
        [Display(Name = "Remember me?")]

        public bool RememberMe { get; set; }

    }

Log On 時に、画面にて入力する項目を格納するModelです。
[Required]などの検証属性が、プロパティ毎に定義されています。
これらについての検証が、クライアントサイドで実行されます。

2.Web.config

  <appSettings>

    <add key="ClientValidationEnabled" value="true"/> 

    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

  </appSettings>

Client-Side Validation を有効にするためには、上の2つの値をtrueにする必要があります。
ClientValidationEnabled は、Client-Side Validationそのものを有効にするかどうか、
UnobtrusiveJavaScriptEnabledは、unobtrusive JavaScript を有効にするかを定義しています。

3.LogOn.cshtml

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 

type="text/javascript"></script>

4._Layout.cshtml

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

3.4.で必要なJavaScriptファイルをインクルードしています。
この例ではバリデーションを実装するLogOn.cshtmlでJavaScriptをインクルードしていますが
共通画面の_Layout.cshtmlで全てインクルードするようにした方がイイかもしれません。

5.AccountController.cs

[HttpPost]

public ActionResult LogOn(LogOnModel model, string returnUrl)

{

    if (ModelState.IsValid)

    {

        if (MembershipService.ValidateUser(model.UserName, model.Password))

        {

            FormsService.SignIn(model.UserName, model.RememberMe);

            if (Url.IsLocalUrl(returnUrl))

            {

                return Redirect(returnUrl);

            }

            else

            {

                return RedirectToAction("Index", "Home");

            }

        }

        else

        {

            ModelState.AddModelError("", "The user name or password provided is incorrect.");

        }

    }
    // If we got this far, something failed, redisplay form

    return View(model);

}

ModelState.IsValid でModelの検証属性による結果を判定しています。
ただしクライアントサイドでのバリデーションにてエラーが取得された場合、
Controllerは呼び出されません。クライアント側のみでエラーメッセージを表示します。

つづいてMembershipService.ValidateUser を呼び出し、詳細な入力チェックを行っています。
ValidateUserでは、UserName、PassWordがnullの場合はエラーをthrowしています。

2011/3/19
タイトルを「Client-Side Validation」から「Remote Validation」に変更しました。