Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

ASP.NET Core 打造一个简单的图书馆管理系统 (修正版)(七) 学生信息增删

NanaseRuri 2019-02-18 21:25:00 阅读数:163 评论数:0 点赞数:0 收藏数:0

前言:

本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作。

本系列文章主要参考资料:

微软文档:https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows

《Pro ASP.NET MVC 5》、《锋利的 jQuery》

 

 

此系列皆使用 VS2017+C/# 作为开发环境。如果有什么问题或者意见欢迎在留言区进行留言。 

项目 github 地址:https://github.com/NanaseRuri/LibraryDemo

 

 

本章内容:Ajax 提交自定义对象、Ajax 提交数组

 

 

 

此处全部都在 /AdminAccount/Index 页面完成。

一、学生信息编辑首页

 创建一个 Admin 控制器用于编辑学生信息:1 [Authorize(Roles = "Admin")]2 public classAdminAccountController : Controller3 {4 private UserManager_userManager;5 6 public AdminAccountController(UserManageruserManager)7 {8 _userManager =userManager;9 }10 11 publicIActionResult Index()12 {13 ICollection students =_userManager.Users.ToList();14 returnView(students);15 }16 }

 

视图:@using LibraryDemo.Models.DomainModels @model IEnumerable@{ ViewData["Title"] = "AccountInfo"; Student stu= newStudent(); }

学生信息


@if (!@Model.Any()) {}else{foreach (var student inModel) {} }
@Html.LabelFor(m => stu.UserName) @Html.LabelFor(m => stu.Name) @Html.LabelFor(m => stu.Degree) @Html.LabelFor(m => stu.PhoneNumber) @Html.LabelFor(m => stu.Email) @Html.LabelFor(m => stu.MaxBooksNumber)
未有学生信息
@student.UserName @student.Name @Html.DisplayFor(m => student.Degree) @student.PhoneNumber @student.Email @student.MaxBooksNumber

 

结果:

 

 

 

二、增加新学生

此处打算使用 Ajax 来实现无刷新页面更新,因此动作方法返回类型为 Json 。

动作方法:

此处需注意在参数处添加 [FromBody] 修饰,否则无法读取来自页面的数据。

为节省带宽,此处仅返回添加的学生的 JSON 。1 [HttpPost]2 public async TaskAddStudent([FromBody]Student student)3 {4 if (_userManager.CreateAsync(student,"123456").Result.Succeeded)5 {6 return awaitAddedStudent(student.UserName);7 }8 9 return Json("Failed");10 }11 12 public async Task AddedStudent(stringuserName)13 {14 Student student=await _userManager.Users.FirstOrDefaultAsync(s => s.UserName ==userName);15 return Json(new 16 {17 userName =student.UserName,18 name =student.Name,19 degree = student.Degree == Degrees.CollegeStudent ? "本科生" : (student.Degree == Degrees.Postgraduate ? "研究生" : "博士生"),20 phoneNumber =student.PhoneNumber,21 email =student.Email,22 maxBooksNumber =student.MaxBooksNumber23 });24 }

 

在视图中添加 JS 代码:

此处 JS 代码先是点击 添加书籍 按钮插入一行用于编辑的区域,然后通过插入区域的提交按钮提交信息,在信息成功返回后删除原来进行编辑的行,通过返回的信息添加新的行。

27-33 中由于 ASP.NET Core 后台返回 JSON 数据时会对数据的键的首字母进行小写处理,因此此处读取属性也是使用首字母小写,在后台的键也是使用首字母小写加以强调。1

 

结果:

 

 

 

三、 批量移除学生

此处亦可以只返回更新过的元素,但为了演示 ASP.NET Core 使用 Ajax 对数组进行处理,故返回新的 Student 列表:

 1 [HttpPost]2 public async Task RemoveStudent([FromBody]IEnumerableuserNames)3 {4 Student removedStudent;5 foreach (var userName inuserNames)6 {7 removedStudent =await_userManager.FindByNameAsync(userName);8 if (removedStudent!=null)9 {10 await_userManager.DeleteAsync(removedStudent);11 }12 }13 returnGetStudentData();14 }15 16 publicJsonResult GetStudentData()17 {18 var students = _userManager.Users.Select(s =>new 19 {20 userName=s.UserName,21 name=s.Name,22 degree=s.Degree==Degrees.CollegeStudent?"本科生":(s.Degree==Degrees.Postgraduate?"研究生":"博士生"),23 phoneNumber =s.PhoneNumber,24 email =s.Email,25 maxBooksNumber =s.MaxBooksNumber26 });27 returnJson(students);28 }

 

视图添加 JS 函数:

18 行为数组元素的提交方式,不需像之前一样—— {values:values},否则无法进行数据绑定而导致后台接收到空数据。

为了对表格进行更新,先是通过 jQuery 获取了 tbody 的部分,清空后添加来自后台的新信息:1

 

 

结果:

 

版权声明
本文为[NanaseRuri]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/gokoururi/p/10398023.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领