asp.net mvc jquery json 传递复杂参数

js中区分大小写；

model类

public class Student

    {

        public string name { get; set; }

        public int id { get; set; }

        public string gender { get; set; }

        public int age { get; set; }

        public List<Play> ListPlay { get; set; }

    }

    public class Play

    {

        public string ID { get; set; }

        public string Name { get; set; }

    }

 

Controller

 public HttpResponseMessage PostStudent(Student student)

        {

            student = studentRepository.Add(student);

            var response = Request.CreateResponse<Student>(HttpStatusCode.Created, student);

            string uri = Url.Link("DefaultApi", new { id = student.id });

            response.Headers.Location = new Uri(uri);

            return response;

        }

        //  [HttpPost] HttpResponseMessage  IEnumerable<Student>

       // [HttpPost]

//返回复杂对象

        public HttpResponseMessage PostStudentsByReq(StudentReq studentReq, string criteria)

        {

           var students=   studentRepository.GetAll().Where(

                   s => string.Equals(s.age.ToString(), studentReq.age.ToString(), StringComparison.OrdinalIgnoreCase));

           Student stu = new Student();

           stu.age = 1;

           stu.gender = "aa";

           stu.id = 112;

           stu.name = "aaa";

           stu.ListPlay = new List<Play>();

           Play play = new Play();

           play.ID = "11";

           play.Name = "张三";

           stu.ListPlay.Add(play);

           play = new Play();

           play.ID = "12";

           play.Name = "name2";

           stu.ListPlay.Add(play);

           List<Student> list = new List<Student>();

           list.Add(stu);

           var response = Request.CreateResponse(HttpStatusCode.OK, list);

           return response;

          //return students;

        }

 

html页

add方法js方法 jquery

 //Adds a Student to the List

    function AddStudent() {

        debugger;

        var Play = {

            ID: '1',

            Name: "张三"

        };

        var Play2 = {

            ID: '2',

            Name: "李四"

        };

        var PlayList = new Array();

        PlayList.push(Play);

        PlayList.push(Play2);

        var student = {

            name: document.getElementById('newStudentName').value,

            id: document.getElementById('newStudentId').value,

            gender: document.getElementById('newStudentGender').value,

            age: document.getElementById('newStudentAge').value,

            ListPlay: PlayList

        };

        $.ajax({

            url: 'http://localhost:60792/api/student/',

            type: 'POST',

            data: JSON.stringify(student),

            contentType: "application/json;charset=utf-8",

            success: function (data) {

                alert('Student added Successfully');

                GetAllStudents();

            },

            error: function () {

                alert('Student not Added');

            }

        });

    }

html部分代码

<div>

    <h1 style="color: #f00">Add or Update a Student </h1>

    <table style="margin-left: 15px">

        <tr>

            <td><span>Name</span></td>

            <td>

                <input id="newStudentName" type="text" /></td>

        </tr>

        <tr>

            <td><span>ID</span></td>

            <td>

                <input id="newStudentId" type="number" /></td>

        </tr>

        <tr>

            <td><span>Gender</span></td>

            <td>

                <select id="newStudentGender">

                    <option value="Male">Male</option>

                    <option value="Female">Female</option>

                </select></td>

        </tr>

        <tr>

            <td><span>Age</span></td>

            <td>

                <input id="newStudentAge" type="number" /></td>

        </tr>

        <tr>

            <td>

                <button id="postStudent" onclick="AddStudent()">Add New Student</button></td>

            <td>

                <button id="putStudent" onclick="PutStudent()">Update Student</button></td>

        </tr>

    </table>

</div>

前台jquery 解析复杂对象 对象中包含对象集合 js代码

function GetStudentByReq_Post() {

        alert("开始");

        debugger;

        var studentReq = {

            name: 'ab',

            id: '1',

            gender: 'man',

            age: '15'

        };

        var age = 22;

        // jQuery.support.cors = true;

        $.ajax({

                        url: 'api/student?criteria=full',

            type: 'POST',

            contentType: "application/json;charset=utf-8",

            data: JSON.stringify(studentReq),

            success: function (data) {

                alert(data);

              //  WriteResponse(data);

                WriteResponses(data);

            },

            error: function (x, y, z) {

                alert('The Student not found in the List for the given ID');

            }

        });

        //Displays in a Table

        function WriteResponses(students) {

            var strResult = "<table><th>Name</th><th>Student ID</th><th>Gender</th><th>Age</th>";

            $.each(students, function (index, student) {

                strResult += "<tr><td>" + student.name + "</td><td> " + student.id + "</td><td>" + student.gender + "</td><td>" + student.age + "</td></tr>";

                strResult += "<ul>";

                $.each(student.ListPlay, function (index1, play) {

                    strResult += "<li>" + play.ID + "  " + play.Name + "</li>"

                });

                strResult += "</ul>";

            });

            strResult += "</table>";

            $("#divResult").html(strResult);

        }

    }

Html部分代码

<div>

      <button id="getStudentByReq2" onclick="GetStudentByReq_Post()">获取列表2</button>

</div>

<div id="divResult" style="margin-left: 15px"></div>