Jquery Function always return count 0 of second parameter

Question

i am writing a function in jquery which post the data to controller. currently it is posting form data to controller fine but when i post checkbox list with form data then it send always count 0 in controller here is my code.

    function SubmitForm() {
    var studentFormData = $("#frmStudent").serialize();
    debugger;
    var SubjectArraydata = new Array();

    $(".chkSubject:checked").each(function () {
        var row = {
            "SubjectId": $(this).data("id")
        };
        SubjectArraydata.push(row);
    });

    $.ajax({
        url: '@Url.Action("StudentForm", "Student")',
        type: "POST",
        dataType: "json",
        data: studentFormData + JSON.stringify("&subjectData=" + SubjectArraydata),
        async: true,

        success: function (msg) {

        },
        error: function () {

        }
    });
}

Controller:

[HttpPost] 
public ActionResult StudentForm(Student student, List<Subject> subjectData)
{ 
   return Json(true); 
}

any one tell me where is the problem in my code thank you.

i got student form data accurately but subjectData always return 0 — Ammar, Jun 16 '17 at 12:46
here is my student controller[HttpPost] public ActionResult StudentForm(Student student, List subjectData){ return Json(true); } — Ammar, Jun 16 '17 at 12:49
Why the `JSON.stringify(...)`? If `subjectData` is supposed to be JSON then only call `JSON.stringify()` on `SubjectArraydata` otherwise it doesn't make much sense... — Andreas, Jun 16 '17 at 12:50
Are you really only posting back one property of `Subject` (i.e. `SubjectId` which I assume is an `int`)? If so that will be easier to solve that if you posting back multiple properties of `Subject`. — , Jun 16 '17 at 12:54
`data: { 'student' : studentFormData , 'subjectData' : JSON.stringify(SubjectArraydata) } ` Can you try this?? — Subhabrata Mondal, Jun 16 '17 at 13:03
@SubhabrataMondal by your code both parameters comes null in controller. — Ammar, Jun 16 '17 at 13:07
JSON.stringify({ 'student' : studentFormData , 'subjectData':SubjectArraydata } ); Can you console.log() it? and show us this. — Subhabrata Mondal, Jun 16 '17 at 13:11
@SubhabrataMondal when i tried this data: { 'student': studentData, 'subjectData': SubjectArraydata}, then student data is null and subject data count is fine but no value in list of subjectData — Ammar, Jun 16 '17 at 13:19

score 1 · Accepted Answer · answered Jun 16 '17 at 13:28

Your cannot mix 'application/x-www-form-urlencoded' data (the contentType of your serialize() method) and 'application/json' data (the contentType of the JSON.stringify() method) like that.

Sinve you have confirmed that your only submitting one property of Subject, which is SubjectId and is typeof int, then you can append the SubjectId values to the serialized data.

var studentFormData = $("#frmStudent").serialize();
$(".chkSubject:checked").each(function () {
    studentFormData += '&' + $.param({ SubjectIds: $(this).data("id") });
};
$.ajax({
    url: '@Url.Action("StudentForm", "Student")',
    type: "POST",
    dataType: "json",
    data: studentFormData,
    success: function (msg) {
    },
    error: function () {
    }
});

and change your controller method to

[HttpPost] 
public ActionResult StudentForm(Student student, List<int> SubjectIds)
{ 
    ....

thank you @Stephen its working fine.thank you for your guaidence. — Ammar, Jun 16 '17 at 13:41
Just as a side note, its would be more 'MVC' to actually use a view model and generate the form controls based on that view model so that all that's needed is `$("#frmStudent").serialize()` - for an example of generating a collection of checkboxes, refer [this answer](https://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) — , Jun 16 '17 at 13:45

score 0 · Answer 2 · answered Jun 16 '17 at 13:24

0

I think you use 'POST' method not correctly. You try to mix sending data as json and as url parameters.

data: studentFormData + JSON.stringify("&subjectData=" + SubjectArraydata),

what you send in data:

[
  {...},
  [{SubjectId: ''}, {SubjectId: ''}]
]

or:

{
  1: {...},
  subjectData: [{SubjectId: ''}, {SubjectId: ''}]
}

or some data sended as json, some in url?

Send all data in json, and dont serialize (jquery do it for you):

var data = [strudentFormData, subjectData];
$.ajax(..., data: data, ...);

answered Jun 16 '17 at 13:24

Alexey Obukhov

834
9
18

by this both data is null – Ammar Jun 16 '17 at 13:30
try this: var data = {student: studentFormData, subjectData: subjectArraydata}. both studentFormData and subjectArraydata must be object, not string – Alexey Obukhov Jun 16 '17 at 13:36

Jquery Function always return count 0 of second parameter

2 Answers2