manage serverside validaton when I use jquery post

Question

From razor view I'm sending js object using jquery to the mvc controller. Reason why I do it using jquery post method and not razors form is that I need to manage dynamic input of certain fields. On the view certain fields (inputtextbox) are dynamically added to the view (from 0 - 10) and I manage that solution using js on the page.

 var myJsObj = ...
 $.ajax({
           type: 'POST',
           traditional: true,
           contentType: 'application/json',
           url: '/MyController/SomeAction',
           data: JSON.stringify({ model: myJsObj}),
           success: function () {

           }
 });

On the server side, mvc receives that model and in case of some error I want to return this object back to the view.

[HttpPost]
public ActionResult SomeAction(MyModel model)
{
   if(!ModelState.IsValid)
   {
      ModelState.AddModelError("", "Error occured!");
      return View(model);
   }     
   return RedirectToAction("Index");  
}

I have inside razor view

Html.ValidationSummary

but since I'm using jquery post I dont know how to receive back to the view and display error like I would use regular razor form. Or if you know better approach to manage dynamically added input boxes on the razor view please post. Any help please.

What version of ASP.NET MVC are you using? – Shaun Luttin Apr 28 '15 at 23:57 — Shaun Luttin, Apr 28 '15 at 23:57

score 1 · Answer 1 · edited May 23 '17 at 12:21

This is what I have done to display errors for dynamic inputs. First off, take a look at this post to give you a better understanding. I have modified my code to better suit my needs, but you can check if it works for your application. use-asp-net-mvc-validation-with-jquery-ajax. I would then consume the return result in the ajax post error callback. It returns a code 400 'Bad Request' on validation errors. The validator variable is the form validator object.

error: function (xhr, textStatus, errorThrown) {
     var statusCode = parseInt(xhr.status);
     if (statusCode == 400) {
         var data = $.parseJSON(xhr.responseText);
         var message = "";
         $.each(data, function (i, item) {
             var propertyName = "" + item.key + "";
             if ($("input[name='" + item.key + "']").length > 0) {
                 var errorObj = {};
                 errorObj[item.key] = item.error;
                 validator.showErrors(errorObj);
            }
            else {
                message += "<div>" + item.key + ": " + item.error + "</div>";
            }
        });

        if (message != "") {
            //display message
         }
    }
}

I hope this helps. Good luck.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

I think you've got a couple of options here:

If you prefer to continue to use an Ajax POST as you've shown above, then you need to take the response from the POST and inject it back into your current HTML document. For example,

$.ajax({
       type: 'POST',
       traditional: true,
       contentType: 'application/json',
       url: '/MyController/SomeAction',
       data: JSON.stringify({ model: myJsObj}),
       success: function (data) {
           // This is the case where the MVC action found model validation
           // errors, and so it is responding with an HTML document that 
           // shows the errors.
           var returnedBodyHtml = $(data).find('body').html();
           $('body').html(returnedBodyHtml);
       }
     });

(That's untested code up there, so you may have to debug a little bit.) But this code doesn't handle the case where the server responded with a redirect (in the case of successful validation). So, check out this post for some options there.

Your other option is to use the standard Form submit. I know you said you had some dynamically generated input controls on your page, but that doesn't mean that you can't do a Form submit. You just need to make sure that these dynamically generated elements have the correct "name" attribute on them, so that their values get mapped appropriately to the Model on the server side action that is accepting the POST. For example, if your Javascript is dynamically generating an HTML element like this, and inserting it into the form:

<input type="text" name="myDynamicallyGeneratedInput[0]" />
<input type="text" name="myDynamicallyGeneratedInput[1]" />
<input type="text" name="myDynamicallyGeneratedInput[2]" />
<input type="text" name="myDynamicallyGeneratedInput[3]" />

then your Form submit will still work, as long as on the server side, your MyModel class has that corresponding property:

class MyModel
{
    public List<string> MyDynamicallyGeneratedInput {get; set;}
}

does this means that if I want to use razor's form I need to accept 10 parameters on the mvc post action? — user2783193, Apr 29 '15 at 06:50

manage serverside validaton when I use jquery post

2 Answers2