jquery ajaxでASP.NET MVC検証を使用しますか?


119

私はこのような単純な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;" })

フォームに送信すると、このテキストボックスが検証に配置され、最初にクライアントで実行され、次にservice(ModelState.IsValid)で実行されます。

今、私はいくつかの質問をしました:

  1. 代わりにjQuery ajax submitで使用できますか?私がしていることは、単にフォームを削除し、送信ボタンをクリックすると、JavaScriptがデータを収集してを実行すること$.ajaxです。

  2. サーバー側はModelState.IsValid機能しますか?

  3. 検証の問題をクライアントに転送し、ビルド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コードが大好きです。(いいえ、それは私の答えではありませんでした。)stackoverflow.com/questions/28987752/...
アドベンチャー

回答:


155

クライアント側

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)

注:これらはフォーム要素内で定義する必要があります

次に、次のライブラリを含める必要があります。

<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>

これでクライアント側の検証を設定できるはずです

資源

サーバ側

注:これは、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呼び出しのエラー処理コールバックに返されます

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


1
特に素晴らしいValidateAjaxAttributeを使用すると、すばらしい回答になります。ありがとうございました!
ルネ

3
なぜこの回答が非常に多くの票を獲得したのか理解できません。それは質問1に答えません:$ .ajaxで投稿するときにクライアント検証を行う方法?@Shyjuの回答がそれを助けると思います。
バレンティン

2
@Valentin-データはサーバー側でも検証されるため、私の答えは役に立ちます。検証プラグインは、フォームへの入力時に動的検証を有効にする必要があり、フォームが送信されると(ただし、OPがそれを実行したい場合)、サーバーは最終検証を提供します。
アンドリューバージェス

8
私は返されるエラーをループして、正しいスパンにエラーメッセージを挿入することによって、jQueryの検証メッセージのスパンを利用:for (var i = 0; i < modelStateErrors.length; i++) { $('span[data-valmsg-for="' + modelStateErrors[i].key + '"]').text(modelStateErrors[i].errors[0]); }
イアン・

7
この答えは素晴らしいです!しかし、私はASP.NET MVCフレームワークが組み込みの方法でそれを行う必要があるとまだ思います。
Zignd、2015年

40

あなたがすべきことは、フォームデータをシリアル化し、それをコントローラーアクションに送ることです。ASP.NET MVCはEditPostViewModel、MVCモデルバインディング機能を使用して、フォームデータをオブジェクト(アクションメソッドパラメーター)にバインドします。

クライアント側でフォームを検証し、問題がなければ、データをサーバーに送信します。このvalid()方法は便利です。

$(function () {

    $("#yourSubmitButtonID").click(function (e) {

        e.preventDefault();
        var _this = $(this);
        var _form = _this.closest("form");

        var isvalid = _form .valid();  // Tells whether the form is valid

        if (isvalid)
        {           
           $.post(_form.attr("action"), _form.serialize(), function (data) {
              //check the result and do whatever you want
           })
        }

    });

});

1
ありがとう!私はこれを$( "form#" + formId).validate()しようとしましたが、フォーム(見つかった)にはvalidate()がないと言っていますか?
アイビー

検証スクリプトがWebページに含まれていることを示すEdit1を参照してください。また、通常の入力タイプの送信ボタンを使用すると、検証が実行されていることもわかります。
アイビー

問題が見つかりました(マスターページからScripts.Renderを削除しました)。しかし、ModelState検証エラーをクライアントに送り返すのにまだ問題がありますか?どのように私はそれに感謝するのですか?たとえば、ユーザーはもうLOGGEDINでない場合(ModelState.AddModelError(「CustomError」、「検証テキスト」)。
アイビー

1
ページにjquery.validateとjquery.validate.unobtrusive jsファイルを含める必要があります。HTML入力には、検証プラグインが検索する属性がありますか?
Shyju

1
Ivy:戻り値の型(ActionResult)はJsonResultの基本クラスです。JSONデータを返すことができます。あなたがすべきことは、それがajax呼び出しの場合(Request.IsAjaxをチェック)、検証エラーを取得し、JSONを作成してクライアントに送り返すことです。$ .postのコールバックメソッドでjsonを確認し、エラーメッセージを表示します。
Shyju 2012

9

これはかなり単純な解決策です:

コントローラーでは、次のようなエラーを返します。

if (!ModelState.IsValid)
        {
            return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
        }

次にクライアントスクリプトの一部を示します。

function displayValidationErrors(errors)
{
    var $ul = $('div.validation-summary-valid.text-danger > ul');

    $ul.empty();
    $.each(errors, function (idx, errorMessage) {
        $ul.append('<li>' + errorMessage + '</li>');
    });
}

これがajaxを介して処理する方法です。

$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
        var isSuccessful = (data['success']);

        if (isSuccessful) {
            $('#partial-container-steps').html(data['view']);
            initializePage();
        }
        else {
            var errors = data['errors'];

            displayValidationErrors(errors);
        }
    }
});

また、私はajaxを介して次の方法で部分ビューをレンダリングします。

var view = this.RenderRazorViewToString(partialUrl, viewModel);
        return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);

RenderRazorViewToStringメソッド:

public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
                                                                     viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View,
                                         ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

3
「GetModelStateErrors」は、次のように簡単な1行のステートメントに変換することで完全に簡略化できます
Camilo Terevinto 2016

1
単純にa PartialViewを返してAjaxにレンダリングしないのはなぜですか?
シンジャイ2017

4

@Andrew Burgessが提供するソリューションにロジックを追加しました。ここに完全なソリューションがあります:

ajaxリクエストのエラーを取得するアクションフィルターを作成しました。

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;
            }
        }
    }

フィルターをコントローラーメソッドに追加しました。

[HttpPost]
// this line is important
[ValidateAjax]
public ActionResult AddUpdateData(MyModel model)
{
    return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet);
}

jquery検証用の共通スクリプトを追加しました:

function onAjaxFormError(data) {
    var form = this;
    var errorResponse = data.responseJSON;
    $.each(errorResponse, function (index, value) {
        // Element highlight
        var element = $(form).find('#' + value.key);
        element = element[0];
        highLightError(element, 'input-validation-error');

        // Error message
        var validationMessageElement = $('span[data-valmsg-for="' + value.key + '"]');
        validationMessageElement.removeClass('field-validation-valid');
        validationMessageElement.addClass('field-validation-error');
        validationMessageElement.text(value.errors[0]);
    });
}

$.validator.setDefaults({
            ignore: [],
            highlight: highLightError,
            unhighlight: unhighlightError
        });

var highLightError = function(element, errorClass) {
    element = $(element);
    element.addClass(errorClass);
}

var unhighLightError = function(element, errorClass) {
    element = $(element);
    element.removeClass(errorClass);
}

最後に、エラーjavascriptメソッドを私のAjax Beginフォームに追加しました。

@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}

1

あなたはこの方法でそれを行うことができます:

編集:での応答jsonを待っていることを考慮してくださいdataType: 'json'

。ネット

public JsonResult Edit(EditPostViewModel data)
{
    if(ModelState.IsValid) 
    {
       // Save  
       return Json(new { Ok = true } );
    }

    return Json(new { Ok = false } );
}

JS:

success: function (data) {
    if (data.Ok) {
      alert('success');
    }
    else {
      alert('problem');
    }
},

必要に応じて、エラー500を返すことでその方法を説明し、イベントエラー(ajax)でエラーを取得することもできます。しかし、あなたの場合、これはオプションかもしれません


1
私は通常のJasonリクエストの実行方法を知っていますが、これは異なるプロパティの検証に役立ちませんし、要求した組み込みのASP.NET MVC検証を使用することすらできません。複雑なJasonオブジェクトを作成して、すべてのプロパティの検証エラーを説明することもできますが、これは多くの作業になるため、ASP.NET MVC検証の組み込み機能を再利用できることを期待していますか?
アイビー

1-関数「SendPost」を実行する方法は?、および2-クライアントで有効なデータは?
andres descalzo

説明してください 最後の投稿を取得しませんか?
アイビー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.