這篇文章主要為大家詳細介紹了ASP.NET MVC Admin主頁快速建立的相關資料，具有一定的參考價值，感興趣的朋友可以參考一下
前言
後台開發人員一般不喜歡調樣式，搞半天樣式出不來，還要考慮各種瀏覽器相容，費心費力不討好，還好互聯網時代有大量的資源共享，避免我們從零開始，現在就來看怎麼快速構建一個ASP.NETMVC後台管理admin主頁的方法，先看一看最終的效果！
第一步：選擇admin範本
網路時代就是資源共享的時代，網路上各種前端範本，這裡主要是說明怎麼把範本整合到我們的ASP.NETMVC專案中，至於範本大家可以自己去選擇喜歡的，這裡我們選擇這個清爽版的AircraftAdmin，先看看AircraftAdmin的效果。
第二步：精簡模板
通常下載一個模板後打開會發現，裡面混雜了大量的css樣式js插件，有很多是我們不需要的，直接應用到專案中並不方便，怎麼辦呢，我的經驗就是，刪刪刪，沒錯，下載模板後打開，把不需要的html，css，js一步一步幹掉。
# 用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><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
安裝
3.在專案的Bun
dl
// 有关绑定的详细信息，请访问 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"
));
}@{
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里面扩展你的主题。
以上是詳細介紹關於ASP.NET MVC Admin主頁的快速構建的詳細內容。更多資訊請關注PHP中文網其他相關文章！
