C# ASP.NET Core開發學生信息管理系統（三）

本文轉載自查看原文 2022-01-18 22:55 1474 C#/ .Net/C#/WinForm/WPF/ 全棧開發/ 學生管理系統/ ASP.NET Core/ ASP.NET MVC

隨着技術的進步，跨平台開發已經成為了標配，在此大背景下，ASP.NET Core也應運而生。本文主要利用ASP.NET Core開發一個學生管理系統為例，簡述ASP.NET Core開發的常見知識點，前兩篇文章做了登錄功能和主頁面功能，本文繼續分享學生信息頁面的增刪改查功能。僅供學習分享使用，如有不足之處，還請指正。

涉及知識點

開發學生管理系統，涉及知識點，如下所示：

開發工具：Visual Studio 2019
目標框架：.Net 5.0
架構：MVC三層架構【Model-View-Controller】，關於ASP.NET MVC，可參考【ASP.NET MVC快速入門（一）】
關於主體框架的搭建，可參考前兩篇文章【C# 利用ASP.NET Core開發學生信息管理系統（一），C# 利用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 }