ASP.NET核心网应用第三方引导模板的方法教程

序

作为后端开发，前端意味着不能播放，所以我们通常会选择应用一些开源Bootstrap模板主题进行前端设计。那怎么应用呢？今天，我们将简单地在ASP.NET创建一个核心web MVC模板项目作为示例，以应用第三方Bootstrap Template——Admin LTE。

管理仪表板

1.创建ASP.NET核心MVC演示

在命令行上执行dotnet new MVC-n applybootstraptemplate创建一个预置的MVC模板项目。项目结构如下：

MVC演示结构

从项目结构来看，可以看到wwwroot目录包含css、images、js和lib目录，lib目录默认引用bootstrap和jquery相关包。因为是简单的模板项目，UI非常舒服。

2.下载AdminLte

目前，AdminLte正计划发布3.0版本的adminlte，但仍处于Alpha版本。我们下载AdminLTE-V2.4.3(本地下载)来使用它。

下载并解压缩的项目结构如下：

管理结构

3.替换模板

要基于AdminLTE进行开发，您只需要复制dist目录及其依赖的bower包。

第一步：我们清空wwwroot下的所有目录(我在这里暂时保留了images文件夹，稍后会用到)。

步骤2:然后将dist目录复制到wwwroot。

其依赖的bower包安装在bower_components目录中。我们不需要直接复制整个bower_components文件夹，只需要复制bower.json包定义文件即可。

第三步：将AdminLTE下的bower.json复制到ASP.NET的Core MVC的根目录下。

第四步：用VS2017打开项目后，我们可以看到VS2017已经可以识别卸载的Bower包了。

右键单击可恢复bower包。但是等等，我们将把bower包直接恢复到根目录，而不是wwwroot文件夹。

第五步：添加。bowerrc文件并配置软件包安装路径。这里我们指定wwwroot\plugins。(此处未指定为wwwroot\bower_components，这与原AdminLTE的目录结构一致，因为如果指定为wwwroot\bower_components，则在还原包后，默认情况下不会将bower_components包含在项目中。)

步骤6:恢复包。成功恢复后，我们会发现插件文件夹已经包含并显示在wwwroot目录中。

配置bower包安装路径

4.Modify _Layout.cshtml

接下来，我们将AdminLTE的预设起始页starter.html移植到我们的layout page _ layout.cshtml中。

主要有几点需要注意。

根据环境，配置css和js @ render body()@ render section(' scripts '，required: false)的加载。我们直接把starter.html的内容复制粘贴到_Layout.cshtml，然后修改上面三点。然后修改引用的css和js路径。修改后的截图如下：

updated _Layout.cshtml

updated _Layout.cshtml

最终效果

CTRL F5的渲染如下，目前为止我们已经成功完成了AdminLTE主题的应用。DEMO已经上传到Github。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。