MVC5 controller action not called from JSON AJAX Post

Question

I am sending data from from a javascript app to a MVC5 controller, however when data is submitted to the Submit controller action, it is never called. I have some very simple mappers which create the following JSON object:

function mapContactDto(vm)
{
    var contactDto = {};
    contactDto.firstName = vm.firstName();
    contactDto.lastName = vm.lastName();
    contactDto.companyName = vm.companyName();
    contactDto.emailAddress = vm.emailAddress();
    contactDto.phonePrimary = vm.phonePrimary();
    contactDto.phoneSecondary = vm.phoneSecondary();
    contactDto.address1 = vm.address1();
    contactDto.address2 = vm.address2();
    contactDto.city = vm.city();
    contactDto.postalCode = vm.postalCode();
    contactDto.country = vm.country();
    return contactDto;
}

function mapCartItems(vm)
{
    var cartItemsDto = new Array();
    $.each(vm.selectedOptions(), function (index, step, array) {
        var sku = step.selection().sku;
        if (sku !== "0") {
            cartItemsDto.push(sku);
        }
    });
    return cartItemsDto;
}

/* if i dump the object that is sent to the server with `console.log(JSON.stringify(item))` I get:

{
"skus": ["1001","8GB","201"],
"contact": {
    "firstName":"Jon",
    "lastName":"Doe",
    "companyName":"Yup my company",
    "emailAddress":"contact@me.com",
    "phonePrimary":"012111 231",
    "phoneSecondary":"",
    "address1":"1 Billing Way",
    "address2":"Navigation House",
    "city":"London",
    "postalCode":"112211",
    "country":"GB"
    }
}
*/

I then send the data with the following code:

var contactDto = mapContactDto(self.billingVm());
var cartItemsDto = mapCartItems(self.configurationVm());

var req = new XMLHttpRequest();
req.open('HEAD', document.location, false);
req.send(null);

var item = {
    skus: mapCartItems(cartItemsVm()),
    contact: mapContactDto(billingVm())
};

var url = '/Knockout/Submit';

$.ajax({
    cache: false,
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: item,
    type: 'POST',
    success: function (data, textStatus, jqXHR) {           
    },
    error: function (data, textStatus, jqXHR) { 
    }
});

My controller code is below:

public JsonResult Submit(string[] Skus, ContactDto Contact)
{
    return Json(new { success = true, message = "Some message" });
}

/* and MVC models are: */

public class ContactDto
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string CompanyName { get; set; }
    public string EmailAddress { get; set; }
    public string PhonePrimary { get; set; }
    public string PhoneSecondary { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
}

I have the following questions please:

• Submit is never called however, if I comment out the controller parameters so it becomes Submit() then it is called, why is this?

• From the above, it seems like the controller framework cannot match up the parameters - any idea what I am doing wrong please?

• How to enable debugging on the MVC controller so I can see what's going on?

Answer 1

Four things you must check using ajax calls,
1. If using javascript object you must stringify the object before passing.
2. The Action verb for the action method should be same as the type of your ajax call if POST then the action method should be decorated by action verb [HttpPost].
3. Always use the relative path for url's in ajax as @Url.Action("action", "controller").
4. The input parameters of your action method method should match the json object parameters (exactly ie case sensitive).

For debugging you may use firebug addon in your browser so that you can see what is sent over the network or press F12 for debugging tool in that check in network tab.

Answer 2

You will have to make two changes: Stringify your Json as below:

$.ajax({
    cache: false,
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(item),
    type: 'POST',
    success: function (data, textStatus, jqXHR) {           
    },
    error: function (data, textStatus, jqXHR) { 
    }
});

Second, Just Annotate your Method with [HttpPost] as below:

[HttpPost]
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
    return Json(new { success = true, message = "Some message" });
}