隨著技術的進步，跨平臺開發已經成為了標配，在此大背景下，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="https://www.cnblogs.com/hsiang/archive/2022/01/18/css/ie6.css" media="screen" /><![endif]--> 13 <!--[if IE 7]><link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/hsiang/archive/2022/01/18/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='https://www.cnblogs.com/hsiang/archive/2022/01/18/" + 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="https://www.cnblogs.com/hsiang/archive/2022/01/18/css/ie6.css" media="screen" /><![endif]--> 15 <!--[if IE 7]><link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/hsiang/archive/2022/01/18/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($("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 <form> 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" /> 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" /> 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" /> 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" />男 126 <input type="radio" name="Sex" id="Female" value="0" />女 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" /> 136 </td> 137 </tr> 138 <tr> 139 <td> 140 <label>年級</label> 141 </td> 142 <td> 143 <select id="Grade" name="Grade"> 144 <option value="一">一年級</option> 145 <option value="二">二年級</option> 146 <option value="三">三年級</option> 147 <option value="四">四年級</option> 148 </select> 149 </td> 150 </tr> 151 <tr> 152 <td> 153 <label>班級</label> 154 </td> 155 <td> 156 <select id="Class" name="Class"> 157 <option value="一">一班</option> 158 <option value="二">二班</option> 159 <option value="三">三班</option> 160 <option value="四">四班</option> 161 <option value="五">五班</option> 162 <option value="六">六班</option> 163 </select> 164 </td> 165 </tr> 166 <tr> 167 <td colspan="2"> 168 <button class="btn btn-blue" id="btnSave">Save</button> 169 <button class="btn btn-grey" type="reset" name="Reset" id="Reset">Reset</button> 170 </td> 171 </tr> 172 </table> 173 </form> 174 </div> 175 </div> 176 </div> 177 </div> 178 </body> 179 </html>
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="https://www.cnblogs.com/hsiang/archive/2022/01/18/css/ie6.css" media="screen" /><![endif]--> 15 <!--[if IE 7]><link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/hsiang/archive/2022/01/18/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($("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 <form method="post"> 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 </form> 192 </div> 193 </div> 194 </div> 195 </div> 196 </body> 197 </html>
資料庫集成背景關系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中運行示例代碼，如下所示：
至此，學生資訊系統系列文章已經完成，其他功能模塊與學生資訊管理大同小異，都是對資料的增刪改查操作，不再單獨贅述，本文旨在拋磚引玉，共同學習，一起進步，
備注
元日【作者】王安石 【朝代】宋
爆竹聲中一歲除，春風送暖入屠蘇，
千門萬戶曈曈日，總把新桃換舊符，
作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文著作權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段宣告，且在文章頁面明顯位置給出原文連接，謝謝，
關注個人公眾號，定時同步更新技術及職場文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/415173.html
標籤：.NET技术