這篇文章給大家分享的是有關(guān)ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),獻(xiàn)縣企業(yè)網(wǎng)站建設(shè),獻(xiàn)縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,獻(xiàn)縣網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,獻(xiàn)縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶(hù)成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。效果
第一步:選擇一個(gè)admin模板
互聯(lián)網(wǎng)時(shí)代就是資源共享的時(shí)代,網(wǎng)上各種前端模板,這里主要是說(shuō)明怎么把模板整合到我們的ASP.NETMVC項(xiàng)目中,至于模板大家可以自己去選擇喜歡的,這里我們選擇這個(gè)清爽版的AircraftAdmin,首先看看AircraftAdmin的效果。
第二步:精簡(jiǎn)模板
通常下載一個(gè)模板后打開(kāi)會(huì)發(fā)現(xiàn),里面混雜了大量的css樣式j(luò)s插件,有很多是我們不需要的,直接應(yīng)用到項(xiàng)目中并不方便,怎么辦呢,我的經(jīng)驗(yàn)就是,刪刪刪,沒(méi)錯(cuò),下載模板后打開(kāi),把不需要的html,css,js一步一步干掉。
1.刪除不需要的html元素
用vs來(lái)開(kāi)一個(gè)頁(yè)面,分析整體布局,再分步刪除,如下圖,頂部和左側(cè)的菜單欄我們需要保留,主內(nèi)容區(qū)不需要的html刪除。
2.精簡(jiǎn)css文件
通過(guò)分析,一共引用了四個(gè)css文件,bootstrap.css(bootstrap樣式),font-awesome.css(圖標(biāo)字體),theme.css(主題),premium.css(未知),把最后一個(gè)刪除,刷新后正常,因此保留三個(gè)css文件。
3.精簡(jiǎn)js文件
同步驟2一樣,把一些不需要的js刪除,如果你對(duì)js不是很熟悉或者不清楚頁(yè)面中的某些js作用,可以暫時(shí)先保留這些js,通過(guò)刪除一個(gè)再刷新看效果確認(rèn)某個(gè)js作用。
經(jīng)過(guò)上面幾步,頁(yè)面文件和引用文件已經(jīng)大大減少了,基本文檔我們也清晰了。下一步將整合到MVC項(xiàng)目中。
第三步:整合相關(guān)文件
1.下面我們開(kāi)始分析文檔結(jié)構(gòu),建立MVC項(xiàng)目,整合相關(guān)文件。整個(gè)文檔我們分為三塊,頭部工具信息欄,左側(cè)菜單欄、主體內(nèi)容區(qū),頭部和左側(cè)相對(duì)來(lái)說(shuō)是不變的,而且每個(gè)頁(yè)面都公用的部分,把它們提取出來(lái),做為MVC項(xiàng)目中的分部視圖_TopBarPartial.cshtml和_MenuPartial.cshtml添加進(jìn)去。這里我對(duì)_MenuPartial.cshtml進(jìn)行了簡(jiǎn)化,只留下幾個(gè)示例菜單,主體底部區(qū)也作為一個(gè)公共分部視圖_FooterPartial.cshtml,可以在此添加你的公司和版權(quán)信息。
_TopBarPartial.cshtml
- Jack Smith
- My Account
- Admin Panel
- Users
- Security
- Payments
- Logout
_MenuPartial.cshtml
_FooterPartial.cshtml
2.通過(guò)NUGET安裝font-awesome字體圖標(biāo),font-awesome是一個(gè)優(yōu)秀的字體圖標(biāo)庫(kù),想了解更多的請(qǐng)參考官網(wǎng) http://fontawesome.dashgame.com/ 。
3.在項(xiàng)目的BundleConfig文件中,把相關(guān)的css和js文件添加進(jìn)去。
// 有關(guān)綁定的詳細(xì)信息,請(qǐng)?jiān)L問(wè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*")); // 使用要用于開(kāi)發(fā)和學(xué)習(xí)的 Modernizr 的開(kāi)發(fā)版本。然后,當(dāng)你做好 // 生產(chǎn)準(zhǔn)備時(shí),請(qǐng)使用 http://modernizr.com 上的生成工具來(lái)僅選擇所需的測(cè)試。 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母版頁(yè)并修改Index首頁(yè)內(nèi)容,將Index母版頁(yè)指向LayoutAdmin
@{ Layout = "~/Views/Shared/_LayoutAdmin.cshtml"; ViewBag.Title = "Home Page"; }Help
- Home
- Help
@Html.Partial("_FooterPartial")
這樣,通過(guò)簡(jiǎn)單的幾步就搭好了一個(gè)簡(jiǎn)潔大方的ASP.NETMVC后臺(tái)管理模板頁(yè),半個(gè)小時(shí)就搞定了,怎么樣,效率很高吧!這里我順便把里面的主題樣式加到首頁(yè)頂部菜單,通過(guò)簡(jiǎn)單切換即可選擇頂部樣式,大家也可以在theme.css里面擴(kuò)展你的主題。
感謝各位的閱讀!關(guān)于“ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!