后臺開發人員一般不喜歡調樣式，搞半天樣式出不來，還要考慮各種瀏覽器兼容，費心費力不討好，還好互聯網時代有大量的資源共享，避免我們從零開始，現在就來看怎么快速構建一個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="#" 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/"./">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/"./">Users</a></li> <li><a href=http://www.3lian.com/edu/2017/05-28/"./">Security</a></li> <li><a tabindex="-1" href=http://www.3lian.com/edu/2017/05-28/"./">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="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-tachometer"></i> </a> <ul class="dropdown-menu theme-choose"> <li> <a href="#" data-color="1"><div class="color theme-1"></div></a> <a href="#" data-color="2"><div class="color theme-2"></div></a> <a href="#" data-color="3"><div class="color theme-3"></div></a> <a href="#" data-color="4"><div class="color theme-4"></div></a> </li> <li> <a href="#" data-color="5"><div class="color theme-5"></div></a> <a href="#" data-color="6"><div class="color theme-6"></div></a> <a href="#" data-color="7"><div class="color theme-7"></div></a> <a href="#" data-color="8"><div class="color theme-8"></div></a> </li> </ul> </li> </ul> </div> </div>

_MenuPartial.cshtml