Permission management system for Asp. Net Core (1) Using AdminLTE to build a front-end,

Permission management system for Asp. Net Core (1) Using AdminLTE to build a front-end,

0 Asp. Net Core: permission management system (0)

1 Asp. Net Core project practice-permission management system (1) Use AdminLTE to build a front-end

2 Asp. Net Core project practice-permission management system (2) entity Design

Github Source Code address

0. layout page, start page, and error page. 0.0 layout page

Using a layout page is equivalent to a master page, such as the title area above, the left navigation menu area, the copyright notice and Status display area below, and general js and css references, which are centrally placed on the layout Page Management, for specific function pages, you only need to pay attention to the layout of your own unique interface elements.

Create layout page

Create a Shared folder under the Views folder, and create an MVC view Layout page named "_ Layout. cshtml" under the folder.

<! DOCTYPE html>

Use of layout pages

To use the Layout page, you only need to specify the Layout of the page. For example, you only need to add the following code on the page to Index. cshtml in the Home created in the preceding section.

@ {// Layout = "~ /Views/Shared/_ Layout. cshtml ";}< h1> Hello, Asp. Net Core MVC 
At this point, we run the program and have successfully used the layout page.
@ {Layout = "_ Layout ";}
Now, the layout page can be successfully used by removing some reference code from the layout page in the Home/Index. cshtml page header and running the program.
Disable the layout page
For some interfaces that do not require uniform layout pages, such as logon and registration interfaces, you can add the following code in the header of the page to disable layout pages.
@{    Layout = null;}
0.2 error page
Development Environment error page
Asp.net Core provides a unified error handling mechanism. In the Configure method of Startup. cs, the following error handling code is added by default.
If (env. IsDevelopment () {// Exception Handling app. usemediaexceptionpage ();}
Modify the Index method in HomeController to directly throw an exception and perform a test.
Public IActionResult Index () {throw new Exception ("Exception"); // return View ();}
Debug and run the program in the development environment. The following result page is displayed. The error page displays detailed error information, which helps us quickly locate and solve the error.
Public void Configure (IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {loggerFactory. addConsole (); if (env. isDevelopment () {// Exception Handling app in the development environment. useDeveloperExceptionPage ();} else {// Exception Handling app in the production environment. useExceptionHandler ("/Shared/Error");} // use the static file app. useStaticFiles (); // use Mvc to set the default route app. useMvc (routes => {routes. mapRoute (name: "default", template: "{controller = Home}/{ac Tion = Index}/{id ?} ");});}
In the Controllers folder, create a controller named SharedController that contains the following content.
public class SharedController : Controller {     // GET: /<controller>/     public IActionResult Error()     {         return View();     } }
Create an Error page named Error. cshtml in the Shared file and modify the Error. cshtml content to the following code:
<P> I am a very friendly and beautiful error page. </P>
Run the program in a simulated production environment (see the second method of running the program using the Kestrel service in the previous article, or directly publish and deploy the program on IIS). The result is as follows:
{"Name": "asp.net", "private": true, "dependencies": {"bootstrap": "3.3.6", "font-awesome": "4.6.1 "}}
2. Use the Bower visualization Manager
Right-click the Bower manager and choose manage Bower package ". Search for the required package and click Install.
"Dependencies": {"Microsoft. NETCore. app ": {" version ":" 1.0.0 "," type ":" platform "}," Microsoft. aspNetCore. diagnostics ":" 1.0.0 "," Microsoft. aspNetCore. server. IISIntegration ":" 1.0.0 "," Microsoft. aspNetCore. server. kestrel ":" 1.0.0 "," Microsoft. extensions. logging. console ":" 1.0.0 "," Microsoft. aspNetCore. mvc ":" 1.0.0 "," Microsoft. aspNetCore. staticFiles ":" 1.0.0 "},
Add the following code to the Configure method of Startup. cs.
// Use static file app. UseStaticFiles ();
3. Use AdminLTE
AdminLTE is a full response management template. Templates are easy to customize Based on the Bootstrap3 framework. Suitable for multiple screen resolutions, from small mobile devices to large desktops. Multiple built-in pages, including dashboard, mailbox, calendar, screen lock, logon and registration, 404 error, 500 error, and so on. The most important thing is that it is open-source and free. We can use it as much as possible. The latest version is 2.3.6. You can search for AdminLTE and download it from the official website.
3.0 add AdminLTE-related core files to the Project
Add the js, css, and images folders under wwwroot.
1/AdminLTE-2.3.6/dist/js under the app. js and app. min. js two files copy to the wwwroot/js folder.
2 Copy all files under/AdminLTE-2.3.6/dist/css to the wwwroot/css folder.
3 copy all files under/AdminLTE-2.3.6/dist/img to the wwwroot/images folder.
3.1 _ Layout. cshtml Layout page Modification
Add css and js references related to AdminLTE
<Head> <title> permission management system </title> <! -- Tell the browser to be responsive to screen width --> <meta content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no "name =" viewport "> <link rel =" stylesheet "href = "~ /Lib/bootstrap/dist/css/bootstrap.css "> <link rel =" stylesheet "href = "~ /Lib/font-awesome/css/font-awesome.css "> <link rel =" stylesheet "href = "~ /Css/AdminLTE.css "> <! -- Skin --> <link rel = "stylesheet" href = "~ /Css/skins/skin-blue.css "> 
<script src="~/lib/jquery/dist/jquery.js"></script><script src="~/lib/bootstrap/dist/js/bootstrap.js"></script><script src="~/js/app.js"></script>
Modify the code of the menu Department
<Ul class = "sidebar-menu"> <li class = "header"> permission management </li> <! -- Optionally, you can add icons to the links --> <li class = "active"> <a href = "#"> <I class = "fa-link"> </I> <span> Organization </span> </a> </li> <a href = "#"> <I class = "fa-link"> </I> <span> role management </span> </a> </li> <a href = "#"> <I class = "fa-link "> </I> <span> User management </span> </a> </li> <a href =" # "> <I class =" fa fa-link "> </I> <span> function management </span> </a> </li> <a href =" # "> <I class = "fa-link"> </I> <span> permission management </span> </a> </li> @ * <li class = "treeview"> <a href = "#"> <I class = "fa-link"> </I> <span> Multilevel </span> <span class = "pull-right-container "> <I class =" fa-angle-left pull-right "> </I> </span> </a> <ul class =" treeview-menu "> <li> <a href = "#"> Link in level 2 </a> </li> <a href = "#"> Link in level 2 </ a> </li> </ul> </li> * @ </ul>
Complete code can be obtained from github.
At this time, we run our program, and the home page has become quite beautiful.
@ {Layout = null ;}<! DOCTYPE html> 
3. Change the logon page to the default page.
Modify the Configure method of Startup. cs and set the default route to system logon.
// Use Mvc to set the default route to the system login app. useMvc (routes => {routes. mapRoute (name: "default", template: "{controller = Login}/{action = Index}/{id ?} ");});
Run the system. By default, the logon interface is displayed.

Click Log On To Go To The system homepage.
4. Summary
This time, we mainly created a general system layout page, a start page, and an error page, and then added the system front-end dependency package using the Bower manager to enable static files, at last, AdminLTE is used to implement the system logon page and main interface layout.