Bunun gibi basit ASP.NET MVC eylemim var:

public ActionResult Edit(EditPostViewModel data)
{

}

Aşağıdaki EditPostViewModelgibi doğrulama özniteliklerine sahiptir:

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

Görünümde aşağıdaki yardımcıları kullanıyorum:

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

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

Bir formda bu metin kutusunun bir doğrulamaya yerleştirildiğine dair bir gönderim yaparsam, önce istemcide ve sonra hizmette ( ModelState.IsValid) yapılır.

Şimdi birkaç sorum var:

1. Bunun yerine jQuery ajax gönderimi ile kullanılabilir mi? Yaptığım şey basitçe formu kaldırmak ve gönder düğmesine tıkladığınızda bir javascript verileri toplayacak ve ardından $.ajax.

2. Sunucu tarafı ModelState.IsValidçalışacak mı?

3. Doğrulama problemini istemciye nasıl iletebilirim ve bunu build int validation ( @Html.ValidationSummary(true)) kullanıyormuş gibi sunabilirim ?

Ajax çağrısı örneği:

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

Düzenleme 1:

Sayfaya dahil:

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

İstemci Tarafı

jQuery.validateKütüphaneyi kullanmak, kurmak oldukça basit olmalıdır.

Web.configDosyanızda aşağıdaki ayarları belirtin :

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

Görüşünüzü oluşturduğunuzda, aşağıdaki gibi şeyleri tanımlarsınız:

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

NOT: Bunların bir form öğesi içinde tanımlanması gerekir

O zaman aşağıdaki kitaplıkları eklemeniz gerekir:

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

Bu sizi istemci tarafı doğrulama için ayarlayabilmelidir

kaynaklar

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

Sunucu Tarafı

NOT: Bu yalnızca jQuery.validationkitaplığın üstünde ek sunucu tarafı doğrulama içindir.

Belki bunun gibi bir şey yardımcı olabilir:

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

ValidateAjaxBir öznitelik nerede tanımlanır:

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

Bunun yaptığı şey, tüm model hatalarınızı belirten bir JSON nesnesi döndürmektir.

Örnek yanıt şöyle olacaktır:

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

Bu, $.ajaxaramanın hata işleme geri aramasına döndürülür.

Döndürülen Anahtarlara göre hata mesajlarını gerektiği gibi ayarlamak için döndürülen veriler arasında döngü yapabilirsiniz (sanırım $('input[name="' + err.key + '"]')giriş öğenizi

Yapmanız gereken, form verilerinizi seri hale getirmek ve denetleyici eylemine göndermektir. ASP.NET MVC, EditPostViewModelMVC model bağlama özelliğini kullanarak form verilerini nesneye (eylem yöntemi parametreniz) bağlar.

Formunuzu istemci tarafında doğrulayabilir ve her şey yolundaysa verileri sunucuya gönderebilirsiniz. valid()Yöntem kullanışlı olacaktır.

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

    });

});

İşte oldukça basit bir çözüm:

Denetleyicide hataları şöyle döndürüyoruz:

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

İstemci komut dosyasından bazıları:

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 aracılığıyla bu şekilde başa çıkıyoruz:

$.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);
        }
    }
});

Ayrıca, kısmi görünümleri ajax aracılığıyla şu şekilde işliyorum:

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

RenderRazorViewToString yöntemi:

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 tarafından sağlanan çözüme biraz daha mantık eklendi. İşte tam çözüm:

Ajax isteği için hataları almak için bir eylem filtresi oluşturuldu:

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

Filtreyi denetleyici yöntemime şu şekilde ekledim:

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

Jquery doğrulaması için ortak bir komut dosyası eklendi:

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

Son olarak, Ajax Begin formuma hata javascript yöntemini ekledim:

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

Bunu şu şekilde yapabilirsiniz:

( Düzenleme: Eğer bir yanıt bekliyoruz düşünüldüğünde jsonile dataType: 'json')

.AĞ

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');
    }
},

İhtiyacınız olursa, 500 hatası döndürerek nasıl yapılacağını da açıklayabilir ve olay hatası (ajax) içindeki hatayı alabilirim. Ama senin durumunda bu bir seçenek olabilir