Last time we created a new template page for administrators.
This time, we will improve the template page, add styles and some basic components, and configure the UI style of the whole project.
1、 Introduce common CSS and JS files
Nuget is used for back-end library and Libman for front-end library
Right click the wwwroot folder and select Add / client side library
We use admin LTE as the front-end UI.
Enter the admin LTE search to automatically generate the recommended version number, as shown in the figure below. The installation path is in the wwwroot / lib / Admin LTE folder by default.
After the installation, you can see that the corresponding location already has the admin LTE related files.
And it will be generated in the root directory of the project libman.json Configuration file, we can directly modify this configuration file to facilitate the management of client libraries (such as adding, deleting libraries, modifying library version numbers, etc.), and the vs editor is also intelligent.
2、 Improve the administrator template page
Open views / shared/_ LayoutAdmin.cshtml
Firstly, the corresponding CSS and JS files are introduced
CSS in the head
JS into the body.
*JQuery and bootstrap already exist in the vs template, so we don’t need to manage it with Libman.
Modify the structure of the entire document
We divide the document into three parts: the title bar, the sidebar, and the content block.
Finally, we use a div to package these three parts to facilitate the expansion and collection of code.
Closely behind the body, the structure is as follows:
Let’s fill in these three parts step by step
Official websitehttps://adminlte.io/ Given the example code, we can paste and modify directly from the sample code to quickly complete the style of the front-end display page.
1. Title Bar
Because the admin LTE title bar will use some third-party icons, open the addresshttps://fontawesome.com/ Download.
(if the website cannot be opened, you can also search fontawesomefree to download from other websites)
We create a new plugins folder under wwwroot / lib / Admin LTE to store these components.
Add related references
We add two links to navigate to the two views generated by default for the new project. The final title bar code:
It is divided into two parts, logo and sidebar menu, as follows:
3. Content block
Finally, the content block.
3、 Using the administrator template page
1. New view use template page
Open controllers/ HomeController.cs File, add an action and corresponding view
Right click the method name and add view,
2. Run view and fine tune
Let’s adjust two small problems
If you fold the sidebar, the sidebar will disappear completely, as shown in the following figure:
We need to give it a width so that we can see the menu icon. The method is very simple. It is directly applied in the body. The effect of folding is as follows.
In addition, we add a bottom bar, and put some copyright information or something. The final code structure is as follows:
In this tutorial, we have completed the modification of UI template. Two points to note:
1. Learn to use Libman to manage front-end libraries.
2. Familiar with the basic structure of the front-end UI framework admin LTE, and skillfully modify it. For the students who are not familiar with the front end, using a set of mature UI framework can save a lot of time.
I wish you all progress in your study:)