how to pass $(“form”).serialize() with array list from AJAX method to mvc controller?

Question

I have to pass model and also another array list value from javascript to controller.

Javascript code

$("#SaveData").click(function (e) {

    debugger

    var formdata = $("form").serialize();

    var list = new Array();
    var postData;
    $('input.chkevent').each(function () {
        debugger

        if (this.checked == true) {

            var parent_id = this.parentElement;
            var par2 = parent_id.previousElementSibling;
            var par3 = par2.previousElementSibling;
            var child = par3.childNodes[0];
            var child_val = child.defaultValue;

            var arr_date = this.parentElement.nextElementSibling.childNodes[0].value;
            var dep_date = this.parentElement.nextElementSibling.nextElementSibling.childNodes[0].value;
            var id = new Array(); ;
            id.push(child_val, arr_date, dep_date);
            list.push(id);
            postData = {values: list };

        }

    });

    $.ajax({
        type: "POST",
        url: "/umbraco/Surface/HomeSurface/FormData",

        data: (formdata ? formdata + "&" : "") + "values=" + postData,
        traditional: true,


        success: function (data) {
            //alert("ajax request to server succeed");
        }

    });

});

Only one kind of data I got, either postData or formdata but I need both of them to pass in controller method as below:

public ActionResult FormData(PERSON_MASTER person, string[] values)
    {}

PERSON_MASTER.cs

public class PERSON_MASTER
{
    [Key]
    public int PERSON_ID { get; set; }

    public string ICARD_ID { get; set; }

   [Required]
    public string FNAME { get; set; }

  [Required]
    public string LNAME { get; set; }

    public string GENDER { get; set; }


    [DataType(DataType.Date)]
    public DateTime DOB { get; set; }

   [Required]
    public int? CITY_ID { get; set; }

    public int? STATE_ID { get; set; }

   [Required]
    public int? COUNTRY_ID { get; set; }

    public string CONTACT_NO { get; set; }

}

Thanks in advance.

Answer 1

Try this, not tested:

var model = {
    person: $("form").serialize(),
    values: list 
};

$.ajax({
        type: "POST",
        url: "/umbraco/Surface/HomeSurface/FormData",

        data: JSON.stringify(model),
        traditional: true,

        success: function (data) {
        //alert("ajax request to server succeed");
        }
});

Answer 2

Whenever i pass data to controller, i make sure that the parameter names coresponds with the parameter names in the controller:

$.ajax({
        type: "POST",
        url: "/umbraco/Surface/HomeSurface/FormData",

        data: {
            person: formdata,
            values: list
        },
        traditional: true
    });

Update : You must also make sure that the parameters has the same shape. In your code you are passing a multidimensional array to non-multidimensional array