：bootstrap adminlte教程2：布局之前台模板
首先用了adminlte来做后台，为了难得麻烦，前台也用了，只是引用JS要少一些。
1.效果展示。
先上PC大屏的效果图。（这是很大众的）
缩小后:
在上头像点击下拉效果。
二.下面是实现步骤。
1.思路：首先user/login进行登录，然后这个login使用了无_loyout布局。登录后转到home/index,所以我在这个控制器中将所有登录用户的信息全Session进系统。
打开HomeController.cs,改写了其中的index方法。
[Authorize]
public ActionResult Index()
{
Session["role"] = ""; //初设一个角色session
string id = User.Identity.GetUserId(); //获取当前用户的ID
if (string.IsNullOrWhiteSpace(id))
{
return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
}
var xxxx = UserManager.GetRoles(id) ; //获取该ID的角色序列
if (xxxx == null)
{
Session["role"] = "无";
}
else
{
var userRoles = xxxx as IList<string>; //对象转为string列
foreach (var role in userRoles)
{
Session["role"] = role; //赋值角色的session
}
}
User user = UserManager.FindById(id); //实例化User类
Session["username"] = user.UserName;
Session["birthDate"] = user.BirthDate;
Session["gender"] = user.Gender;
Session["qq"] = user.QQ;
Session["phone"] = user.PhoneNumber;
Session["headerPic"] = user.HeaderPic; //头像的URL session
Session["userId11"] = id; //当前用户的id
Session["userIP"] = HttpContext.Request.UserHostAddress; //当前电脑的ip
return View(user);
}
页index使用的是默认的_layout布局文件，我们只需修改那个布局文件即可。
2.重新设计_layout布局文件。 这个和我们说的adminlte第一课对应，只引用了start.htm示范中的JS和CSS，但我加入了一个我自己写的CSS,主要是调测了几个地方，不重要。
但在下面这句，实在是深蓝色，我难得麻烦，加上了两个重写。
<div class="wrapper" style="background:#ffffff;box-shadow:none;">
下面是完整 的代码。
@using Microsoft.AspNet.Identity
@{
string id = User.Identity.GetUserId();
Session["rquesturl"]= Request.Url.ToString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title </title>
@Styles.Render("~/Content/adminlte/bootstrap/css")
<link href="~/Content/jsdhh.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue layout-boxed sidebar-mini">
<div class=" container navtitle hidden-xs">
头部
</div>
<div class="wrapper" style="background:#ffffff;box-shadow:none;">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="~/home/index" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">---</span>
<span class="icon-bar">---</span>
<span class="icon-bar">---</span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li>
<!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="~/Content/Adminlte/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li>
<!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu 旗子任务图标 -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu" style="z-index:999;">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src=@Session["headerPic"] class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">@Session["username"] -[ @Session["role"] ]</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src=@Session["headerPic"] class="img-circle" alt="User Image">
<p>
qq：@Session["qq"] | Tel:@Session["phone"]
<small>生日：@Session["birthDate"]</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="~/User/ChangePassword?id= @User.Identity.GetUserId()">改密码</a>
</div>
<div class="col-xs-4 text-center">
<a href="~/User/DetailsList?id=@Session["userId11"]">查看资料</a>
</div>
<div class="col-xs-4 text-center">
<a href="~/User/Edit?id=@Session["userId11"]">修改资料</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="~/Admin/index" class="btn btn-default btn-flat">后台</a>
</div>
@using (Html.BeginForm("LogOff", "User", FormMethod.Post, new { id = "logoutForm" }))
{ @Html.AntiForgeryToken()
<div class="pull-right">
<a href="javascript:document.getElementById('logoutForm').submit()">注销</a>
</div>}
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!-- Content Wrapper. Contains page content -->
<div class="container body-content">
<!-- Content Header (Page header) -->
<!-- 最上面的HEADER -->
@RenderBody()
</div>
</div>
<!--end 中间内容 Content Wrapper. Contains page content -->
<!-- Main Footer -->
<footer class="container dhhfoot">
<p>© @DateTime.Now.Year - 我们自己的程序 </p>
</footer>
@Scripts.Render("~/bundles/adminlte")
@RenderSection("scripts", required: false)
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>
注意在其，用户头像下拉的修改密码，详细资料，要送一个当前用户的ID作参数。
浙公网安备 33010602011771号