how to bind array json in asp.net mvc

Question

i have an table with student info that should post to the server in array of json format this is

<table id="temlTbl">
  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Family</th>
     <th>Type</th>
  </tr>
   <tr>
     <td>1</td>
     <td>ali</td>
     <td>alavi</td>
     <td>one</td>
  </tr>
  <tr>
   <td>1</td>
   <td>reza</td>
   <td>rezaiee</td>
   <td>two</td>
  </tr>
</table>

this is jquery code to serialize data and post ajax method:

$(SaveTeacherBook).click(function () {  
        var students;
        var jsonobj = [];
        var item = {};
        var Type;
        for (var i = 1 ; i < temp.rows.length; i++) {
            item["ID"] = temp.rows[i].cells[0].innerHTML;
            item["Name"] = temp.rows[i].cells[1].innerHTML;
            item["Family"] = temp.rows[i].cells[2].innerHTML;
            switch (temp.rows[i].cells[3].innerHTML) {
                case "One":
                    Type= "1";
                    break;
                case "Two":
                    Type= "2";
                    break;
                case "Three":
                    Type= "3";
                    break;
            }
            item["Type"] = Type;
            jsonobj.push(item);
        }
        students= JSON.stringify(jsonobj);

        $.post('@Url.Action("Student", "Home")', students);
    });

this is my action method :

[HttpPost]
public ActionResult NewTeacherBook( IList<ViewModel.StudentViewModel> students)
{
    ...
}

and model:

class StudentViewModel
{
    public string ID {get; set;}
    public  string Name {get; set;}
    public string Family {get; set;}
    public string Type {get; set;}
}

this is json formatted data:

"[{"ID":"1","Name":"ali","Family":"alavi","Type":"1"},{"ID":"2","Name":"reza","Family":"rezaiee","Type":"2"}]"

i try to post json array object but don't bind in controller, can any one help me please?

Answer 1

I think you have to deserialize to the object in your action

[HttpPost]
public ActionResult NewTeacherBook( string students)
{
    IList<ViewModel.StudentViewModel> = new JavaScriptSerializer().Deserialize<IList<ViewModel.StudentViewModel>>(students);
}

Answer 2

Your switch seems to be broken. The property name that you're assigning to in the second and third case statements is day, but in the first you're assigning to Type (which looks right given your model). I don't know for sure if this would cause the model binder to ignore your object and refuse to bind, but it's a good first step.

 switch (temp.rows[i].cells[3].innerHTML) { case "One": Type= "1"; break; case "Two": day = "2"; break; case "Three": day = "3"; break; } 

Answer 3

For the ajax request to be processed correctly by the model binder, the request needs to have the content-type specified as application/json; charset=utf-8 application/json; charset=utf-8

Try changing the $.post... line for the following:

$.ajax({
    url: '@Url.Action("Student", "Home")',
    data: students,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'post',
    success: onSaved,
    error: onError
});

Answer 4

i changed my jquery code to :

$(SaveTeacherBook).click(function () {
...
 students= JSON.stringify({"students":jsonobj});
        $.ajax({
            url: '@Url.Action("Student", "Home")',
            type: "POST",
            data: students,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
            }
        });

and action method :

[HttpPost]
public ActionResult NewTeacherBook( IList<ViewModel.StudentViewModel> students)
{
   ...
}

with this changes correctly binds