ASP.NET MVC Admin主頁快速構(gòu)建
前言
后臺開發(fā)人員一般不喜歡調(diào)樣式,搞半天樣式出不來,還要考慮各種瀏覽器兼容,費心費力不討好,還好互聯(lián)網(wǎng)時代有大量的資源共享,避免我們從零開始,現(xiàn)在就來看怎么快速構(gòu)建一個ASP.NETMVC后臺管理admin主頁的方法,先看一看最終的效果!
第一步:選擇一個admin模板
互聯(lián)網(wǎng)時代就是資源共享的時代,網(wǎng)上各種前端模板,這里主要是說明怎么把模板整合到我們的ASP.NETMVC項目中,至于模板大家可以自己去選擇喜歡的,這里我們選擇這個清爽版的AircraftAdmin,首先看看AircraftAdmin的效果。
第二步:精簡模板
通常下載一個模板后打開會發(fā)現(xiàn),里面混雜了大量的css樣式j(luò)s插件,有很多是我們不需要的,直接應(yīng)用到項目中并不方便,怎么辦呢,我的經(jīng)驗就是,刪刪刪,沒錯,下載模板后打開,把不需要的html,css,js一步一步干掉。
1.刪除不需要的html元素
用vs來開一個頁面,分析整體布局,再分步刪除,如下圖,頂部和左側(cè)的菜單欄我們需要保留,主內(nèi)容區(qū)不需要的html刪除。
2.精簡css文件
通過分析,一共引用了四個css文件,bootstrap.css(bootstrap樣式),font-awesome.css(圖標字體),theme.css(主題),premium.css(未知),把最后一個刪除,刷新后正常,因此保留三個css文件。
3.精簡js文件
同步驟2一樣,把一些不需要的js刪除,如果你對js不是很熟悉或者不清楚頁面中的某些js作用,可以暫時先保留這些js,通過刪除一個再刷新看效果確認某個js作用。
經(jīng)過上面幾步,頁面文件和引用文件已經(jīng)大大減少了,基本文檔我們也清晰了。下一步將整合到MVC項目中。
第三步:整合相關(guān)文件
1.下面我們開始分析文檔結(jié)構(gòu),建立MVC項目,整合相關(guān)文件。整個文檔我們分為三塊,頭部工具信息欄,左側(cè)菜單欄、主體內(nèi)容區(qū),頭部和左側(cè)相對來說是不變的,而且每個頁面都公用的部分,把它們提取出來,做為MVC項目中的分部視圖_TopBarPartial.cshtml和_MenuPartial.cshtml添加進去。這里我對_MenuPartial.cshtml進行了簡化,只留下幾個示例菜單,主體底部區(qū)也作為一個公共分部視圖_FooterPartial.cshtml,可以在此添加你的公司和版權(quán)信息。
_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="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="./">My Account</a></li> <li class="divider"></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="divider"></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"><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
<div 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> </div>
_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 target="_blank">Free Bootstrap Theme</a> by <a target="_blank">Portnine</a></p> <p>© 2014 <a target="_blank">Portnine</a></p> </footer>
2.通過NUGET安裝font-awesome字體圖標,font-awesome是一個優(yōu)秀的字體圖標庫,想了解更多的請參考官網(wǎng) http://fontawesome.dashgame.com/ 。
3.在項目的BundleConfig文件中,把相關(guān)的css和js文件添加進去。
// 有關(guān)綁定的詳細信息,請訪問 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*")); // 使用要用于開發(fā)和學(xué)習(xí)的 Modernizr 的開發(fā)版本。然后,當你做好 // 生產(chǎn)準備時,請使用 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首頁內(nèi)容,將Index母版頁指向LayoutAdmin
@{ Layout = "~/Views/Shared/_LayoutAdmin.cshtml"; ViewBag.Title = "Home Page"; } <div class="header"> <h1 class="page-title">Help</h1> <ul class="breadcrumb"> <li><a href="#">Home</a> </li> <li class="active">Help</li> </ul> </div> <div class="main-content"> <div class="faq-content"> </div> @Html.Partial("_FooterPartial") </div>
這樣,通過簡單的幾步就搭好了一個簡潔大方的ASP.NETMVC后臺管理模板頁,半個小時就搞定了,怎么樣,效率很高吧!這里我順便把里面的主題樣式加到首頁頂部菜單,通過簡單切換即可選擇頂部樣式,大家也可以在theme.css里面擴展你的主題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Asp.Net Core中服務(wù)的生命周期選項區(qū)別與用法詳解
這篇文章主要給大家介紹了關(guān)于Asp.Net Core中服務(wù)的生命周期選項區(qū)別與用法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11asp.net 關(guān)于==?:和if()else()條件判斷等效例子
關(guān)于==?:和if()else() 等效例子2010-03-03ASP.NET Core應(yīng)用錯誤處理之DeveloperExceptionPageMiddleware中間件呈現(xiàn)“開發(fā)者
這篇文章主要給大家介紹了關(guān)于ASP.NET Core應(yīng)用錯誤處理之DeveloperExceptionPageMiddleware中間件呈現(xiàn)“開發(fā)者異常頁面”的相關(guān)資料,需要的朋友可以參考下2019-01-01集合類Array List HashTable實例操作練習(xí)
集合常用操作添加、遍歷、移除;本文將詳細介紹下ArrayList對值類型的操作/ArrayList對引用類型的操作及HashTable的使用,感興趣的你可不要錯過了哈2013-02-02asp.net實現(xiàn)Gradview綁定數(shù)據(jù)庫數(shù)據(jù)并導(dǎo)出Excel的方法
這篇文章主要介紹了asp.net實現(xiàn)Gradview綁定數(shù)據(jù)庫數(shù)據(jù)并導(dǎo)出Excel的方法,涉及asp.net操作Gradview實現(xiàn)數(shù)據(jù)庫綁定及數(shù)據(jù)導(dǎo)出的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-11-11"PageMethods未定義"或"對象不支持此屬性或方法"解決方法分享
PageMethods未定義或?qū)ο蟛恢С执藢傩曰蚍椒ń鉀Q方法,需要的朋友可以參考下。2010-12-12