Sending complex Json to a controller with an object parameter using a form.submit()

Question

I am trying to send a complex Json with the following kind of form:

{  
   "Success":false,
   "ErrorMessage":{  
      "ErrorMessage":"Some Message",
      "ErrorType":"Serialization Failed",
      "SiteReportDescription":"Some Desc",
      "Status":false
   },
   "Result":null
}

To the following controller:

[Authorize, HttpPost]
public ActionResult DoThing(ThingModel model)
{
    return Json(true);
}

Which accepts the following model (ThingError is another object with the four fields mentioned in the json):

public class ThingModel
{
    public bool Success { get; set; }

    public ThingError ErrorMessage { get; set; }

    public ThingResult Result { get; set; }
}

I've used the following two methods to communicate with this Controller:

    var form = $('<form method="post" enctype="multipart/form-data" style="visibility:hidden;"><input type="submit" name="model" /></form>');
        $(document.body).append(form);
        form.attr("action", '@Url.Action("DoThing", "Script")');
        form.find("input[name='model']").val(JsonString);
        form.submit();

        $.ajax({
            type: 'POST',
            url: '@Url.Action("DoThing", "Script")',
            contentType: "application/json; charset=utf-8",
            processData: false,
            dataType: 'json',
            data: JsonString,
            success: function (result) { }
            },
        });

Both of these methods of communication will interact with the controller but only the Ajax request will send a json string that is converted to the controller object ThingModel, the form.submit will just leave it null. What is the reason behind this? Is there something I am doing wrong in the Form?

Answer 1

You would need to capture this in fiddler in order to understand why.

Essentially, the ajax call is passing this:

{ "Something": "123" }

whereas the form is passing this:

{ "Model": { "Something": "123" } }

Not the same.