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

本文轉載自查看原文 2022-01-09 17:13 1763 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】

頁面布局

主頁面中主要分為三部分上【header】，中【左側菜單欄，右側內容區域】，下【footer】，示意圖如下所示：

創建模型

在主頁面，左側的菜單需要根據不同的用戶進行不同的顯示，所以需要創建菜單-用戶-角色對應的模型，如下所示：

1. 菜單【Menu】模型

Menu模型，如下所示：

 1 namespace SMS.Models
 2 {
 3     /// <summary>
 4     /// 菜單管理
 5     /// </summary>
 6     public class Menu
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 菜單名稱
15         /// </summary>
16         public string Name { get; set; }
17 
18         /// <summary>
19         /// 菜單描述
20         /// </summary>
21         public string Description { get; set; }
22 
23         /// <summary>
24         /// 菜單路徑
25         /// </summary>
26         public string Url { get; set; }
27 
28         /// <summary>
29         /// 父ID
30         /// </summary>
31         public int? ParentId { get; set; }
32 
33         /// <summary>
34         /// 排序
35         /// </summary>
36         public int? SortId { get; set; }
37     }
38 }

2. 角色【Role】模型

角色模型，如下所示：

 1 namespace SMS.Models
 2 {
 3     /// <summary>
 4     /// 角色
 5     /// </summary>
 6     public class Role
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 角色名稱
15         /// </summary>
16         public string Name { get; set; }
17 
18         /// <summary>
19         /// 角色描述
20         /// </summary>
21         public string Description { get; set; }
22     }
23 }

3. 角色-菜單關聯模型

角色-菜單關聯模型【RoleMenu】，主要是將角色和菜單關聯起來，如下所示：

 1 namespace SMS.Models
 2 {
 3     /// <summary>
 4     /// 角色-菜單關聯
 5     /// </summary>
 6     public class RoleMenu
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 菜單IP
15         /// </summary>
16         public int MenuId { get; set; }
17 
18         /// <summary>
19         /// 角色ID
20         /// </summary>
21         public int RoleId { get; set; }
22     }
23 }

4. 用戶-角色模型

用戶-角色模型，主要是將用戶和角色關聯起來，如下所示：

 1 namespace SMS.Models
 2 {
 3     /// <summary>
 4     /// 用戶-角色模型
 5     /// </summary>
 6     public class UserRole
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 用戶ID
15         /// </summary>
16         public int UserId { get; set; }
17 
18         /// <summary>
19         /// 角色ID
20         /// </summary>
21         public int RoleId { get; set; }
22     }
23 }

5. 用戶權限模型

將以上幾種模型，查詢出來就是用戶所具備的權限，所以需要創建用戶權限模型，如下所示：

 1 namespace SMS.Models
 2 {
 3     /// <summary>
 4     /// 用戶-權限模型
 5     /// </summary>
 6     public class UserRight
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int Id { get; set; }
12 
13         /// <summary>
14         /// 角色名稱
15         /// </summary>
16         public string RoleName { get; set; }
17 
18         /// <summary>
19         /// 菜單名稱
20         /// </summary>
21         public string MenuName { get; set; }
22 
23         /// <summary>
24         /// 路徑
25         /// </summary>
26         public string Url { get; set; }
27 
28         /// <summary>
29         /// 父ID
30         /// </summary>
31         public int? ParentId { get; set; }
32 
33         /// <summary>
34         /// 排序
35         /// </summary>
36         public int? SortId { get; set; }
37     }
38 }

創建控制器

主頁面默認采用HomeController，如下所示：

 1 namespace SMS.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         private readonly ILogger<HomeController> _logger;
 6 
 7         private DataContext dataContext;
 8 
 9         public HomeController(ILogger<HomeController> logger, DataContext context)
10         {
11             _logger = logger;
12             dataContext = context;
13         }
14 
15         public IActionResult Index()
16         {
17             int? userId = HttpContext.Session.GetInt32("UserId");
18             //判斷是否登錄
19             if (userId != null)
20             {
21                 
22                 var user = dataContext.Users.FirstOrDefault(u=>u.Id== userId);
23                 if (user != null) {
24                     ViewBag.NickName = user.NickName;
25                     ViewBag.UserRights = GetUserRights();
26                 }
27                 return View();
28             }
29             else
30             {
31                 return Redirect("/Login");
32             }
33             
34         }
35 
36         public IActionResult Privacy()
37         {
38             return View();
39         }
40 
41         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
42         public IActionResult Error()
43         {
44             return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
45         }
46 
47         public List<UserRight> GetUserRights()
48         {
49             int? userId = HttpContext.Session.GetInt32("UserId");
50             if (userId != null)
51             {
52                 var query = from u in dataContext.UserRoles
53                             join r in dataContext.Roles on u.RoleId equals r.Id
54                             join x in dataContext.RoleMenus on r.Id equals x.RoleId
55                             join m in dataContext.Menus on x.MenuId equals m.Id
56                             where u.UserId == userId
57                             select new UserRight { Id=m.Id, RoleName = r.Name, MenuName = m.Name,  Url = m.Url, ParentId = m.ParentId, SortId=m.SortId };
58 
59                 return query.ToList();
60             }
61             return null;
62         }
63     }
64 }

創建視圖

主頁面視圖，位於Views/Home/Index.cshtml，如下所示：

  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     <!-- BEGIN: load jquery -->
 17 
 18     <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
 19     <script type="text/javascript" src="/js/jquery-ui/jquery.ui.core.min.js"></script>
 20     <script src="/js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
 21     <script src="/js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
 22     <script src="/js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
 23     <script src="/js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
 24     <!-- END: load jquery -->
 25     <script src="/js/setup.js" type="text/javascript"></script>
 26 
 27     <script type="text/javascript">
 28         $(document).ready(function () {
 29 
 30             //setupDashboardChart('chart1');
 31 
 32             setupLeftMenu();
 33 
 34             setSidebarHeight();
 35         });
 36 
 37     </script>
 38 
 39     <style type="text/css">
 40 
 41         #demo-side-bar {
 42             left: 90% !important;
 43             display: block !important;
 44         }
 45 
 46         #branding .floatright {
 47             margin-right: 130px !important;
 48         }
 49     </style>
 50 
 51 </head>
 52 <body>
 53     <div class="container_12">
 54 
 55         <div class="grid_12 header-repeat">
 56 
 57             <div id="branding">
 58 
 59                 <div class="floatleft">
 60 
 61                     <h2 style="color:white;margin-top:unset;">學生信息管理系統</h2>
 62                     <br />
 63                 </div>
 64 
 65                 <div class="floatright">
 66 
 67                     <div class="floatleft">
 68 
 69                         <img src="img/img-profile.jpg" alt="Profile Pic" />
 70                     </div>
 71 
 72                     <div class="floatleft marginleft10">
 73 
 74                         <ul class="inline-ul floatleft">
 75 
 76                             <li>Hello <a href="#">@ViewBag.NickName</a></li>
 77 
 78                             <li><a href="#">Logout</a></li>
 79 
 80                         </ul>
 81 
 82                         <br />
 83 
 84                         <span class="small grey">上次登錄: 3 小時前</span>
 85 
 86                     </div>
 87 
 88                 </div>
 89 
 90                 <div class="clear">
 91 
 92                 </div>
 93 
 94             </div>
 95 
 96         </div>
 97 
 98         <div class="clear">
 99 
100         </div>
101 
102         <div class="grid_12">
103 
104             <ul class="nav main">
105 
106                 <li class="ic-dashboard"><a href="#"><span>首頁</span></a> </li>
107 
108                 <li class="ic-form-style">
109                     <a href="javascript:"><span>學生管理</span></a>
110                     <ul>
111 
112                         <li><a href="form-controls.html">學生信息</a> </li>
113                     </ul>
114                 </li>
115                 <li class="ic-form-style">
116                     <a href="javascript:"><span>成績管理</span></a>
117                     <ul>
118 
119                         <li><a href="form-controls.html">成績信息</a> </li>
120                     </ul>
121                 </li>
122                 <li class="ic-notifications"><a href="notifications.html"><span>Notifications</span></a></li>
123 
124             </ul>
125 
126         </div>
127 
128         <div class="clear">
129 
130         </div>
131 
132         <div class="grid_2">
133 
134             <div class="box sidemenu">
135 
136                 <div class="block" id="section-menu">
137 
138                     <ul class="section menu">
139                         @{ 
140                         var UserRights = ViewBag.UserRights as List<UserRight>;
141                         //先取出一級菜單
142                         var menuItems = UserRights.Where((u) => u.ParentId == null).OrderBy(u => u.SortId);
143 
144                         foreach (var menuItem in menuItems)
145                         {
146                         <li>
147                             <a class="menuitem">@menuItem.MenuName</a>
148                             <ul class="submenu">
149                             @{ var sumMenuItems = UserRights.Where(s => s.ParentId == menuItem.Id).OrderBy(s => s.SortId);
150                                 foreach (var subMenuItem in sumMenuItems)
151                                 {
152                                 <li><a href="@subMenuItem.Url">@subMenuItem.MenuName</a> </li>
153                                 }
154                             }
155 
156                             </ul>
157                         </li> 
158                         }
159                         }
160                     </ul>
161 
162                 </div>
163 
164             </div>
165         </div>
166 
167         <div class="grid_10" style="height:600px;">
168             <iframe width="100%" height="100%">
169 
170             </iframe>
171         </div>
172 
173         <div class="clear">
174 
175         </div>
176     </div>
177     <div class="clear">
178 
179     </div>
180     <div id="site_info">
181 
182         <p style="text-align:center">
183 
184             Copyright <a href="#">學生信息管理系統</a>. All Rights Reserved By 小六公子. 2021-2022
185 
186         </p>
187     </div>
188 </body>
189 
190 </html>

構建數據

在示例中，需要構建數據，用於顯示菜單信息，數據表結構和模型保持一致。

1. 菜單表

菜單表，表結構及初始化數據，如下所示：

2. 角色表

角色表，表結構和初始化數據，如下所示：

3. 角色-菜單表

角色-菜單表，表示角色和菜單之間的對應關系。數據表結構和初始化數據，如下所示：

4. 用戶-角色表

用戶-角色表，主要用於配置用戶ID和角色ID之間的對應關系，表結構和初始化數據，如下所示：

數據庫集成DbContext

在示例中，通過Entity Framework Core來操作數據庫，如下所示：

 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         public DataContext(DbContextOptions options) : base(options)
16         {
17 
18         }
19     }
20 }

運行測試

通過以上步驟，主頁面已經開發完成，點擊運行進行測試，效果如下所示：

源碼下載鏈接

備注

本示例主要介紹學生信息管理系統的主頁面開發，其他功能，后續繼續更新，旨在拋磚引玉，一起學習，共同進步。

蝶戀花·欲減羅衣寒未去【作者】趙令畤【朝代】宋

欲減羅衣寒未去，不卷珠簾，人在深深處。殘杏枝頭花幾許。啼紅正恨清明雨。
盡日沈香煙一縷。宿酒醒遲，惱破春情緒。遠信還因歸燕誤。小屏風上西江路。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 C# ASP.NET Core開發學生信息管理系統（三） C# ASP.NET Core開發學生信息管理系統（一）學生信息管理系統學生信息管理系統 Python學生信息管理系統的開發學生信息管理系統學生信息管理系統（C語言） C語言編寫學生信息管理系統 C#簡單學生信息管理系統（C#課程設計） c#簡易學生信息管理系統