javascript - 在 ajax post issue 中传递数据

Question

场景:

需要将包含子对象列表的对象传递给 Controller ​​。

问题:

我能够获取对象的值，但不能获取对象内子对象列表的值。

代码:

index.cshtml

function sendData() {
    var student = {
        Id: 1,
        Name: "xxx",
        Marks: [{
            Subject: "Maths",
            Mark:80
        },
        {
            Subject: "Science",
            Mark: 75
        }]
    }
    $.ajax({
        url: '@Url.Action("Receive", "Home")',
        data: student,
        success: function (data) {
            alert("done");
        },
        error: function (error) {
            alert('error For details refer console log');
            console.log(error);
        }
    });
}

HomeController.cs

public ActionResult Receive(Student student)
    {
        ViewBag.Message = "Your contact page.";
        return View();
    }

Student.cs

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Marks> Marks { get; set; }
}
public class Marks
{
    public string Subject { get; set; }
    public decimal Mark { get; set; }
}

截图:

Chrome 调试器显示所有数据都已设置。

但在 Controller 中我没有得到 Marks 的值

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

需要对数据进行字符串化，设置contentType和typeajax选项(注意必须是POST，否则需要在使用带点符号的完全限定属性名称的不同方式 - 例如 { Id: 1, .... , 'Marks[0].Subject': 'Maths', 'Marks[0].Mark': 80 , ... ，在这种情况下，您现有的 ajax 代码无需修改即可工作)

var student = {
    ....
};

$.ajax({
    url: '@Url.Action("Receive", "Home")',
    data: JSON.stringify({ student: student }, // stringify
    type: 'POST', // add
    contentType: "application/json; charset=utf-8", //add
    success: function (data) {
        alert("done");
    },
    ....
});

请注意，您的方法正在返回一个 View ，但您并未对该 View 执行任何操作。如果您打算用该 View 更新 DOM，则该方法应该是 return PartialView( ... ); 并且在 ajax 成功回调中，

success: function (data) {
    $(someElement).html(data);
},