ASP.NET Core 打造一个简单的图书馆管理系统(九) 学生信息增删(终章)
前言:
本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作。
本系列文章主要参考资料:
微软文档: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
修改前地址:https://github.com/NanaseRuri/LibraryDemo/tree/SomeError
本章内容:Ajax 提交自定义对象、Ajax 提交数组
此处全部都在 /AdminAccount/Index 页面完成。
一、学生信息编辑首页
创建一个 Admin 控制器用于编辑学生信息:
[Authorize(Roles = "Admin")] public class AdminAccountController : Controller { private UserManager<Student> _userManager; public AdminAccountController(UserManager<Student> userManager) { _userManager = userManager; } public IActionResult Index() { ICollection<Student> students = _userManager.Users.ToList(); return View(students); } }
@using LibraryDemo.Models.DomainModels @model IEnumerable<LibraryDemo.Models.DomainModels.Student> @{ ViewData["Title"] = "AccountInfo"; Student stu = new Student(); } <link rel="stylesheet" href="~/css/BookInfo.css" /> <h2>学生信息</h2> <div id="buttonGroup"> <button class="btn btn-primary" onclick="return addStudent()">添加学生</button> <button class="btn btn-danger" onclick="return confirmDelete()">删除学生</button> </div> <br /> <table> <thead> <tr> <th></th> <th>@Html.LabelFor(m => stu.UserName)</th> <th>@Html.LabelFor(m => stu.Name)</th> <th>@Html.LabelFor(m => stu.Degree)</th> <th>@Html.LabelFor(m => stu.PhoneNumber)</th> <th>@Html.LabelFor(m => stu.Email)</th> <th>@Html.LabelFor(m => stu.MaxBooksNumber)</th> </tr> </thead> <tbody id="studentList"> @if (!@Model.Any()) { <tr><td colspan="6">未有学生信息</td></tr> } else { foreach (var student in Model) { <tr> <td><input type="checkbox" name="userNames" value="@student.UserName" /></td> <td>@student.UserName</td> <td>@student.Name</td> <td>@Html.DisplayFor(m => student.Degree)</td> <td>@student.PhoneNumber</td> <td>@student.Email</td> <td>@student.MaxBooksNumber</td> </tr> } } </tbody> </table>
结果:
二、增加新学生
此处打算使用 Ajax 来实现无刷新页面更新,因此动作方法返回类型为 Json 。
动作方法:
此处需注意在参数处添加 [FromBody] 修饰,否则无法读取来自页面的数据。
为节省带宽,此处仅返回添加的学生的 JSON 。
[HttpPost] public async Task<JsonResult> AddStudent([FromBody]Student student) { if (_userManager.CreateAsync(student,"123456").Result.Succeeded) { return await AddedStudent(student.UserName); } return Json("Failed"); } public async Task<JsonResult> AddedStudent(string userName) { Student student=await _userManager.Users.FirstOrDefaultAsync(s => s.UserName == userName); return Json(new { userName = student.UserName, name = student.Name, degree = student.Degree == Degrees.CollegeStudent ? "本科生" : (student.Degree == Degrees.Postgraduate ? "研究生" : "博士生"), phoneNumber = student.PhoneNumber, email = student.Email, maxBooksNumber = student.MaxBooksNumber }); }
在视图中添加 JS 代码:
此处 JS 代码先是点击 添加书籍 按钮插入一行用于编辑的区域,然后通过插入区域的提交按钮提交信息,在信息成功返回后删除原来进行编辑的行,通过返回的信息添加新的行。
27-33 中由于 ASP.NET Core 后台返回 JSON 数据时会对数据的键的首字母进行小写处理,因此此处读取属性也是使用首字母小写,在后台的键也是使用首字母小写加以强调。
<script> function postAddStudent() { $.ajax({ url: "@Url.Action("AddStudent")", contentType: "application/json", method: "POST", data: JSON.stringify({ UserName: $("#UserName").val(), Name: $("#Name").val(), Degree:$("#Degree").val(), PhoneNumber: $("#PhoneNumber").val(), Email: $("#Email").val(), MaxBooksNumber: $("#MaxBooksNumber").val() }), success: function (student) { addStudentToTable(student); } }); } function addStudentToTable(student) { var studentList = document.getElementById("studentList"); var studentInfo = document.getElementById("studentInfo"); studentList.removeChild(studentInfo); $("#studentList").append(`<tr>` + `<td><input type="checkbox" name="userNames" value="${student.userName}" /></td>` + `<td>${student.userName}</td>` + `<td>${student.name}</td>`+ `<td>${student.degree}</td>` + `<td>${student.phoneNumber}</td>` + `<td>${student.email}</td>` + `<td>${student.maxBooksNumber}</td >` + `</tr>`); } </script>
结果:
三、 批量移除学生
此处亦可以只返回更新过的元素,但为了演示 ASP.NET Core 使用 Ajax 对数组进行处理,故返回新的 Student 列表:
[HttpPost] public async Task<JsonResult> RemoveStudent([FromBody]IEnumerable<string> userNames) { Student removedStudent; foreach (var userName in userNames) { removedStudent =await _userManager.FindByNameAsync(userName); if (removedStudent!=null) { await _userManager.DeleteAsync(removedStudent); } } return GetStudentData(); } public JsonResult GetStudentData() { var students = _userManager.Users.Select(s =>new { userName=s.UserName, name=s.Name, degree=s.Degree==Degrees.CollegeStudent?"本科生":(s.Degree==Degrees.Postgraduate?"研究生":"博士生"), phoneNumber = s.PhoneNumber, email = s.Email, maxBooksNumber = s.MaxBooksNumber }); return Json(students); }
视图添加 JS 函数:
18 行为数组元素的提交方式,不需像之前一样—— {values:values},否则无法进行数据绑定而导致后台接收到空数据。
为了对表格进行更新,先是通过 jQuery 获取了 tbody 的部分,清空后添加来自后台的新信息:
<script> function confirmDelete() { var userNames = document.getElementsByName("userNames"); var message = "确认删除"; var values = []; for (i in userNames) { if (userNames[i].checked) { message = message + userNames[i].value+","; values.push(userNames[i].value); } } message = message + "?"; if (confirm(message)) { $.ajax({ url: "@Url.Action("RemoveStudent")", contentType: "application/json", method: "POST", data: JSON.stringify(values), success: function(students) { updateTable(students); } }); } } function updateTable(data) { var body = $("#studentList"); body.empty(); for (var i = 0; i < data.length; i++) { var person = data[i]; body.append(`<tr><td><input type="checkbox" name="userNames" value="${person.userName}" /></td> <td>${person.userName}</td><td>${person.name}</td><td>${person.degree}</td> <td>${person.phoneNumber}</td><td>${person.email}</td><td>${person.maxBooksNumber}</td></tr>`); } }; </script>
结果:
- ASP.NET Core 打造一个简单的图书馆管理系统(七)外借/阅览图书信息的增删改查
- ASP.NET Core 打造一个简单的图书馆管理系统(五)初始化书籍信息
- ASP.NET Core 打造一个简单的图书馆管理系统(二)Code First 多对多关系的建立
- ASP.NET Core 打造一个简单的图书馆管理系统(四)密码修改以及密码重置
- ASP.NET Core 打造一个简单的图书馆管理系统(三)基本登录页面以及授权逻辑的建立
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- asp.net学生信息管理系统-参数设置简介(四)
- asp.net 学生信息管理系统 全免费
- 一个简单的学生信息管理系统
- asp.net学生信息管理系统一
- ASP.NET学生信息管理系统-班级建制(一) 班级建制管理
- ASP.NET学生信息管理系统-教务管理-学生信息管理(四)
- ASP.NET学生信息管理系统-班级建制(三) 课程(科目)设置
- ASP.NET学生信息管理系统-班级建制(二) 班级专业设置
- 使用python实现一个简单的学生信息管理系统
- 一个简单学生信息管理系统的编程
- 命名规范不只是增加可读性!(实例:asp.net C#学生信息管理系统)
- ASP.NET学生信息管理系统-教务管理-考试管理(二)
- ASP.NET学生信息管理系统-权限管理-用户资料
- ASP.NET学生信息管理系统-教务管理-学生信息管理(二)