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:

 

2. Sidebar

It is divided into two parts, logo and sidebar menu, as follows:

 

code:

 

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

Add action

 

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:

 

 

Final renderings

 

summary

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:)