之前我们讲过jquery ajax 调用web api传递复杂参数
这篇文章讲述的是jquery ajax 调用mvc action传递复杂参数,两者有很多相似的地方,但是还是有一点点不同
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication46.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public SchoolModel AddSchool(SchoolModel item)
{
return item;
}
}
public class SchoolModel : School
{
public List<Student> Students { get; set; }
}
public class School
{
public int SchoolID { get; set; }
public string SchoolName { get; set; }
}
public class Student
{
public int StudentID { get; set; }
public string StudentName { get; set; }
public int SchoolID { get; set; }
}
}
前台代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var school = {};
school.SchoolID = 1;
school.SchoolName = '学校1';
var students = [];
for (var i = 0; i < 3; i++) {
var student = {};
student.StudentID = (i + 1);
student.StudentName = '学生' + (i + 1);
student.SchoolID = 1;
students.push(student);
}
school.Students = students;
var url = '@Url.Action("AddSchool","Home")';
//注意:添加contentType,将Json对象转化成Json字符串
$.ajax({
type: 'post',
url: url,
contentType: "application/json",
data: JSON.stringify(school),
success: function (data) {
},
error: function () { },
beforeSend: function () { },
complete: function () { }
});
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>