Home MVC ajax json post to controller action method
Reply: 3

MVC ajax json post to controller action method

Grant Sutcliffe
Grant Sutcliffe Published in 2010-11-07 23:08:18Z

I am trying to achieve a JQuery AJAX call to a controller action method that contains a complex object as a parameter. I have read plenty blogs and tried several techniques learned from these. The key post on which I have constructed my best attempt code (below) is the stackoverflow post here .

I want to trigger an asynchronous post, invoked when the user tabs off a field [not a Form save post – as demonstrated in other examples I have found].

My intention is to:

  • Instantiate an object on the client [not the ViewModel which provides the type for the View];
  • Populate the object with data from several fields in the view;
  • Convert this object to JSON;
  • Call the controller action method using the jQuery.Ajax method, passing the JSON object.

The results will be returned as a JSON result; and data will be loaded into fields in the view depending on results returned.

The problems are:

  • If the action method is attributed with the HttpPost attribute, the controller Action method is not invoked (even though the AJAX call type is set to ‘POST’).
  • If the action method isattributed with HttpGet, the values of properties of the parameter are null
  • The ReadObject method throws the error: "Expecting element 'root' from namespace ''.. Encountered 'None' with name 'namespace'".

Hopefully someone can help. Thanks. Code below:

Client js file

 var disputeKeyDataObj = {
     "InvoiceNumber": "" + $.trim(this.value) + "",
     "CustomerNumber": "" + $.trim($('#CustomerNumber').val()) + ""

  var disputeKeyDataJSON = JSON.stringify(disputeHeadlineData);      

     url: "/cnr/GetDataForInvoiceNumber",
     type: "POST",
     data: disputeKeyDataJSON,
     dataType: 'json',
     contentType: "application/json; charset=utf-8",
     success: EnrichedDisputeKeyData(result)

Action Filter and class for the type associated with the Action method parameter

 public class DisputeKeyData  
    [DataMember(Name = "InvoiceNumber")]  
    public string InvoiceNumber { get; set; }

    [DataMember(Name = "CustomerNumber")]
    public string CustomerNumber { get; set; }

Action method on the controller

  [ObjectFilter(Param = "disputeKeyData", RootType = typeof(DisputeKeyData))]  
  public ActionResult GetDataForInvoiceNumber(DisputeKeyData disputeKeyData)  
     return Json(disputeKeyData, JsonRequestBehavior.AllowGet);  
bkaid Reply to 2010-11-07 23:36:12Z

What version of asp.net mvc are you using? Posting json objects to strongly typed controller actions just got added into ASP.NET MVC 3 Beta 1. This article explains a workaround using model binders for asp.net mvc 2 and info on how it works in MVC 3.

Chuck Norris
Chuck Norris Reply to 2012-07-11 12:27:09Z

Below is how I got this working.

The Key point was: I needed to use the ViewModel associated with the view in order for the runtime to be able to resolve the object in the request.

[I know that that there is a way to bind an object other than the default ViewModel object but ended up simply populating the necessary properties for my needs as I could not get it to work]

  public ActionResult GetDataForInvoiceNumber(MyViewModel myViewModel)  
     var invoiceNumberQueryResult = _viewModelBuilder.HydrateMyViewModelGivenInvoiceDetail(myViewModel.InvoiceNumber, myViewModel.SelectedCompanyCode);
     return Json(invoiceNumberQueryResult, JsonRequestBehavior.DenyGet);

The JQuery script used to call this action method:

var requestData = {
         InvoiceNumber: $.trim(this.value),
         SelectedCompanyCode: $.trim($('#SelectedCompanyCode').val())

         url: '/en/myController/GetDataForInvoiceNumber',
         type: 'POST',
         data: JSON.stringify(requestData),
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         error: function (xhr) {
            alert('Error: ' + xhr.statusText);
         success: function (result) {
         async: true,
         processData: false
Robert Koritnik
Robert Koritnik Reply to 2010-12-11 11:40:22Z

This blog post directly addresses your problem.

It uses a technique without the need for additional JSON client libraries. It introduces a really simple jQuery plugin that will help you do the trick.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.322731 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO