- 拷贝素材css目录下的adminstyle.css文件至Content目录，拷贝images目录至项目中。
- 右键点击/Views/Shared目录，选择“添加”-“MVC 5 Partial Page (Razor)”，设定“视图名称”为“_admintop”。
- 在新建的_admintop.cshtml中输入头部代码（从素材adminindex.html中拷贝），修改相关css文件及图片的引用路径，代码如下：
<div id="headindex">
<img id="logo" src="~/Content/images/shopping_logo.png" style="height:59px;width:242px;border-width:0px;" />
<div id="headm">
<span id="logoMessage">欢迎您 100！！</span> <span id="spanRole">角色：超级管理员</span>
<input type="submit" name="btnLogout" value="注销" id="btnLogout" style="width:45px;" />
<input type="submit" name="btnIndex" value="网站首页" id="btnIndex" />
</div>
</div>
- 右键点击/Views/Shared目录，选择“添加”-“MVC 5 Layout Page (Razor)”，设定“视图名称”为“_adminLayout”布局页，在_adminLayout.cshtml中使用@Html.Partial加载分部视图_admintop.cshtml，核心代码如下：
<head>
<title>
后台首页
</title>
<script type="text/javascript" language="javascript">
function expand(el) {
childObj = document.getElementById("child" + el);
if (childObj.style.display == 'none') {
childObj.style.display = 'block';
}
else {
}
return;
}
function expand1(el) {
childObj = document.getElementById("child" + el);
if (childObj.style.display == 'block') {
childObj.style.display = 'none';
}
else {
}
return;
}
</script>
<link href="~/Content/css/adminstyle.css" rel="stylesheet" />
</head>
<body style=" margin:0; padding:0;">
<form name="aspnetForm" method="post" action="" id="aspnetForm">
@Html.Partial("_AdminTop")
<div id="container">
<div id="leftmenu">
<table cellspacing="0" cellpadding="0" style="">
<tr>
<td style="vertical-align:top; text-align:center;">
<table cellspacing="0" cellpadding="0" style="width:100%; border:0;">
<tr>
<td style="height:10px;"></td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(1)" onmouseover="expand(1)">
<tr>
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);height: 22px;">
<a style="color:#000; text-decoration:none;"
href="javascript:void(0);">管理员系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child1" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt=""
src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="adminlist.aspx">管理员列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt=""
src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="adminadd.aspx">管理员添加</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(2)" onmouseover="expand(2)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">会员管理系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child2" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt=""
src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="userselect.aspx">会员列表</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(3)" onmouseover="expand(3)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">新闻管理系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child3" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="../../Content/images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="newslist.aspx">新闻列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="../../Content/images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="newsadd.aspx">新闻添加</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="../../Content/images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="newscate.aspx">新闻分类</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="../../Content/images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="newscateadd.aspx">新闻分类添加</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(4)" onmouseover="expand(4)">
<tr style=" height: 22px;
">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">产品管理系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child4" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="../../Content/images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="proselect.aspx">产品列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="proadd.aspx">产品添加</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="procatelist.aspx">产品分类列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="procateadd.aspx">产品分类添加</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="fathercateadd.aspx">产品父类添加</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align: center;width: 30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="fatherlist.aspx">产品父类列表</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(5)" onmouseover="expand(5)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">购物管理系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child5" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt=""
src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="orderselect.aspx">订单列表</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(6)" onmouseover="expand(6)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">留言板管理系统</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child6" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt=""
src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="messageList.aspx">留言列表</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(7)" onmouseover="expand(7)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
相关<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">文件管理</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child7" style=" display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="downloadlist.aspx">文件列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="downloadadd.aspx">文件添加</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="width:150px; border:0px" onmouseout="expand1(8)" onmouseover="expand(8)">
<tr style="height:22px;">
<td style=" padding-left:30px;background:url(../../Content/images/admin/menu_bt.jpg);" class="menuParent">
<a href="javascript:void(0);">Help</a>说明<a style="color:#000; text-decoration:none;" onclick="expand(1)"
href="javascript:void(0);">管理</a>
</td>
</tr>
<tr style="height:4px;">
<td>
<table id="child8" style="display:none; width:150px; border:0;" cellspacing="0" cellpadding="0">
<tr style="height: 20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="helplist.aspx">帮助信息列表</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="helpadd.aspx">帮助信息添加</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="helpcatelist.aspx">帮助信息分类</a>
</td>
</tr>
<tr style="height:20px;">
<td style="text-align:center; width:30px;">
<img alt="" src="images/menu_icon.gif" style="height: 10px;width:9px;" />
</td>
<td class="menuChild">
<a href="helpcateadd.aspx">帮助信息分类添加</a>
</td>
</tr>
<tr style="height:4px;">
<td colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width:1px; background-color:#d1e6f7;"></td>
</tr>
</table>
</div>
<div id="rightcontent">
@RenderBody()
</div>
</div>
<div id="foot" style=" background-color:#1c5db6;height:3px;"></div>
</form>
</body>
- 创建Admin控制器和/views/admin/Index.cshtml视图，Index.cshtml视图需要使用 _adminLayout.cshtml布局页，（核心代码从素材中拷贝）。参考代码如下：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div id="location">
<table cellspacing="0" cellpadding="0" style="width:100%; text-align:center; border:0;">
<tr style="height:28px;">
<td style="text-align:left;background:url(images/admin/title_bg1.jpg);">
当前位置:<a href="#">首页</a>
</td>
</tr>
</table>
</div>
<div style="height:502px; vertical-align:top; overflow:scroll;">
<div>
<div style="padding-top:20px; width: 31%;float: left;">
<img src="~/Content/images/admin/admin_touxiang.png" alt="" style="width: 208px;height: 162px;" />
</div>
<div style="padding-top:40px; text-align: center;width: 65%;float: left;">
<div>
当前时间是：
<script type="text/javascript">
var week;
if (new Date().getDay() == 0) week = "星期日"
if (new Date().getDay() == 1) week = "星期一"
if (new Date().getDay() == 2) week = "星期二"
if (new Date().getDay() == 3) week = "星期三"
if (new Date().getDay() == 4) week = "星期四"
if (new Date().getDay() == 5) week = "星期五"
if (new Date().getDay() == 6) week = "星期六"
document.write(new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月" + new Date().getDate() + "日 " + week);</script>
<span id="time"></span>
<script type="text/javascript">setInterval("time.innerHTML=new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds()", 1000);</script>
</div>
<br />
登入IP：<span id="s1">::1</span><br />
<div>登入用户：<span id="s2">100</span></div>
角色：<span id="s3">超级管理员</span>
<br />
<div>欢迎进入网站管理中心</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
- 运行程序，输入“URL：http://localhost:端口/admin/index”。