《ProASP.NETMVC5》、《锋利的jQuery》
此系列皆使用VS2017+C#作为开发环境。如果有什么问题或者意见欢迎在留言区进行留言。
本章内容：Ajax提交自定义对象、Ajax提交数组
此处全部都在/AdminAccount/Index页面完成。
一、学生信息编辑首页
创建一个Admin控制器用于编辑学生信息：
1[Authorize(Roles="Admin")]2publicclassAdminAccountController:Controller3{4privateUserManager_userManager;56publicAdminAccountController(UserManageruserManager)7{8_userManager=userManager;9}1011publicIActionResultIndex()12{13ICollectionstudents=_userManager.Users.ToList();14returnView(students);15}16}
结果：
二、增加新学生
此处打算使用Ajax来实现无刷新页面更新，因此动作方法返回类型为Json。
动作方法：
此处需注意在参数处添加[FromBody]修饰，否则无法读取来自页面的数据。
为节省带宽，此处仅返回添加的学生的JSON。
1[HttpPost]2publicasyncTaskAddStudent([FromBody]Studentstudent)3{4if(_userManager.CreateAsync(student,"123456").Result.Succeeded)5{6returnawaitAddedStudent(student.UserName);7}89returnJson("Failed");10}1112publicasyncTaskAddedStudent(stringuserName)13{14Studentstudent=await_userManager.Users.FirstOrDefaultAsync(s=>s.UserName==userName);15returnJson(new16{17userName=student.UserName,18name=student.Name,19degree=student.Degree==Degrees.CollegeStudent"本科生":(student.Degree==Degrees.Postgraduate"研究生":"博士生"),20phoneNumber=student.PhoneNumber,21email=student.Email,22maxBooksNumber=student.MaxBooksNumber23});24}
在视图中添加JS代码：
此处JS代码先是点击添加书籍按钮插入一行用于编辑的区域，然后通过插入区域的提交按钮提交信息，在信息成功返回后删除原来进行编辑的行，通过返回的信息添加新的行。
27-33中由于ASP.NETCore后台返回JSON数据时会对数据的键的首字母进行小写处理，因此此处读取属性也是使用首字母小写，在后台的键也是使用首字母小写加以强调。
1
三、批量移除学生
此处亦可以只返回更新过的元素，但为了演示ASP.NETCore使用Ajax对数组进行处理，故返回新的Student列表：
1[HttpPost]2publicasyncTaskRemoveStudent([FromBody]IEnumerableuserNames)3{4StudentremovedStudent;5foreach(varuserNameinuserNames)6{7removedStudent=await_userManager.FindByNameAsync(userName);8if(removedStudent!=null)9{10await_userManager.DeleteAsync(removedStudent);11}12}13returnGetStudentData();14}1516publicJsonResultGetStudentData()17{18varstudents=_userManager.Users.Select(s=>new19{20userName=s.UserName,21name=s.Name,22degree=s.Degree==Degrees.CollegeStudent"本科生":(s.Degree==Degrees.Postgraduate"研究生":"博士生"),23phoneNumber=s.PhoneNumber,24email=s.Email,25maxBooksNumber=s.MaxBooksNumber26});27returnJson(students);28}
视图添加JS函数：
18行为数组元素的提交方式，不需像之前一样——{values:values}，否则无法进行数据绑定而导致后台接收到空数据。
为了对表格进行更新，先是通过jQuery获取了tbody的部分，清空后添加来自后台的新信息：
1
