ASP.NET Core Web App应用第三方Bootstrap模板的方法教程

引言

作为后端开发来说，前端表示玩不转，我们一般会选择套用一些开源的Bootstrap 模板主题来进行前端设计。那如何套用呢？今天就简单创建一个ASP.NET Core Web MVC 模板项目为例，来应用第三方Bootstrap Template——Admin LTE。

AdminLte Dashboard

1. 创建ASP.NET Core MVC Demo

命令行执行dotnet new mvc -n ApplyBootstrapTemplate，即可创建预置的MVC模板项目。项目结构如下图：

MVC Demo structure

从项目结构来看，我们可以看到wwwroot目录下包含了css、images、js、lib目录，其中lib目录默认引用了bootstrap、jquery相关包。因为是简单的模板项目，所以UI就很将就。

2. 下载AdminLte

目前AdminLte在计划发布AdminLTE 3.0版本，不过现在还处于Alpha版本。我们下载AdminLTE-V2.4.3 (本地下载)来使用。

下载后解压得到的项目结构如下：

AdminLte Structure

3. 替换模板

基于AdminLTE进行开发，仅需要复制dist目录，及其依赖的bower包就可以了。

第一步：我们清空wwwroot下的全部目录（我这边暂时保留了images文件夹，后面会用到）。

第二步：然后复制dist目录到wwwroot下。

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

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

第四步：使用VS2017打开项目后，我们可以看到VS2017已经可以识别到未安装的Bower包。

右键就可以还原bower包。不过先慢着，我们现在还原就会直接还原bower包到根目录下了，并没有还原bower包到wwwroot文件夹下。

第五步：新增.bowerrc文件，配置包安装路径即可。这里我们指定为了wwwroot\plugins。（这里没有指定为wwwroot\bower_components，与原始AdminLTE的目录结构保持一致，是因为如果指定为wwwroot\bower_components，还原包后bower_components默认不会包含在项目中。）

第六步：Restore Package，还原成功后，我们会发现plugins文件夹已包含显示在wwwroot目录下了。

配置bower包安装路径

4. 修改_Layout.cshtml

接下来我们将AdminLTE的预置起始页面starter.html移植进我们的布局页面_Layout.cshtml。
我们先来观察一下我们默认的布局页。

主要有以上几个地方需要注意。

  1. 根据环境配置css和js的加载
  2. @RenderBody()
  3. @RenderSection("Scripts", required: false)

我们直接暴力复制starter.html的内容复制粘贴到_Layout.cshtml，然后再将以上三个点进行修改即可。然后修改引用的css、js路径即可。修改后的截图如下：

updated _Layout.cshtml

updated _Layout.cshtml

最终效果

CTRL+F5运行效果图如下，至此我们成功完成AdminLTE主题的应用。DEMO已上传到Github。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 浅谈从ASP.NET Core2.2到3.0你可能会遇到这些问题

    趁着假期的时间所以想重新学习下微软的官方文档来巩固下基础知识.我们都知道微软目前已经发布了.NET Core3.0的第三个预览版,同时我家里的电脑也安装了vs2019.So,就用vs2019+.NET Core3.0来跟着做一下Contoso University这个WEB应用,但是在基于3.0进行操作的时候遇到了一些问题,所以我就查看了微软的<从 ASP.NET Core 迁移 2.2 到 3.0 预览版 2>这篇文档,就着今天遇到的问题,所以我整理下,希望对大伙有所帮助,当然大伙也可以直接

  • ASP.NET Core使用自定义验证属性控制访问权限详解

    ASP.NET Core使用自定义验证属性控制访问权限详解

    前言 大家都知道在应用中,有时我们需要对访问的客户端进行有效性验证,只有提供有效凭证(AccessToken)的终端应用能访问我们的受控站点(如WebAPI站点),此时我们可以通过验证属性的方法来解决. 本文将详细介绍ASP.NET Core使用自定义验证属性控制访问权限的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 一.public class Startup的配置: //启用跨域访问(不同端口也是跨域) services.AddCors(options

  • Centos7+Docker+Jenkins+ASP.NET Core 2.0自动化发布与部署的实现

    前言 Docker一直很火热,一直想把原本的Jenkins自动部署工具搬到Docker上面,无奈今年一直忙于各种事情,迟迟未实施这个事情,正好迎来了dotnet core 2.0 的正式发布,升级项目的同时,顺便直接将Jenkins搬到Docker上.为什么要写这篇文章呢?因为找过相关的资料,大多数文章都是基于Ubuntu 安装.net core 又或者 GitLab 进行持续集成 自动部署等等等,并未有人尝试过Centos7.3 上部署 Jenkins 并且 构建 ASP.NET CORE 2

  • asp.net core集成MongoDB的完整步骤

    asp.net core集成MongoDB的完整步骤

    一.前言及MongoDB的介绍 最近在整合自己的框架,顺便把MongoDBD的最简单CRUD重构一下作为组件化集成到asp.net core项目中,当然此篇文章中没有讲解mongodb的集群部署,等有机会分享一下. 首先,我们在MongoDB的官方文档中看到,MongoDb的2.4以上的For .Net的驱动是支持.Net Core 2.0的. 针对MongoDB,我想大家应该不陌生,没有用过也有听过. 1.mongodb是什么? MongoDB是一个基于分布式文件存储的数据库,为web应用提供

  • ASP.NET Core Mvc中空返回值的处理方法详解

    ASP.NET Core Mvc中空返回值的处理方法详解

    前言 如果你是一个初学者开始学习 ASP.NET 或 ASP.NET MVC, 你可能并不知道什么是. net Framework和. net ore.不用担心!我建议您看下官方文档https://docs.microsoft.com/zh-cn/aspnet/index , 您可以轻松地看到比较和差异. .NET Core MVC在如何返回操作结果方面非常灵活的. 你可以返回一个实现IActionResult接口的对象, 比如我们熟知的ViewResult, FileResult, Conte

  • Asp.NET Core 如何调用WebService的方法

    0.使用背景 因为现在的项目都是基于 .NET Core 的,但是某些需要调用第三方的 WebService 服务,故有了此文章.其基本思路是通过微软提供的 Svcutil 工具生成代理类,然后通过 System.ServiceModel 来调用代理类所提供的对象与方法. 1.配置准备 1.1 新建并编辑项目 首先新建一个新的 .NET Core 控制台程序,通过命令行窗口或者 Powershell 执行以下命令新建一个项目. dotnet new console 然后编辑项目文件 WebSer

  • asp.net core项目中如何使用html文件

    前言 大家应该都知道,在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台 输入install-package Microsoft.aspnetcore.staticfiles 进行添加 ASP.NET Core static files middleware. Includes middleware for serving static files, directory browsing, and default files. 在S

  • 详解ASP.NET Core WebApi 返回统一格式参数

    业务场景: 业务需求要求,需要对 WebApi 接口服务统一返回参数,也就是把实际的结果用一定的格式包裹起来,比如下面格式: { "response":{ "code":200, "msg":"Remote service error", "result":"" } } 具体实现: using Microsoft.AspNetCore.Mvc; using Microsoft.AspNe

  • ASP.NET Core DI手动获取注入对象的方法

    依赖注入简单介绍: 依赖注入(Dependency injection , DI)是一种实现对象及其合作者或依赖项之间松散耦合的技术.将类用来执行其操作的这些对象以某种方式提供给该类,而不是直接实例化合作者或使用静态引用. ASP.NET Core DI 一般使用构造函数注入获取对象,比如在ConfigureServices配置注入后,通过下面方式获取: private IValueService _valueService; public ValueController(IValueServi

  • ASP.NET Core2读写InfluxDB时序数据库的方法教程

    前言 在我们很多应用中会遇到有一种基于一系列时间的数据需要处理,通过时间的顺序可以将这些数据点连成线,再通过数据统计后可以做成多纬度的报表,也可通过机器学习来实现数据的预测告警.而时序数据库就是用于存放管理这种有着时间顺序数据的,时序数据库一般都支持时序数据的快速写入.持久化.多纬度的聚合查询等基本功能. InfluxDB简介 InfluxDB是一个基于时间序列数据而开发的高性能数据存储平台,它可以对时序数据进行高吞吐量的摄取.压缩和实时查询.InfluxDB是用Go语言编写的,它会编译成一个没

随机推荐