Use ASP NET MVC validation with jquery ajax

Question

I have simple ASP NET MVC action like this     public ActionResult Edit EditPostViewModel data         The EditPostViewModel have validation attributes like this      Display Name          Description            StringLength 100  MinimumLength   3  ErrorMessage            Required    public string Title   get  set      In the view I am using the following helpers       Html LabelFor Model   gt  Model EditPostViewModel Title  true     Html TextBoxFor Model   gt  Model EditPostViewModel Title                           new    class    tb1    Style    width 400px        If I do a submit on a form that this textbox is placed in a validation will be done first on client and then on service ModelState IsValid    Now I got a couple of questions     Can this be used with jQuery ajax submit instead  What I am doing is simply remove the form and on clicking the submit button a javascript will gather data and then run the   ajax  Will the server side ModelState IsValid work  How can I forward validation problem back to the client and present it as if Im using the build int validation  Html ValidationSummary true      Example of Ajax call     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                          Edit 1    Included on page      lt script src   Scripts jquery-1 7 1 min js  gt  lt  script gt   lt script src   Scripts jquery validate min js  gt  lt  script gt   lt script src   Scripts jquery validate unobtrusive min js  gt  lt  script gt

User · Answer

What you should do is to serialize your form data and send it to the controller action. ASP.NET MVC will bind the form data to the EditPostViewModel object( your action method parameter), using MVC model binding feature.

You can validate your form at client side and if everything is fine, send the data to server. The valid() method will come in handy.

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

    });

});

User · Answer

Client Side  Using the jQuery validate library should be pretty simple to set up   Specify the following settings in your Web config file    lt appSettings gt       lt add key  ClientValidationEnabled  value  true   gt        lt add key  UnobtrusiveJavaScriptEnabled  value  true   gt    lt  appSettings gt    When you build up your view  you would define things like this    Html LabelFor Model   gt  Model EditPostViewModel Title  true   Html TextBoxFor Model   gt  Model EditPostViewModel Title                                   new    class    tb1    Style    width 400px       Html ValidationMessageFor Model   gt  Model EditPostViewModel Title    NOTE  These need to be defined within a form element  Then you would need to include the following libraries    lt script src   Url Content    Scripts jquery validate js    type  text javascript  gt  lt  script gt   lt script src   Url Content    Scripts jquery validate unobtrusive js    type  text javascript  gt  lt  script gt    This should be able to set you up for client side validation  Resources   http   msdn microsoft com en-us vs2010trainingcourse aspnetmvccustomvalidation topic5 aspx   Server Side  NOTE  This is only for additional server side validation on top of jQuery validation library  Perhaps something like this could help    ValidateAjax  public JsonResult Edit EditPostViewModel data          Save data     return Json new   Success   true          Where ValidateAjax is an attribute defined as   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  gt  0                     select new                                                             key   x                                 errors   modelState x  Errors                                                        Select y   gt  y ErrorMessage                                                         ToArray                                             filterContext Result   new JsonResult                                                                                       Data   errorModel                                                       filterContext HttpContext Response StatusCode                                                       int  HttpStatusCode BadRequest                      What this does is return a JSON object specifying all of your model errors   Example response would be          key   Name        errors    The Name field is required              key   Description        errors    The Description field is required         This would be returned to your error handling callback of the   ajax call  You can loop through the returned data to set the error messages as needed based on the Keys returned  I think something like    input name      err key         would find your input element

User · Answer

You can do it this way    Edit  Considering that you re waiting for a response json with dataType   json      NET  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               If you need I can also explain how to do it by returning a error 500  and get the error in the event error  ajax   But in your case this may be an option

User · Answer

Here s a rather simple solution   In the controller we return our errors like this   if   ModelState IsValid                        return Json new   success   false  errors   ModelState Values SelectMany x   gt  x Errors  Select x   gt  x ErrorMessage  ToList      JsonRequestBehavior AllowGet               Here s some of the client script   function displayValidationErrors errors        var  ul      div validation-summary-valid text-danger  gt  ul          ul empty          each errors  function  idx  errorMessage             ul append   lt li gt     errorMessage     lt  li gt                 That s how we handle it via 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                         Also  I render partial views via ajax in the following way   var view   this RenderRazorViewToString partialUrl  viewModel           return Json new   success   true  view    JsonRequestBehavior AllowGet     RenderRazorViewToString method   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

User · Answer

Added some more logic to solution provided by  Andrew Burgess  Here is the full solution   Created a action filter to get errors for ajax request   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  gt  0                         select new                                                       key   x                              errors   modelState x  Errors                                                            Select y   gt  y ErrorMessage                                                             ToArray                                              filterContext Result   new JsonResult                                         Data   errorModel                                    filterContext HttpContext Response StatusCode                                                          int HttpStatusCode BadRequest                                  Added the filter to my controller method as    HttpPost     this line is important  ValidateAjax  public ActionResult AddUpdateData MyModel model        return Json new   status    result    1   true   false   message   message    JsonRequestBehavior AllowGet       Added a common script for jquery validation   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       Finally added the error javascript method to my Ajax Begin form    model My Model MyModel  using  Ajax BeginForm  AddUpdateData    Home   new AjaxOptions   HttpMethod    POST   OnFailure  onAjaxFormError

[jquery] Use ASP.NET MVC validation with jquery ajax?

Examples related to jquery

Examples related to ajax

Examples related to asp.net-mvc

Examples related to validation