基于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# 而…

Sprig boot自动配置

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

.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 …

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

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

ASP.NET Core 3.0 使用gRPC

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

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 桌…

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

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

Spring Cloud——Eureka——架构体系

1、概述 Eureka包括两个端&#xff1a; Eureka Server&#xff1a;注册中心服务端&#xff0c;用于维护和管理注册服务列表。Eureka Client&#xff1a;注册中心客户端&#xff0c;向注册中心注册服务的应用都可以叫做Eureka Client&#xff08;包括Eureka Server本身&#x…

推荐.neter常用优秀开源项目系列之二

.net社区有很多优秀的开源项目&#xff0c;我们今天再推荐12个开源项目&#xff1b;1. Domain-Driven-Design-ExampleDDD 示例 挺不错的。github https://github.com/zkavtaskin/Domain-Driven-Design-Example2.SmartStoreNET开源的电商项目github https://github.com/smartsto…

Zookeeper: Zookeeper架构及FastLeaderElection机制

本文转发自技术世界&#xff0c;原文链接 http://www.jasongj.com/zookeeper/fastleaderelection/ 一、Zookeeper是什么 Zookeeper是一个分布式协调服务&#xff0c;可用于服务发现&#xff0c;分布式锁&#xff0c;分布式领导选举&#xff0c;配置管理等。 这一切的基础&am…

与时俱进 | 博客现已运行在 .NET Core 3.0 及 Azure 上

点击上方蓝字关注“汪宇杰博客”导语9月23日&#xff0c;微软正式发布了 .NET Core 3.0&#xff0c;这个版本具有大量新功能和改进。我也在第一时间将自己的博客网站更新到了 .NET Core 3.0&#xff0c;并且仍然跑在微软智慧云 Azure 国际版的应用服务上。本文总结了我在博客迁…

Zookeeper:基于Zookeeper的分布式锁与领导选举

本文转发自技术世界&#xff0c;原文链接 http://www.jasongj.com/zookeeper/distributedlock/ 1、Zookeeper特点 1.1 Zookeeper节点类型 如上文《Zookeeper架构及FastLeaderElection机制》所述&#xff0c;Zookeeper 提供了一个类似于 Linux 文件系统的树形结构。该树形结构…

Asp.Net Core Mvc Razor之RazorPage

在AspNetCore.Mvc.Razor命名空间中的RazorPage继承RazorPageBase&#xff0c;并定义的属性为&#xff1a;HttpContext Context 表示当前请求执行的HttpContextRazorPageBase定义为抽象类&#xff0c;并继承了接口&#xff1a;IRazorPageIRazorPage接口定义属性如下&#xff1a;…

Spring Cloud——Consul——架构体系

我们知道&#xff0c;Eureka 2.X因遇到问题&#xff0c;已停止研发。Spring Cloud官方建议迁移到Consul或者Zookeeper等其他服务发现中间件。 下面是 Spring Cloud 支持的服务发现软件以及特性对比&#xff1a; 一、Consul 介绍 Consul 是 HashiCorp 公司推出的开源工具&…

ASP.NET Core 3.0 gRPC 双向流

目录ASP.NET Core 3.0 使用gRPCASP.NET Core 3.0 gRPC 双向流ASP.NET Core 3.0 gRPC 认证授权一.前言在前一文 《二. 什么是 gRPC 流gRPC 有四种服务类型&#xff0c;分别是&#xff1a;简单 RPC&#xff08;Unary RPC&#xff09;、服务端流式 RPC &#xff08;Server streami…