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>
原文地址:https://www.cnblogs.com/z_lb/p/2793105.html