C# ASP.NET Core开发学生信息管理系统（三）

随着技术的进步，跨平台开发已经成为了标配，在此大背景下，ASP.NET Core也应运而生。本文主要利用ASP.NET Core开发一个学生管理系统为例，简述ASP.NET Core开发的常见知识点，前两篇文章做了登录功能和主页面功能，本文继续分享学生信息页面的增删改查功能。仅供学习分享使用，如有不足之处，还请指正。

涉及知识点

开发学生管理系统，涉及知识点，如下所示：

创建模型

如果要对学生进行管理，则首先需要创建学生模型，如下所示：

 1 namespace SMS.Models
 2 {
 3     public class Student
 4     {
 5         /// <summary>
 6         /// 唯一标识
 7         /// </summary>
 8         public int Id { get; set; }
 9 
10         /// <summary>
11         /// 学号
12         /// </summary>
13         public string No { get; set; }
14 
15         /// <summary>
16         /// 学生名称
17         /// </summary>
18         public string Name { get; set; }
19 
20         /// <summary>
21         /// 年纪
22         /// </summary>
23         public int Age { get; set; }
24 
25         /// <summary>
26         /// 性别
27         /// </summary>
28         public Boolean Sex { get; set; }
29 
30         /// <summary>
31         /// 专业
32         /// </summary>
33         public string Dept { get; set; }
34 
35         /// <summary>
36         /// 年级
37         /// </summary>
38         public string Grade { get; set; }
39 
40         /// <summary>
41         /// 班级
42         /// </summary>
43         public string Class { get; set; }
44     }
45 }

创建控制器

学生控制器（StudentController），如下所示：

  1 namespace SMS.Controllers
  2 {
  3     public class StudentController : Controller
  4     {
  5         private readonly ILogger<HomeController> _logger;
  6 
  7         private DataContext dataContext;
  8 
  9         public StudentController(ILogger<HomeController> logger, DataContext context) {
 10             _logger = logger;
 11             dataContext = context;
 12         }
 13 
 14         /// <summary>
 15         /// 学生信息首页
 16         /// </summary>
 17         /// <returns></returns>
 18         public IActionResult Index()
 19         {
 20             return View();
 21         }
 22 
 23         /// <summary>
 24         /// 获取学生信息
 25         /// </summary>
 26         /// <param name="Name"></param>
 27         /// <returns></returns>
 28         [HttpPost]
 29         public JsonResult Query(string Name) {
 30             var students = new List<Student>();
 31             if (string.IsNullOrEmpty(Name))
 32             {
 33                 students = dataContext.Students.ToList();
 34 
 35             }
 36             else {
 37                 students = dataContext.Students.Where(r => r.Name.Contains(Name)).ToList();
 38             }
 39             
 40             return Json(students);
 41         }
 42 
 43         /// <summary>
 44         /// 新增
 45         /// </summary>
 46         /// <returns></returns>
 47         [HttpGet]
 48         public IActionResult Add() {
 49             return View();
 50         }
 51 
 52         /// <summary>
 53         /// 编辑
 54         /// </summary>
 55         /// <param name="id"></param>
 56         /// <returns></returns>
 57         public IActionResult Edit(int id) {
 58             var student = dataContext.Students.FirstOrDefault((s) => s.Id == id);
 59             return View(student);
 60         }
 61 
 62         /// <summary>
 63         /// 新增保存
 64         /// </summary>
 65         /// <param name="student"></param>
 66         /// <returns></returns>
 67         [HttpPost]
 68         public JsonResult Save(Student student) {
 69            dataContext.Students.Add(student);
 70             dataContext.SaveChanges();
 71             if (student.Id > 0)
 72             {
 73                 return Json("Success");
 74             }
 75             else {
 76                return Json("Failure");
 77             }
 78         }
 79 
 80         /// <summary>
 81         /// 编辑保存
 82         /// </summary>
 83         /// <param name="student"></param>
 84         /// <returns></returns>
 85         [HttpPost]
 86         public JsonResult Save2(Student student) {
 87             var id = student.Id;
 88             if (id == 0)
 89             {
 90                 //新增
 91                 return Save(student);
 92             }
 93             else {
 94                 var tmp = dataContext.Students.FirstOrDefault(s => s.Id == id);
 95                 if (tmp != null) {
 96                     tmp.Name = student.Name;
 97                     tmp.Age = student.Age;
 98                     tmp.Class = student.Class;
 99                     tmp.Dept = student.Dept;
100                     tmp.Sex = student.Sex;
101                     tmp.No = student.No;
102                     int num = dataContext.SaveChanges();
103                     if (num > 0)
104                     {
105                         return Json("Success");
106                     }
107                     else {
108                         return Json("Failure");
109                     }
110                 }
111                 return Json("Error");
112             }
113         }
114 
115         /// <summary>
116         /// 删除
117         /// </summary>
118         /// <param name="id"></param>
119         /// <returns></returns>
120         [HttpPost]
121         public JsonResult Delete(int id) {
122             var tmp = dataContext.Students.FirstOrDefault(s => s.Id == id);
123             if (tmp != null)
124             {
125                 dataContext.Students.Remove(tmp);
126                 int num = dataContext.SaveChanges();
127                 if (num > 0)
128                 {
129                     return Json("Success");
130                 }
131                 else
132                 {
133                     return Json("Failure");
134                 }
135             }
136             return Json("Error");
137         }
138     }
139 }

创建视图

视图主要分为新增，查询，修改三个视图，如下所示：

1. 查询视图

  1 @{
  2     Layout = null;
  3 }
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head>
  7     <link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />
  8     <link rel="stylesheet" type="text/css" href="/css/text.css" media="screen" />
  9     <link rel="stylesheet" type="text/css" href="/css/grid.css" media="screen" />
 10     <link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
 11     <link rel="stylesheet" type="text/css" href="/css/nav.css" media="screen" />
 12     <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
 13     <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
 14     <link href="/css/table/demo_page.css" rel="stylesheet" type="text/css" />
 15     <!-- BEGIN: load jquery -->
 16     <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
 17     <script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
 18     <script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 19     <script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 20     <script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 21     <script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
 22     <script src="js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
 23     <script src="js/jquery-ui/jquery.ui.sortable.min.js" type="text/javascript"></script>
 24     <script src="js/table/jquery.dataTables.min.js" type="text/javascript"></script>
 25     <!-- END: load jquery -->
 26     <script type="text/javascript" src="js/table/table.js"></script>
 27     <script src="js/setup.js" type="text/javascript"></script>
 28     <script type="text/javascript">
 29         var timer; //监听器
 30         var winopen;  //B页面的打开事件
 31         //判断子窗口是否关闭，关闭刷新页面
 32         function IfWindowClosed() {
 33             //判断B页面打开事件
 34             if (winopen.closed == true) {
 35                 //执行A页面的相关方法操作
 36                 query();
 37                 //关闭监听器
 38                 window.clearInterval(timer);
 39             }
 40         }
 41         $(document).ready(function () {
 42             query();
 43             //查询按钮绑定事件
 44             $("#btnQuery").click(function () {
 45                 query();
 46             });
 47             $("#btnAdd").click(function () {
 48                 var url = "Student/Add";
 49                 winopen = window.open(url, '_target', "width=400,height=450,left=400,top=300");
 50                 //打开监听器
 51                 timer = window.setInterval("IfWindowClosed()", 500);
 52             });
 53             $("#btnEdit").click(function () {
 54                 var id = $("input[name='sckb']:checked").val();
 55                 var url = "Student/Edit/" + id;
 56                 winopen = window.open(url, '_target', "width=400,height=450,left=400,top=300");
 57                 //打开监听器
 58                 timer = window.setInterval("IfWindowClosed()", 500);
 59             });
 60             $("#btnDelete").click(function () {
 61                 var id = $("input[name='sckb']:checked").val();
 62                 if (id == null || id == "") {
 63                     alert("没有选择需要删除的项");
 64                 } else {
 65                     if (confirm("确定要删除吗？")) {
 66                         var url = "/Student/Delete/"+id;
 67                         
 68                         $.post(
 69                             url,
 70                             {
 71                                 
 72                             },
 73                             function (data, status) {
 74                                 //debugger;
 75                                 if (status == "success") {
 76                                     if (data == "Success") {
 77                                         query();
 78                                         alert("删除成功");
 79                                     } else {
 80                                         window.alert(data);
 81                                     }
 82                                 } else {
 83                                     window.alert("访问异常");
 84                                 }
 85                                 console.log("数据: \n" + data + "\n状态: " + status);
 86                             }
 87                         );
 88                     }
 89                 }
 90             });
 91         });
 92         function query() {
 93             var url = "/Student/Query";
 94             $.post(
 95                 url,
 96                 {
 97                     Name: $("#Name").val()
 98                 },
 99                 function (data, status) {
100                     //debugger;
101                     console.log("数据: \n" + data + "\n状态: " + status);
102                     $("#student tbody").empty();
103                     //初始化Table
104                     $.each(data, function (n, item) {
105                         var rowstyle = "odd gradeA";
106                         if (n % 2 == 0) {
107                             rowstyle = "even gradeA";
108                         }
109                         var row = "<tr class=\"" + rowstyle + "\"><td><input type='checkbox' name=\"sckb\" id='sckb" + item.id + "' value='" + item.id + "' onclick='javascript:chkClick(event)' /></td><td>" + item.no + "</td><td>" + item.name + "</td><td>" + item.age + "</td><td>" + (item.sex==true?"男":"女") + "</td><td>" + item.dept + "</td><td>大" + item.grade + "</td><td>" + item.class + "班</td></tr>";
110                         $("#student tbody").append(row);
111                     });
112                 }
113             );
114             $('.datatable').dataTable();
115         }
116 
117         function chkClick(e) {
118             
119             if ($(e.target).prop("checked")) {
120                 var id = $(e.target).val();
121                 $(e.target).parent().parent().css("background", "lightblue");
122                 $("input[name='sckb']").each(function (index, item) {//
123                     debugger;
124                     if ($(item).val() != id) {
125                         $(item).prop("checked", false);
126                         $(item).parent().parent().css("background", "none");
127                     }
128                 });
129             }
130         }
131     </script>
132 </head>
133 <body>
134     <div class="container_12">
135         <div class="grid_10">
136             <div class="box round first grid">
137                 <h2>学生信息查询</h2>
138                 <div>
139                     <span>姓名</span><input type="text" id="Name" name="Name" />
140                     <button class="btn btn-blue" id="btnQuery"><span></span>Query</button>
141                     <button class="btn btn-blue" id="btnAdd"><span></span>Add</button>
142                     <button class="btn btn-blue" id="btnEdit"><span></span>Edit</button>
143                     <button class="btn btn-blue" id="btnDelete"><span></span>Delete</button>
144                 </div>
145                 <div class="block">
146                     <table class="data display datatable" id="student">
147                         <thead>
148                             <tr>
149                                 <th>选择</th>
150                                 <th>学号</th>
151                                 <th>姓名</th>
152                                 <th>年龄</th>
153                                 <th>性别</th>
154                                 <th>专业</th>
155                                 <th>年级</th>
156                                 <th>班级</th>
157                             </tr>
158                         </thead>
159                         <tbody>
160 
161                         </tbody>
162                     </table>
163                 </div>
164             </div>
165         </div>
166     </div>
167 </body>
168 </html>

2. 新增视图

新增视图，主要用于创建学生信息，如下所示：

  1 @{
  2     Layout = null;
  3 }
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head>
  7     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8     <title>学生信息管理系统</title>
  9     <link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />
 10     <link rel="stylesheet" type="text/css" href="/css/text.css" media="screen" />
 11     <link rel="stylesheet" type="text/css" href="/css/grid.css" media="screen" />
 12     <link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
 13     <link rel="stylesheet" type="text/css" href="/css/nav.css" media="screen" />
 14     <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
 15     <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
 16     <link href="/css/fancy-button/fancy-button.css" rel="stylesheet" type="text/css" />
 17     <!--Jquery UI CSS-->
 18     <link href="/css/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
 19     <!-- BEGIN: load jquery -->
 20     <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
 21     <script type="text/javascript" src="/js/jquery-ui/jquery.ui.core.min.js"></script>
 22     <script src="/js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 23     <script src="/js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 24     <script src="/js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 25     <script src="/js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
 26     <!-- END: load jquery -->
 27     <!--jQuery Date Picker-->
 28     <script src="/js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 29     <script src="/js/jquery-ui/jquery.ui.datepicker.min.js" type="text/javascript"></script>
 30     <script src="/js/jquery-ui/jquery.ui.progressbar.min.js" type="text/javascript"></script>
 31     <!-- jQuery dialog related-->
 32     <script src="/js/jquery-ui/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
 33     <script src="/js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
 34     <script src="/js/jquery-ui/jquery.ui.draggable.min.js" type="text/javascript"></script>
 35     <script src="/js/jquery-ui/jquery.ui.position.min.js" type="text/javascript"></script>
 36     <script src="/js/jquery-ui/jquery.ui.resizable.min.js" type="text/javascript"></script>
 37     <script src="/js/jquery-ui/jquery.ui.dialog.min.js" type="text/javascript"></script>
 38     <script src="/js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 39     <script src="/js/jquery-ui/jquery.effects.blind.min.js" type="text/javascript"></script>
 40     <script src="/js/jquery-ui/jquery.effects.explode.min.js" type="text/javascript"></script>
 41     <!-- jQuery dialog end here-->
 42     <script src="/js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 43     <!--Fancy Button-->
 44     <script src="/js/fancy-button/fancy-button.js" type="text/javascript"></script>
 45     <script src="/js/setup.js" type="text/javascript"></script>
 46     <script type="text/javascript">
 47 
 48         $(document).ready(function () {
 49             //$('input[type="radio"]').fancybutton();
 50             $("#btnSave").click(function () {
 51                 save();
 52             });
 53         });
 54         function save() {
 55             var url = "/Student/Save";
 56             //alert($("input[name = 'Sex']:checked").val());
 57             var sex =Boolean(parseInt($("input[name = 'Sex']:checked").val()));
 58             //debugger;
 59             $.post(
 60                 url,
 61                 {
 62                     No:$("#No").val(),
 63                     Name: $("#Name").val(),
 64                     Age: $("#Age").val(),
 65                     Sex: sex,
 66                     Dept: $("#Dept").val(),
 67                     Grade: $("#Grade").val(),
 68                     Class: $("#Class").val(),
 69                 },
 70                 function (data, status) {
 71                     //debugger;
 72                     if (status == "success") {
 73                         if (data == "Success") {
 74                             window.close();
 75                         } else {
 76                             window.alert(data);
 77                         }
 78                     } else {
 79                         window.alert("访问异常");
 80                     }
 81                     console.log("数据: \n" + data + "\n状态: " + status);
 82                 }
 83             );
 84         }
 85     </script>
 86 </head>
 87 <body>
 88     <div class="container_12">
 89         <div class="grid_12">
 90             <div class="box round first fullpage">
 91                 <h2>新增学生信息</h2>
 92                 <div class="block ">
 93                     <table class="form">
 94                         <tr>
 95                             <td class="col1">
 96                                 <label>学号</label>
 97                             </td>
 98                             <td class="col2">
 99                                 <input type="text" id="No" name="No" />
100                             </td>
101                         </tr>
102                         <tr>
103                             <td class="col1">
104                                 <label>姓名</label>
105                             </td>
106                             <td class="col2">
107                                 <input type="text" id="Name" name="Name" />
108                             </td>
109                         </tr>
110                         <tr>
111 
112                             <td class="col1">
113                                 <label>年龄</label>
114                             </td>
115                             <td class="col2">
116                                 <input type="text" id="Age" name="Age" />
117                             </td>
118                         </tr>
119                         <tr>
120                             <td>
121                                 <label>性别</label>
122                             </td>
123                             <td>
124                                 <input type="radio" name="Sex" id="Male" value="1" />男
125                                 <input type="radio" name="Sex" id="Female" value="0" />女
126                             </td>
127                         </tr>
128                         <tr>
129 
130                             <td class="col1">
131                                 <label>专业</label>
132                             </td>
133                             <td class="col2">
134                                 <input type="text" id="Dept" name="Dept" />
135                             </td>
136                         </tr>
137                         <tr>
138                             <td>
139                                 <label>年级</label>
140                             </td>
141                             <td>
142                                 <select id="Grade" name="Grade">
143                                     <option value="一">一年级</option>
144                                     <option value="二">二年级</option>
145                                     <option value="三">三年级</option>
146                                     <option value="四">四年级</option>
147                                 </select>
148                             </td>
149                         </tr>
150                         <tr>
151                             <td>
152                                 <label>班级</label>
153                             </td>
154                             <td>
155                                 <select id="Class" name="Class">
156                                     <option value="一">一班</option>
157                                     <option value="二">二班</option>
158                                     <option value="三">三班</option>
159                                     <option value="四">四班</option>
160                                     <option value="五">五班</option>
161                                     <option value="六">六班</option>
162                                 </select>
163                             </td>
164                         </tr>
165                         <tr>
166                             <td colspan="2">
167                                 <button class="btn btn-blue" id="btnSave">Save</button>
168                                 <button class="btn btn-grey" type="reset" name="Reset" id="Reset">Reset</button>
169                             </td>
170                         </tr>
171                     </table>
172                 </div>
173             </div>
174         </div>
175     </div>
176 </body>
177 </html>

 

注意：如果采用ajax方式保存数据的话，form表单不可以使用，否则页面会刷新，导致页面无法达到预期的关闭效果。

3. 编辑视图

编辑视图，主要用于修改学生信息，与新增视图相像，存在略微不同，如下所示：

  1 @{
  2     Layout = null;
  3 }
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head>
  7     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  8     <title>学生信息管理系统</title>
  9     <link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />
 10     <link rel="stylesheet" type="text/css" href="/css/text.css" media="screen" />
 11     <link rel="stylesheet" type="text/css" href="/css/grid.css" media="screen" />
 12     <link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
 13     <link rel="stylesheet" type="text/css" href="/css/nav.css" media="screen" />
 14     <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
 15     <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
 16     <link href="/css/fancy-button/fancy-button.css" rel="stylesheet" type="text/css" />
 17     <!--Jquery UI CSS-->
 18     <link href="/css/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
 19     <!-- BEGIN: load jquery -->
 20     <script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
 21     <script type="text/javascript" src="/js/jquery-ui/jquery.ui.core.min.js"></script>
 22     <script src="/js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 23     <script src="/js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 24     <script src="/js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 25     <script src="/js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
 26     <!-- END: load jquery -->
 27     <!--jQuery Date Picker-->
 28     <script src="/js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 29     <script src="/js/jquery-ui/jquery.ui.datepicker.min.js" type="text/javascript"></script>
 30     <script src="/js/jquery-ui/jquery.ui.progressbar.min.js" type="text/javascript"></script>
 31     <!-- jQuery dialog related-->
 32     <script src="/js/jquery-ui/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
 33     <script src="js/jquery-ui/jquery.ui.mouse.min.js" type="text/javascript"></script>
 34     <script src="/js/jquery-ui/jquery.ui.draggable.min.js" type="text/javascript"></script>
 35     <script src="/js/jquery-ui/jquery.ui.position.min.js" type="text/javascript"></script>
 36     <script src="/js/jquery-ui/jquery.ui.resizable.min.js" type="text/javascript"></script>
 37     <script src="/js/jquery-ui/jquery.ui.dialog.min.js" type="text/javascript"></script>
 38     <script src="/js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 39     <script src="/js/jquery-ui/jquery.effects.blind.min.js" type="text/javascript"></script>
 40     <script src="/js/jquery-ui/jquery.effects.explode.min.js" type="text/javascript"></script>
 41     <!-- jQuery dialog end here-->
 42     <script src="/js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 43     <!--Fancy Button-->
 44     <script src="/js/fancy-button/fancy-button.js" type="text/javascript"></script>
 45     <script src="/js/setup.js" type="text/javascript"></script>
 46     <script type="text/javascript">
 47 
 48         $(document).ready(function () {
 49             //$('input[type="radio"]').fancybutton();
 50             $("#btnSave").click(function () {
 51                 save();
 52             });
 53         });
 54         function save() {
 55             var url = "/Student/Save2";
 56             var sex = Boolean(parseInt($("input[name = 'Sex']:checked").val()));
 57             $.post(
 58                 url,
 59                 {
 60                     Id: $("#Id").val(),
 61                     No:$("#No").val(),
 62                     Name: $("#Name").val(),
 63                     Age: $("#Age").val(),
 64                     Sex: sex,
 65                     Dept: $("#Dept").val(),
 66                     Grade: $("#Grade").val(),
 67                     Class: $("#Class").val(),
 68                 },
 69                 function (data, status) {
 70                     //debugger;
 71                     if (status == "success") {
 72                         if (data == "Success") {
 73                             window.close();
 74                         } else {
 75                             window.alert(data);
 76                         }
 77                     } else {
 78                         window.alert("访问异常");
 79                     }
 80                     console.log("数据: \n" + data + "\n状态: " + status);
 81                 }
 82             );
 83         }
 84     </script>
 85 </head>
 86 <body>
 87     <div class="container_12">
 88         <div class="grid_12">
 89             <div class="box round first fullpage">
 90                 <h2>编辑学生信息</h2>
 91                 <div class="block ">
 92                     
 93                     <input type="hidden" name="Id" id="Id" value="@Model.Id" />
 94                     <table class="form">
 95                         <tr>
 96                             <td class="col1">
 97                                 <label>学号</label>
 98                             </td>
 99                             <td class="col2">
100                                 <input type="text" id="No" name="No" value="@Model.No" />
101                             </td>
102                         </tr>
103                         <tr>
104                             <td class="col1">
105                                 <label>姓名</label>
106                             </td>
107                             <td class="col2">
108                                 <input type="text" id="Name" name="Name" value="@Model.Name" />
109                             </td>
110                         </tr>
111                         <tr>
112 
113                             <td class="col1">
114                                 <label>年龄</label>
115                             </td>
116                             <td class="col2">
117                                 <input type="text" id="Age" name="Age" value="@Model.Age" />
118                             </td>
119                         </tr>
120                         <tr>
121                             <td>
122                                 <label>性别</label>
123                             </td>
124                             <td>
125                                 <input type="radio" name="Sex" id="Male" value="1" @(Model.Sex?"checked":"") />男
126                                 <input type="radio" name="Sex" id="Female" value="0" @(Model.Sex?"":"checked") />女
127                             </td>
128                         </tr>
129                         <tr>
130 
131                             <td class="col1">
132                                 <label>专业</label>
133                             </td>
134                             <td class="col2">
135                                 <input type="text" id="Dept" name="Dept" value="@Model.Dept"  />
136                             </td>
137                         </tr>
138                         <tr>
139                             <td>
140                                 <label>年级</label>
141                             </td>
142                             <td>
143                                 <select id="Grade" name="Grade">
144                                     @{ var grades = new string[4] { "一", "二", "三", "四" };
145                                         foreach (var grade in grades)
146                                         {
147                                             if (Model.Grade.Equals(grade))
148                                             {
149                                                 <option value="@grade" selected><span>@grade</span>年级</option>
150                                             }
151                                             else
152                                             {
153                                                 <option value="@grade"><span>@grade</span>年级</option>
154                                             }
155 
156                                         }
157                                     }
158                                 </select>
159                             </td>
160                         </tr>
161                         <tr>
162                             <td>
163                                 <label>班级</label>
164                             </td>
165                             <td>
166                                 <select id="Class" name="Class">
167                                     @{ var Classes = new string[6] { "一", "二", "三", "四","五","六" };
168                                         foreach (var Class in Classes)
169                                         {
170                                             if (Model.Class.Equals(Class))
171                                             {
172                                                 <option value="@Class" selected=selected><span>@Class</span>班</option>
173                                             }
174                                             else
175                                             {
176                                                 <option value="@Class"><span>@Class</span>班</option>
177                                             }
178 
179                                         }
180                                     }
181                                 </select>
182                             </td>
183                         </tr>
184                         <tr>
185                             <td colspan="2">
186                                 <button class="btn btn-blue" id="btnSave">Save</button>
187                                 <button class="btn btn-grey" name="Reset" id="Reset">Reset</button>
188                             </td>
189                         </tr>
190                     </table>
191                     
192                 </div>
193             </div>
194         </div>
195     </div>
196 </body>
197 </html>

 

注意：如果采用ajax方式保存数据的话，form表单不可以使用，否则页面会刷新，导致页面无法达到预期的关闭效果。

数据库集成上下文DataContext

在DataContext中，增加学生模型的集合，如下所示：

 1 namespace SMS.Models
 2 {
 3     public class DataContext:DbContext
 4     {
 5         public DbSet<User> Users { get; set; }
 6 
 7         public DbSet<Menu> Menus { get; set; }
 8 
 9         public DbSet<Role> Roles { get; set; }
10 
11         public DbSet<UserRole> UserRoles { get; set; }
12 
13         public DbSet<RoleMenu> RoleMenus { get; set; }
14 
15         /// <summary>
16         /// 学生
17         /// </summary>
18         public DbSet<Student> Students { get; set; }
19 
20         public DataContext(DbContextOptions options) : base(options)
21         {
22 
23         }
24     }
25 }

构建数据

在数据库创建对应学生表，如下所示：

项目目录

关于项目的总体目录，如下所示：

 

 

 运行测试

在Visual Studio中运行示例代码，如下所示：

至此，学生信息系统系列文章已经完成，其他功能模块与学生信息管理大同小异，都是对数据的增删改查操作，不再单独赘述。本文旨在抛砖引玉，共同学习，一起进步。

关于JS中的Boolean

在本示例中，使用Javascript中的Boolean函数，关于Boolean函数，描述如下：

 注意：本示例中，性别的取法和转换，应该有误。引用源码时，请注意。

关于源码下载，可通过CSDN进行源码下载链接，亦可关注【老码识途】公众号，然后回复ASMS即可获得下载链接。如下所示：

 

 

 

备注

 元日【作者】王安石 【朝代】宋

爆竹声中一岁除，春风送暖入屠苏。

千门万户曈曈日，总把新桃换旧符。

posted @ 2022-01-18 22:55  老码识途呀  阅读(2027)  评论(2)  编辑  收藏  举报