ASP.NET MVC Admin主页快速构建

　　后台开发人员一般不喜欢调样式，搞半天样式出不来，还要考虑各种浏览器兼容，费心费力不讨好，还好互联网时代有大量的资源共享，避免我们从零开始，现在就来看怎么快速构建一个ASP.NETMVC后台管理admin主页的方法，先看一看最终的效果!

　　第一步：选择一个admin模板

　　互联网时代就是资源共享的时代，网上各种前端模板，这里主要是说明怎么把模板整合到我们的ASP.NETMVC项目中，至于模板大家可以自己去选择喜欢的，这里我们选择这个清爽版的AircraftAdmin，首先看看AircraftAdmin的效果。

　　第二步：精简模板

　　通常下载一个模板后打开会发现，里面混杂了大量的css样式js插件，有很多是我们不需要的，直接应用到项目中并不方便，怎么办呢，我的经验就是，删删删，没错，下载模板后打开，把不需要的html，css，js一步一步干掉。

　　1.删除不需要的html元素

　　用vs来开一个页面，分析整体布局，再分步删除，如下图，顶部和左侧的菜单栏我们需要保留，主内容区不需要的html删除。

　　2.精简css文件

　　通过分析，一共引用了四个css文件，bootstrap.css(bootstrap样式)，font-awesome.css(图标字体)，theme.css(主题)，premium.css(未知)，把最后一个删除，刷新后正常，因此保留三个css文件。

　　3.精简js文件

　　同步骤2一样，把一些不需要的js删除，如果你对js不是很熟悉或者不清楚页面中的某些js作用，可以暂时先保留这些js，通过删除一个再刷新看效果确认某个js作用。

　　经过上面几步，页面文件和引用文件已经大大减少了，基本文档我们也清晰了。下一步将整合到MVC项目中。

　　第三步：整合相关文件

　　1.下面我们开始分析文档结构，建立MVC项目，整合相关文件。整个文档我们分为三块，头部工具信息栏，左侧菜单栏、主体内容区，头部和左侧相对来说是不变的，而且每个页面都公用的部分，把它们提取出来，做为MVC项目中的分部视图_TopBarPartial.cshtml和_MenuPartial.cshtml添加进去。这里我对_MenuPartial.cshtml进行了简化，只留下几个示例菜单，主体底部区也作为一个公共分部视图_FooterPartial.cshtml，可以在此添加你的公司和版权信息。

_TopBarPartial.cshtml

<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="" href=http://www.3lian.com/edu/2017/05-28/"index.html"><span class="navbar-brand"><span class="fa fa-paper-plane"></span> Aircraft</span></a> </div> <div class="navbar-collapse collapse" style="height: 1px;"> <ul id="main-menu" class="nav navbar-nav navbar-right"> <li class="dropdown hidden-xs"> <a href=http://www.jsgho.com/help/fwq/"#" class="dropdown-toggle" data-toggle="dropdown"> <span class=" padding-right-small" style="position:relative;top: 3px;"></span> <i class="fa fa-user"></i> Jack Smith <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu"> <li><a href=http://www.3lian.com/edu/2017/05-28/"http://www.jsgho.com/help/fwq/">My Account</a></li> <li class="divider"></li> <li class="dropdown-header">Admin Panel</li> <li><a href=http://www.3lian.com/edu/2017/05-28/"http://www.jsgho.com/help/fwq/">Users</a></li> <li><a href=http://www.3lian.com/edu/2017/05-28/"http://www.jsgho.com/help/fwq/">Security</a></li> <li><a tabindex="-1" href=http://www.3lian.com/edu/2017/05-28/"http://www.jsgho.com/help/fwq/">Payments</a></li> <li class="divider"></li> <li><a tabindex="-1" href=http://www.3lian.com/edu/2017/05-28/"sign-in.html">Logout</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown hidden-xs"> <a href=http://www.jsgho.com/help/fwq/"#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-tachometer"></i> </a> <ul class="dropdown-menu theme-choose"> <li> <a href=http://www.jsgho.com/help/fwq/"#" data-color="1"><div class="color theme-1"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="2"><div class="color theme-2"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="3"><div class="color theme-3"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="4"><div class="color theme-4"></div></a> </li> <li> <a href=http://www.jsgho.com/help/fwq/"#" data-color="5"><div class="color theme-5"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="6"><div class="color theme-6"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="7"><div class="color theme-7"></div></a> <a href=http://www.jsgho.com/help/fwq/"#" data-color="8"><div class="color theme-8"></div></a> </li> </ul> </li> </ul> </div> </div>

_MenuPartial.cshtml