다음과 같은 간단한 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 제출과 함께 사용할 수 있습니까? 내가하는 일은 단순히 양식을 제거하고 제출 버튼을 클릭하면 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)

참고 : 양식 요소 내에서 정의해야합니다.

그런 다음 다음 라이브러리를 포함해야합니다.

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

반환 된 데이터를 반복하여 반환 된 키를 기반으로 필요에 따라 오류 메시지를 설정할 $('input[name="' + err.key + '"]')수 있습니다 (입력 요소를 찾을 수 있다고 생각합니다)

해야 할 일은 양식 데이터를 직렬화하여 컨트롤러 작업으로 보내는 것입니다. ASP.NET MVC는 EditPostViewModelMVC 모델 바인딩 기능을 사용하여 폼 데이터를 개체 (액션 메서드 매개 변수)에 바인딩합니다.

클라이언트 측에서 양식의 유효성을 검사하고 모든 것이 정상이면 데이터를 서버로 보낼 수 있습니다. 이 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
           })
        }

    });

});

다음은 다소 간단한 해결책입니다.

컨트롤러에서 다음과 같은 오류를 반환합니다.

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

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

마지막으로 Ajax Begin 양식에 오류 javascript 메소드를 추가했습니다.

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

다음과 같이 할 수 있습니다.

( 편집 : 당신이 응답 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)에서 오류를 가져 오는 방법을 설명 할 수도 있습니다. 그러나 귀하의 경우 이것은 옵션 일 수 있습니다