詳細介紹關於ASP.NET MVC Admin首頁的快速構建

這篇文章主要為大家詳細介紹了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

<p class="navbar navbar-default" role="navigation">  <p 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="index.html"><span class="navbar-brand"><span class="fa fa-paper-plane"></span> Aircraft</span></a>  </p> <p 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="./">My Account</a></li>     <li class="pider"></li>     <li class="dropdown-header">Admin Panel</li>     <li><a href="./">Users</a></li>     <li><a href="./">Security</a></li>     <li><a tabindex="-1" href="./">Payments</a></li>     <li class="pider"></li>     <li><a tabindex="-1" href="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"><p class="color theme-1"></p></a>      <a href="#" data-color="2"><p class="color theme-2"></p></a>      <a href="#" data-color="3"><p class="color theme-3"></p></a>      <a href="#" data-color="4"><p class="color theme-4"></p></a>     </li>      <li>      <a href="#" data-color="5"><p class="color theme-5"></p></a>      <a href="#" data-color="6"><p class="color theme-6"></p></a>      <a href="#" data-color="7"><p class="color theme-7"></p></a>      <a href="#" data-color="8"><p class="color theme-8"></p></a>     </li>    </ul>   </li>  </ul>   </p></p>

_MenuPartial.cshtml

<p class="sidebar-nav"> <ul>  <li><a href="#" data-target=".accounts-menu" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-briefcase"></i> Account <span class="label label-info">+3</span></a></li>  <li>   <ul class="accounts-menu nav nav-list collapse">    <li><a href="#"><span class="fa fa-caret-right"></span> Sign In</a></li>    <li><a href="#"><span class="fa fa-caret-right"></span> Sign Up</a></li>    <li><a href="#"><span class="fa fa-caret-right"></span> Reset Password</a></li>   </ul>  </li>  <li><a href="#" data-target=".legal-menu" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-legal"></i> Legal<i class="fa fa-collapse"></i></a></li>  <li>   <ul class="legal-menu nav nav-list collapse">    <li><a href="#"><span class="fa fa-caret-right"></span> Privacy Policy</a></li>    <li><a href="#"><span class="fa fa-caret-right"></span> Terms and Conditions</a></li>   </ul>  </li>  <li><a href="#" class="nav-header"><i class="fa fa-fw fa-question-circle"></i> Help</a></li>  <li><a href="#" class="nav-header"><i class="fa fa-fw fa-comment"></i> Faq</a></li> </ul></p>

_FooterPartial.cshtml

<footer> <hr> <!-- Purchase a site license to remove this link from the footer: http://www.portnine.com/bootstrap-themes --> <p class="pull-right">A <a href="http://www.portnine.com/bootstrap-themes" target="_blank">Free Bootstrap Theme</a> by <a href="http://www.portnine.com" target="_blank">Portnine</a></p> <p> 2014 <a href="http://www.portnine.com" target="_blank">Portnine</a></p></footer>

2.通過NUGET安裝font-awesome字型表徵圖，font-awesome是一個優秀的字型表徵圖庫，想瞭解更多的請參考官網 http://fontawesome.dashgame.com/ 。

3.在項目的BundleConfig檔案中，把相關的css和js檔案添加進去。

// 有關綁定的詳細資料，請訪問 http://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollection bundles) {  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(   "~/Scripts/jquery-{version}.js"));  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(   "~/Scripts/jquery.validate*"));  // 使用要用於開發和學習的 Modernizr 的開發版本。然後，當你做好  // 生產準備時，請使用 http://modernizr.com 上的產生工具來僅選擇所需的測試。  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(   "~/Scripts/modernizr-*"));  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(   "~/Scripts/bootstrap.js",   "~/Scripts/respond.js"));  bundles.Add(new StyleBundle("~/Content/css").Include(   "~/Content/bootstrap.css",   "~/Content/site.css" ,   "~/Content/theme.css",    "~/Content/css/font-awesome.min.css"   )); }

4.添加LayoutAdmin主版頁面並修改Index首頁內容，將Index主版頁面指向LayoutAdmin

@{ Layout = "~/Views/Shared/_LayoutAdmin.cshtml"; ViewBag.Title = "Home Page"; }<p class="header"> <h1 class="page-title">Help</h1> <ul class="breadcrumb">  <li><a href="#">Home</a> </li>  <li class="active">Help</li> </ul></p><p class="main-content"> <p class="faq-content"> </p> @Html.Partial("_FooterPartial")</p>

　　這樣，通過簡單的幾步就搭好了一個簡潔大方的ASP.NETMVC後台系統管理範本頁，半個小時就搞定了，怎麼樣，效率很高吧！這裡我順便把裡面的主題樣式加到首頁頂部菜單，通過簡單切換即可選擇頂部樣式，大家也可以在theme.css裡面擴充你的主題。