基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

说明:

.NET Core版本为:2.2 AdminLTE版本为:2.4.18 Bootstrap版本为:3.4.1 font-awesome版本为:4.7.0

1、新建项目:AdminLteDemo,添加区域Admin 在Areas/Admin/Views文件夹添加文件并分别添加如下代码:_ViewImports.cshtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewStart.cshtml

@{	Layout = "_Layout";	
}

在Startup类中添加对区域路由的代码如下:

app.UseMvc(routes =>	
{	routes.MapRoute(	name: "areas",	template: "{area:exists}/{controller=HomeManagement}/{action=Index}/{id?}");	routes.MapRoute(	name: "default",	template: "{controller=Home}/{action=Index}/{id?}");	});

在Areas/Admin/Contorllers文件夹中添加两个控制器 HomeManagementController:

[Area("Admin")]	
public class HomeManagementController : Controller	
{	public IActionResult Index()	{	return View();	}	
}

StudentManagementController:

[Area("Admin")]	
public class StudentManagementController : Controller	
{	public IActionResult Index()	{	return View();	}	
}

使用libman添加对adminlte、bootstrap和font-awesome的引用

注意:bootstrap 3.*版本为twitter-bootstrap

在Areas/Admin/Views添加Shared文件夹,并添加_Layout.cshtml文件

<!DOCTYPE html>	
<html>	
<head>	<meta charset="utf-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge" />	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />	<title>@ViewBag.Title</title>	<link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.css" />	<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />	<link rel="stylesheet" href="~/lib/admin-lte/css/AdminLTE.css" />	<link rel="stylesheet" href="~/lib/admin-lte/css/skins/_all-skins.css" />	<link rel="stylesheet" href="~/lib/iCheck/skins/flat/blue.css" />	
</head>	
@{	var controller = (string)ViewContext.RouteData.Values["Controller"];	
}	
<body class="hold-transition skin-blue sidebar-mini">	<div class="wrapper">	<header class="main-header">	<a href="#" class="logo">	<span class="logo-mini"><b>A</b>LT</span>	<span class="logo-lg"><b>Admin</b>LTE</span>	</a>	<nav class="navbar navbar-static-top">	<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">	<span class="sr-only">切换导航</span>	</a>	<div class="navbar-custom-menu">	<ul class="nav navbar-nav"></ul>	</div>	</nav>	</header>	<aside class="main-sidebar">	<section class="sidebar">	<div class="user-panel">	<div class="pull-left image">	<img src="~/lib/admin-lte/img/user2-160x160.jpg" class="img-circle" alt="User Image" />	</div>	<div class="pull-left info">	<p>Alexander Pierce</p>	<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>	</div>	</div>	<!-- Search Form -->	<form action="#" method="post" class="sidebar-form">	<div class="input-group">	<input type="text" name="q" class="form-control" placeholder="Search..." />	<span class="input-group-btn">	<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>	</span>	</div>	</form>	<!-- /. Search Form -->	<!-- sidebar menu: : style can be found in sidebar.less -->	<ul class="sidebar-menu" data-widget="tree">	<li class="header">主导航</li>	@{	var mainList = new List<string>()	{	"HomeManagement"	};	var mainActive = mainList.Contains(controller) ? "active" : "";	}	<li class="@mainActive treeview">	<a href="#">	<i class="fa fa-dashboard"></i><span>Home Management</span>	<span class="pull-right-container">	<i class="fa fa-angle-left pull-right"></i>	</span>	</a>	<ul class="treeview-menu">	<li @Html.Raw(controller == "HomeManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="HomeManagement"><i class="fa fa-circle-o"></i>Home Index</a></li>	</ul>	</li>	@{	var studentList = new List<string>()	{	"StudentManagement"	};	var studentActive = studentList.Contains(controller) ? "active" : "";	}	<li class="@studentActive treeview">	<a href="#">	<i class="fa fa-dashboard"></i><span>Student Management</span>	<span class="pull-right-container">	<i class="fa fa-angle-left pull-right"></i>	</span>	</a>	<ul class="treeview-menu">	<li @Html.Raw(controller == "StudentManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="StudentManagement"><i class="fa fa-circle-o"></i>Student Index</a></li>	</ul>	</li>	<li class="treeview">	<a href="#">	<i class="fa fa-files-o"></i>	<span>Layout Options</span>	<span class="pull-right-container">	<span class="label label-primary pull-right">4</span>	</span>	</a>	<ul class="treeview-menu">	<li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>	<li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>	<li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>	<li><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>	</ul>	</li>	</ul>	</section>	</aside>	<div class="content-wrapper">	@RenderBody()	</div>	<footer class="main-footer">	<div class="pull-right hidden-xs">	<b>Version</b> 0.0.1	</div>	<strong>Copyright &copy; @DateTime.Now.Year  </strong> All rights reserved.	</footer>	</div>	
<script src="~/lib/jquery/dist/jquery.js"></script>	
<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>	
<script src="~/lib/admin-lte/js/adminlte.js"></script>	
</body>	
</html>

对HomeManagementController的action添加对应的视图文件,代码如下:

@{	ViewData["Title"] = "Index";	
}	
<section class="content-header">	<h1>Home Management Index</h1>	
</section>

对StudentManagementController的action添加对应的视图文件,代码如下:

@{	ViewData["Title"] = "Index";	
}	
<section class="content-header">	<h1>Student Management Index</h1>	
</section>


运行效果图

640?wx_fmt=png

640?wx_fmt=png

这种方法比较笨,后期优化功能

640?wx_fmt=jpeg


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/313649.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring boot——起步依赖

一、起步依赖 1、是什么 本质上是一个Maven项目对象模型&#xff08;Project Object Model&#xff0c; POM&#xff09;&#xff0c; 定义了对其他库的传递依赖&#xff0c;这些东西加在一起即支持某项功能。 比如&#xff1a; spring-boot-dependencies^ spring-boot-pare…

[翻译] ASP.NET Core 3.0 的新增功能

全文翻译自微软官方文档英文版 Whats new in ASP.NET Core 3.0本文重点介绍了 ASP.NET Core 3.0 中最重要的更改&#xff0c;并提供相关文档的连接。BlazorBlazor 是 ASP.NET Core 中的一个新的框架&#xff0c;用于使用 .NET 构建交互式的客户端 Web UI&#xff1a;使用 C# 而…

Convolution(2021牛客暑期多校训练营4)

Convolution 定义a⊕babgcd⁡(a,b)2a \oplus b \frac{a \times b}{\gcd(a, b) ^ 2}a⊕bgcd(a,b)2ab​&#xff0c;bm∑i1n∑j1naijc[i⊕jm]b_m \sum\limits_{i 1} ^{n} \sum\limits_{j 1} ^{n}a_i \times j ^ c [i \oplus j m]bm​i1∑n​j1∑n​ai​jc[i⊕jm]&#xff0…

Sprig boot自动配置

1、概述 Spring Boot是Spring旗下众多的子项目之一&#xff0c;其理念是约定优于配置&#xff0c;它通过实现了自动配置&#xff08;大多数用户平时习惯设置的配置作为默认配置&#xff09;的功能来为用户快速构建出标准化的应用。Spring Boot的特点可以概述为如下几点&#x…

E. Mocha and Stars(莫比乌斯反演、简单dp)

E. Mocha and Stars ∑a1l1r1∑a2l2r2⋯∑anlnrn[a1a2⋯an≤m][gcd⁡(a1,a2,…,an)1]\sum_{a_1 l_1} ^{r_1} \sum_{a_2 l_2} ^{r_2} \dots \sum_{a_n l_n} ^{r_n} [a_1 a_2 \dots a_n \le m][\gcd(a_1, a_2, \dots, a_n) 1]\\ a1​l1​∑r1​​a2​l2​∑r2​​⋯an​ln…

.NET Core 3.0稳定版发布

一年一度的 .NET 开发者盛会 .NET Conf 2019 已正式开始了&#xff08;举办时间为 9.23-9.25&#xff09;。大会第一天最重磅也是最激动人心的消息莫过于 .NET Core 3.0 稳定版的发布。.NET 项目管理总监 Scott Hunter 在大会宣布了这则消息&#xff0c;并在主题演讲环节围绕 .…

深入理解 Spring Boot Starters 原理(手写Spring boot Start)

一、Spring Boot Starter诞生原因 Spring Boot Starter是在SpringBoot组件中被提出来的一种概念&#xff0c;stackoverflow上面已经有人概括了这个starter是什么东西&#xff0c;想看完整的回答戳这里 Starter POMs are a set of convenient dependency descriptors that you …

FFT字符串匹配(解决通配符问题)

FFT字符串匹配 定义字符串下标从000&#xff0c;开始&#xff0c;有文本串AAA长度为nnn&#xff0c;模式串BBB长度为mmm&#xff0c;我们可以考虑一个函数f(x,y)A(x)−B(y)f(x, y) A(x) - B(y)f(x,y)A(x)−B(y)。 我们设F(x)(x≥m−1)∑i0m−1f(x−m1i,i)F(x)(x \ge m - 1) …

记一次中小公司的研发问题

作者&#xff1a;zollty&#xff0c;资深程序员和架构师&#xff0c;私底下是个爱折腾的技术极客&#xff0c;架构师社区合伙人&#xff01;一、一些不好的现状&#xff0c;及对应的改进方法1、前后端代码绑定在一起&#xff0c;很难维护&#xff0c;前端UI做得太差&#xff0c…

命令行操作mysql

1、通过命令行连接mysql&#xff1a; 1、输入命令&#xff1a;mysql -h localhost&#xff08;服务IP地址&#xff09; -u root&#xff08;用户名&#xff09; -P 3306&#xff08;服务端口&#xff09;-p 2、输入密码 2、显示数据库、表&#xff1a; show databases; //…

2021CCPC华为云挑战赛:HDU 7091 重叠的子串(SAM + 线段树合并)

重叠的子串 给定一个长度为n(1≤∣s∣≤105)n(1 \le \mid s \mid \le 10 ^ 5)n(1≤∣s∣≤105)的只由小写字母构成的字符串sss&#xff0c;有m,(1≤m≤106)m, (1 \le m \le 10 ^ 6)m,(1≤m≤106)个询问&#xff1a; 每次询问给定l,rl, rl,r&#xff0c;问sss是否存在一个字串…

ASP.NET Core 3.0 使用gRPC

一.简介gRPC 是一个由Google开源的&#xff0c;跨语言的&#xff0c;高性能的远程过程调用&#xff08;RPC&#xff09;框架。gRPC使客户端和服务端应用程序可以透明地进行通信&#xff0c;并简化了连接系统的构建。它使用HTTP/2作为通信协议&#xff0c;使用 Protocol Buffers…

mysql 1030 error:Got error 28 from storage engine

最近生产应用连不上生产环境数据库&#xff0c;使用命令行连上去之后&#xff0c;执行命令出现1030 error。 故Google之&#xff0c;解决方案如下。 mysql 1030 error 是因为没有足够的空间&#xff0c;清理磁盘空间即可恢复正常使用。 然后追踪发现&#xff0c;磁盘空间为99G&…

Codeforces Round #739 (Div. 3)(AK实况)

Codeforces Round #739 (Div. 3) A. Dislike of Threes 找到第kkk个既不是333的倍数&#xff0c;个位数上也不是333的数&#xff0c;也已预处理然后O(1)O(1)O(1)输出&#xff0c;也可直接forforfor循环暴力。 #include <bits/stdc.h>using namespace std;int main() {/…

利用Helm简化Kubernetes应用部署(2)

目录定义Charts 使用Helm部署Demo Helm常用操作命令 定义Charts回到之前的“charts”目录&#xff0c;我们依次进行解读并进行简单的修改。Chart.yaml配置示例&#xff1a;apiVersion: v1 appVersion: "1.1" description: A demo Helm chart for Kubernetes name:…

linux查看磁盘空间命令

Linux 查看磁盘空间可以使用 df 和 du 命令。 df df 以磁盘分区为单位查看文件系统&#xff0c;可以获取硬盘被占用了多少空间&#xff0c;目前还剩下多少空间等信息。 例如&#xff0c;我们使用df -h命令来查看磁盘信息&#xff0c; -h 选项为根据大小适当显示&#xff1a; …

Visual Studio 2019 16.3 正式发布,支持 .NET Core 3.0

微软正式发布了 Visual Studio 2019 16.3 版本&#xff0c;主要更新内容如下&#xff1a;.NET Core 3.0Visual Studio 版本 16.3 包括对 .NET Core 3.0 的支持。注意&#xff1a;如果使用的是 .NET Core 3.0&#xff0c;则需要使用 Visual Studio 16.3 或更高版本。.NET Core 桌…

Linux清空文件内容的三种方法

Linux清空文件内容的三种方法 测试文件&#xff1a;test.txt 1、 $ > test.txt 2、 $echo “” > test.txt 3、 $cat /dev/null > test.txt

Problem M. Mediocre String Problem(Z 函数 + PAM)

Problem M. Mediocre String Problem 给定两个串s,ts, ts,t&#xff0c;要求有多少不同的三元组(i,j,k)(i, j, k)(i,j,k)&#xff0c;满足&#xff1a; 1≤i≤j≤∣s∣1 \le i \le j \le \mid s \mid1≤i≤j≤∣s∣。1≤k≤∣t∣1 \le k \le \mid t \mid1≤k≤∣t∣。j−i1≥k…

【干货】规模化敏捷DevOps四大实践之持续探索CE(中英对照版)

本文翻译来自SAFe DevOps社群帅哥网友贾磊&#xff1a;高级质量经理&敏捷教练 曾就职于外企、国企、大型上市企业等&#xff0c;担任过测试工程师、测试经理、项目经理、敏捷教练、质量总监、高级质量经理等岗位。是一名敏捷变革的爱好者和践行者。爱好网球、羽毛球。正文原…