How to pass formcollection using ajax call to an action?

Question

I'm trying to replace a form submit with ajax call. the action needs formcollection and I don't want to create a new Model. So I need to pass the whole form (just like form submit) but through ajax call. I tried to serialize and using Json but the formcollection is empty. this is my action signature:

public ActionResult CompleteRegisteration(FormCollection formCollection)

and here is my submit button click:

var form = $("#onlineform").serialize();              
            $.ajax({
                url: "/Register/CompleteRegisteration",                
                datatype: 'json',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",                
                success: function (data) {
                    if (data.result == "Error") {
                        alert(data.message);
                    }
                }
            });

now how can I pass data into formcollection?

Answer 1

Since FormCollection is a number of key-value pairs, JSON is inappropriate data format for its representation. You should use just serialized form string:

var form = $("#onlineform").serialize();
$.ajax({
    type: 'POST',
    url: "/Register/CompleteRegisteration",
    data: form,
    dataType: 'json',
    success: function (data) {
        if (data.result == "Error") {
            alert(data.message);
        }
    }
});

Key changes:

1. type of the request set to POST (not necessary here, but seems more natural)
2. Serialized form instead of JSON string as request data
3. contentType removed - we are not sending JSON anymore

Answer 2

Try:

$(<your form>).on('submit',function(){
    $.ajax({
        url: "/Register/CompleteRegisteration" + $(this).serialize(), 
        // place the serialized inputs in the ajax call                
        datatype: 'json',
        contentType: "application/json; charset=utf-8",                
        success: function (data) {
            if (data.result == "Error") {
                alert(data.message);
            }
        }
    });
});