ASP.NET Core basic series(8) ASP.NET Core and Bootstrap
As a back-end development, the front-end indicates that the game does not turn, we generally choose to apply some open source Bootstrap template theme for front-end design. How to apply it? Today, simply create an ASP.NET Core Web MVC template project as an example to apply a third-party Bootstrap Template –
1. Create ASP.NET Core MVC Demo
The command line execution dotnet new mvc -n ApplyBootstrapTemplateallows you to create a preset MVC template project. The project structure is as follows:
MVC Demo structure
From the project structure point of view, we can see that the wwwroot directory contains css, images, js, lib directory, which lib directory references bootstrap, jquery related packages by default. Because it is a simple template project, the UI will be very good.
2. Download AdminLte
Currently AdminLte is planning to release AdminLTE 3.0, but it is still in Alpha. We
The structure of the project obtained after downloading is as follows:
3. Replace the template
Based on AdminLTE development, you only need to copy the dist directory and its dependent bower package.
The first step: we empty all the directories under wwwroot (I temporarily keep the images folder, which will be used later).
Step 2: Then copy the dist directory to wwwroot.
The bower package it depends on is installed in the bower_components directory. We don’t need to copy the entire bower_components folder directly, we can copy the bower.json package definition file.
The third step: copy the bower.json under AdminLTE to the ASP.NET Core Mvc root directory.
Step 4: After opening the project with VS2017, we can see that VS2017 can recognize the Bower package that is not installed.
Right click to restore the bower package. But first slow, we will restore the bower package directly to the root directory, and did not restore the bower package to the wwwroot folder.
Step 5: Add the .bowerrc file and configure the package installation path. Here we specify as wwwroot\plugins. (Not specified here as wwwroot\bower_components, consistent with the original AdminLTE directory structure, because if specified as wwwroot\bower_components, bower_components will not be included in the project by default after restoring the package.)
Step 6: Restore Package, after the restore is successful, we will find that the plugins folder is included in the wwwroot directory.
Configure the bower package installation path
4. Modify _Layout.cshtml
Next we will transplant the AdminLTE preset start page starter.html into our layout page _Layout.cshtml.
Let’s first take a look at our default layout page.
There are mainly several places that need attention.
- Configure css and js loading according to the environment
- @RenderSection(“Scripts”, required: false)
We directly copy and paste the contents of starter.html into _Layout.cshtml, and then modify the above three points. Then modify the referenced css, js path. The modified screenshot is as follows:
The CTRL+F5 running effect diagram is as follows, and we have successfully completed the application of the AdminLTE theme. DEMO has been uploaded to