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函数,描述如下:

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

备注

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

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

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

文章出处:https://www.cnblogs.com/hsiang/p/15820283.html
版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
上一篇:Microsoft Store 桌面应用发布流程(二)之提交应用
下一篇:记一次.Net Core程序启动失败的排查过程
评论列表

发表评论

评论内容
昵称:
验证码:
验证码
关联文章

C# ASP.NET Core开发学生信息管理系统
C# ASP.NET Core开发学生信息管理系统(二)
C# ASP.NET Core开发学生信息管理系统(一)
ASP.NET Core开发者学习路线图
ASP.NET Core CMS 架构建议:插件、主题与二次开发怎么落地
asp.net - 在 ASP.NET Core MVC 中嵌套 TagHelper
网站迁移纪实:从Web Form 到 Asp.Net Core (Abp vNext 自定义开发
AP.NET Core获得注入管理
ASP.NET Core官网教程,资料查找
Linux查看系统信息
.net Core项目 IIS部署运行异常信息输出
ASP.NET Core web API中使用Swagger/OpenAPI(Swashbuckle)
ASP.NET Core 使用 LESS
.NET5 ASP.NET Core 添加API限流
【推荐】Razor文件编译 ASP.NET Core
ASP.NET MVC和ASP.NET Core MVC中获取当前URL/Controller/Action
Cannot resolve scoped service from root provider ASP.NET Core
asp.net core 支持多种身份认证方式
ASP.NET MVC快速入门(一)
ASP.NET Core MVC 在过滤器ActionFilter中保存页面的生成的html静态页面文件

热门标签
.NET Core .NET Reactor ag-grid AI发布 api安全 ASP.NET Core C#DLL加密 C#播放声音 C#代码混淆 C#代码加密 ChromeDriver Codex DateTime DBeaver devexpress devTool DLL混淆 edge.js EF EFCore Electron element-ui el-form el-table excel FastReport FileStream FolderBrowerDialog FolderSelectDialog form提交 git gridcontrol gridview input javascript json字符串 JS转换对象JSON jwt JWT授权 linq log Math MCP mitmproxy MVC MySQL Navicat netstat nginx node_modules NSwag Nuget Nuget镜像 number PowerShell pyinstaller python pythoncom python爬虫 python抓包 pywin32 redis Requests-html RestSharp Selenium sql SQL Server Swagger to-cms Visual Studio VSCode vue VueRouter vue路由 VUE页面通讯 Webpack Windows Windows服务 winform wmi xlrd yaml YESCMS YESWEB开发框架 白象 表单提交 播放声音 打开URL 代码混淆 弹窗提醒 端口占用 对象转换 分布式 公共字典 机器码 进程排查 静态资源 开发指南 路由参数 密钥 配置教程 配置文件 权限 人工智能 任务 任务调度 日期间隔 日志 日志记录 省市区 授权验证 数据库 四舍五入 文案 文件读取 文件夹选择 文件目录选择 问题排查 行政区域数据 页面通讯 中间件 CSharp 事务锁 工单系统 并发控制 重复提交 CMS Markdig Markdown markdown-it marked 技术选型 VS Code 开发工具 源代码管理 版本控制 Docker PostgreSQL 时区 部署排查 CMS架构 EF Core 主题系统 二次开发 插件系统 容器 运维命令 镜像清理 Linux NAS 远程挂载 飞牛 fnOS S/4HANA SAP GUI SAP HANA SAP R/3 SAP入门 SAP版本 ERP SAP SAP MM 库存管理 物料管理 采购管理 入门教程 SAP S/4HANA SPRO 企业结构 采购组织 MM01 物料主数据 物料类型 BP分组 业务伙伴 供应商主数据 ME41 RFQ 库存物料 采购流程 ME51 消耗性物料 科目分配 采购申请 AC03 ML81N 外部服务 服务主数据 Business Partner SAP培训 ME51N MM模块 Lean Services MM-SRV 外部服务采购 PIR 供应来源 采购主数据 采购信息记录 ME31K 框架协议 计划协议 采购合同 ME01 供应来源确定 货源清单 MEQ1 供应源确定 配额安排 配额评分 MD04 MD21 MRP 计划文件 需求计划 批量程序 MD01N MD02 MRP Live MD05 MM 物料计划 优化采购 供应源 采购订单 ME2A 供应商确认 采购监控 Flexible Workflow 凭证释放 采购审批 释放策略 实地盘点 物料凭证 货物移动 MIGO 收货 移动类型 已撤回 供应商退货 货物发出 STO 库存转储 转移过账 生产订单 预留 GR/IR MIRO 供应商发票 物流发票校验 OMR2 税码 FI PP SD 实操教程 MRBR OMR6 发票差异 交货成本 后续借记 MI01 实物盘点 盘点差异 公司代码 工厂 组织结构 OMS2 主数据定制 自动科目确定 BP角色 CVI 伙伴确定 编号范围 凭证类型 字段选择 FBN1 OMBT OMC2 会计凭证 OMJJ BOM 委外加工 项目类别L MRKO 供应商寄售 特殊库存K MRKON PIPE Pipeline 特殊库存P ERS MRIS 发票计划 周期性结算 里程碑付款 变更追踪 版本管理 采购凭证 SFTP WebDAV 网盘 飞牛fnOS AMPL HERS MPN 中文教程 库存确定 可用性检查 缺件检查 Output Management 消息确定 输出确定 分割评估 库存计价 评估类别 评估类型 PB00 RM0000 条件技术 采购定价 MM-FI集成 OBYC 库存估价 文本类型 文本采用 EFB EVO MSV SU3 用户参数 发票校验 合同参照 履约保留款 特别总账 预付款 Fiori Launchpad SAP Fiori 应用导航 用户体验 LSMW LTMC Migration Cockpit 数据迁移 BRFplus OPD Output Control My Inbox 审批流程 灵活工作流 SAP PP 外部加工 SAP QM 检验批 质量信息记录 采购收货 SAP PM 维护BOM 维护订单 SAP SD SAP Service 端到端流程 MM模块培训 FI-MM集成 供应商管理 审批配置 FICO入门 SAP FICO 财务配置 供应商税务 预扣税 House Bank 银行对账 客户清账 应收账款 FI控制 验证与替代 印度 GST 税务配置 F110 FBZP EWM入门 SAP EWM 仓库管理 OX14 成本核算 物料评估 后勤配置 物料组 价值更新 数量更新 PP-PI 流程制造 生产计划 容差配置 SAP事务码 SAP基础 TCODE Basis 事务代码 MMNR 编号区间 采购实操 组织架构 OMSF SAP实操 FI配置 端口修改 密码设置 数据库配置 远程访问 ABAP基础 SAP ABAP 内表 变量定义 常量 数据类型 ABAP SAP开发 变量 基础语法 系统变量 结构体 字符串处理 循环语句 控制语句 DDIC SE11 数据字典 透明表 ABAP开发 ALE EDI IDoc 增强技术 ABAP内表 HASHED TABLE SORTED TABLE STANDARD TABLE 基本概念 性能优化 PARAMETERS SELECT-OPTIONS SELECTION-SCREEN 报表程序 选择屏幕 F4帮助 Report事件 输入校验 ABAP SQL ABAP语法 Open SQL SELECT 数据库访问 IKuai IP修改 PVE 网络配置 虚拟化
联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码