手机版

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

时间:2021-08-31 来源:互联网 编辑:宝哥软件园 浏览:

作为后端开发,前端意味着不能播放,所以我们通常会选择应用一些开源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。

摘要

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

版权声明:ASP.NET核心网应用第三方引导模板的方法教程是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。