Question

Why in this scenario is id null when it reaches the Action?

Javascript

$("#ajax-submit").click(function () {
    var data = { setup: $("form").serialize(), id: "12345" };
    $.ajax({
        type: 'POST',
        url: "/MyController/Process",
        data: JSON.stringify(data),
        success: function () { alert("Successful"); },
        dataType: "json"
    });
});

Action

[HttpPost]
public ActionResult Process(SetupModel setup, string id)
{
    // id is null, setup is not!
}

If I change the javascript to:

$.ajax({
    type: 'POST',
    url: "/MyController/Process",
    data: { setup: $("form").serialize(), id: "12345" },
    success: function () { alert("Successful"); },
    dataType: "json"
});

Then id binds, but setup doesn’t!

Goal

I am trying to develop a step-by-step wizard whereby the entire model is rendered in a single view and divs are shown/hidden using javascript to simulate going to the next/previous pages.

However, the problem I have is, one of the steps requires a list to be built up (without submitting the entire model). To accomplish this I am attempting to submit the data as it is at that point (with the extra parameter), update the model in the controller, then re-load the view with the updated model.

Answer 1

Minor change in your code.

$.ajax({
    type: 'POST',
    url: "/MyController/Process",
    data: $("form").serialize() + '&id=12345',
    success: function() {
        alert("Successful");
    },
    dataType: "json"
});

This will solve problem