質問

ASP.NET MVCで、次のような簡単なアクションがあります。

public ActionResult Edit(EditPostViewModel data)
{

}

は EditPostViewModel には、このようなバリデーション属性があります。

[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }

ビューでは、以下のヘルパーを使用しています。

 @Html.LabelFor(Model => Model.EditPostViewModel.Title, true)

 @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                        new { @class = "tb1", @Style = "width:400px;" })

このテキストボックスが置かれたフォームで送信を行うと、まずクライアントで、次にサービスでバリデーションが行われます( ModelState.IsValid ).

さて、いくつか質問をさせてください。

1. これは、代わりにjQuery ajax submitで使用することができますか？私がやっていることは、単にフォームを削除し、送信ボタンをクリックすると、javascriptがデータを収集し、その後 $.ajax .

2. サーバーサイドは ModelState.IsValid は動作するのでしょうか？

3. どのようにしたら、検証の問題をクライアントに転送し、あたかもビルドインテット検証(build int validation)を使っているかのように見せることができますか？ @Html.ValidationSummary(true) )?

Ajaxの呼び出しの例です。

function SendPost(actionPath) {
    $.ajax({
        url: actionPath,
        type: 'POST',
        dataType: 'json',
        data:
        {
            Text: $('#EditPostViewModel_Text').val(),
            Title: $('#EditPostViewModel_Title').val() 
        },
        success: function (data) {
            alert('success');
        },
        error: function () {
            alert('error');
        }
    });
}

1を編集します。

ページに含まれる :

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

どのように解決するのですか？

クライアント側

クライアント側で jQuery.validate ライブラリを使用することは、非常に簡単なはずです。

で以下の設定をします。 Web.config ファイルに記述します。

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

ビューを構築する場合、このように定義することになります。

@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                                new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)

note: これらはフォーム要素の中で定義される必要があります

次に、以下のライブラリをインクルードする必要があります。

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

これでクライアントサイドの検証を設定することができるはずです。

リソース

• http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx

サーバーサイド

注意 これは、サーバーサイドで jQuery.validation ライブラリ

おそらくこのようなものが役に立つでしょう。

[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
    //Save data
    return Json(new { Success = true } );
}

ここで ValidateAjax は、次のように定義される属性です。

public class ValidateAjaxAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!filterContext.HttpContext.Request.IsAjaxRequest())
            return;

        var modelState = filterContext.Controller.ViewData.ModelState;
        if (!modelState.IsValid)
        {
            var errorModel = 
                    from x in modelState.Keys
                    where modelState[x].Errors.Count > 0
                    select new
                           {
                               key = x,
                               errors = modelState[x].Errors.
                                                      Select(y => y.ErrorMessage).
                                                      ToArray()
                           };
            filterContext.Result = new JsonResult()
                                       {
                                           Data = errorModel
                                       };
            filterContext.HttpContext.Response.StatusCode = 
                                                  (int) HttpStatusCode.BadRequest;
        }
    }
}

これは、すべてのモデルエラーを指定したJSONオブジェクトを返すものです。

レスポンスの例は以下の通りです。

[{
    "key":"Name",
    "errors":["The Name field is required."]
},
{
    "key":"Description",
    "errors":["The Description field is required."]
}]

のエラーハンドリングコールバックに返されます。 $.ajax コール

返されたデータをループして、返された Keys に基づいて必要に応じてエラーメッセージを設定することができます (次のようなものだと思います。 $('input[name="' + err.key + '"]') のようなものが入力要素を見つけると思います。