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 postDataor 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.

Maybe this post solves your question : [Posting serialized form data AND additional data to MVC controller][1] [1]: http://stackoverflow.com/questions/21766348/posting-serialized-form-data-and-additional-data-to-mvc-controller — ealef, Mar 12 '15 at 15:04

SBirthare · Answer 1 · 2015-02-05T09:37:29.527

0

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");
        }
});

edited Feb 05 '15 at 09:37

answered Feb 05 '15 at 08:32

SBirthare

5,117
4
34
59

what does orgId stand for?? still I got values isequall to null and got person data. – Krish Feb 05 '15 at 09:36
Ah that's a typo, I have updated my answer. You should put list or anything you want to send to server in values action parameter. – SBirthare Feb 05 '15 at 09:38

rajeemcariazo · Answer 2 · 2015-02-05T10:33:45.320

0

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

edited Feb 05 '15 at 10:33

answered Feb 05 '15 at 09:42

rajeemcariazo

2,476
5
36
62

ya agreed,I've tried this one also but yet not solved. – Krish Feb 05 '15 at 09:44
no, only person data passed successfully, but didn't get for values. – Krish Feb 05 '15 at 09:49
could you change the name of the list to a more specific name like myList? (change the name in controller also). Before you post data, have you checked if the list is not empty? – rajeemcariazo Feb 05 '15 at 09:52
in javascript, list i.e. myList has this value : [["14", "03/14/2015", "03/21/2015"], ["15", "08/20/2015", "08/30/2015"]] but in controller it has null. – Krish Feb 05 '15 at 09:59
could you force the value of myList = ["test1", "test"]; i just have a theory that controller cannot serialize the list correctly due to its format which is multidimensional array – rajeemcariazo Feb 05 '15 at 10:02
then you must change your string[] datatype, why not use DTO instead (e.g. IEnumerable) – rajeemcariazo Feb 05 '15 at 10:09
IEnumerable gets me all values in one comma saperated array,That I don't want. – Krish Feb 05 '15 at 10:20
No, ArrDepDto is an object (e.g. public class ArrDepDto { int PersonId { get; set; } DateTime ArrDate { get; set; } DateTime DepDate { get; set; } }) – rajeemcariazo Feb 05 '15 at 10:23
oh ok, I'll try this one – Krish Feb 05 '15 at 10:27
in your javascript, make your list compatible to the IEnumerable: myList.push({ PersonId = 1, ArrDate = "2001/01/01", DepDate = "2001/02/02" }) – rajeemcariazo Feb 05 '15 at 10:31
list data'll save in different table which is person event master so the list[eventid,event_arr_date,event_dep_date] – Krish Feb 05 '15 at 10:38

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

2 Answers2