真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

ASP.NETMVCAdmin主頁(yè)如何快速構(gòu)建-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(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)站。

效果


ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建

第一步:選擇一個(gè)admin模板

互聯(lián)網(wǎng)時(shí)代就是資源共享的時(shí)代,網(wǎng)上各種前端模板,這里主要是說(shuō)明怎么把模板整合到我們的ASP.NETMVC項(xiàng)目中,至于模板大家可以自己去選擇喜歡的,這里我們選擇這個(gè)清爽版的AircraftAdmin,首先看看AircraftAdmin的效果。

ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建

第二步:精簡(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刪除。

ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建

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


  
   
    Toggle navigation
    
    
    
   
    Aircraft
  
                        Jack Smith                      
  • My Account
  •            Admin Panel      
  • Users
  •      
  • Security
  •      
  • Payments
  •            
  • Logout
  •                                                    
  •       
  •       
                              
  •                                  
  •                 

    _MenuPartial.cshtml

    
     
        
    •  Account +3
    •   
    •         
    •  Sign In
    •     
    •  Sign Up
    •     
    •  Reset Password
    •    
         
  •  Legal
  •   
  •         
  •  Privacy Policy
  •     
  •  Terms and Conditions
  •          
  •  Help
  •   
  •  Faq
  •  

    _FooterPartial.cshtml

     
       Portnine

     

    © 2014 Portnine

    2.通過(guò)NUGET安裝font-awesome字體圖標(biāo),font-awesome是一個(gè)優(yōu)秀的字體圖標(biāo)庫(kù),想了解更多的請(qǐng)參考官網(wǎng) http://fontawesome.dashgame.com/ 。

    ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建

    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ò)展你的主題。

    ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建

    感謝各位的閱讀!關(guān)于“ASP.NET MVC Admin主頁(yè)如何快速構(gòu)建”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!


    分享題目:ASP.NETMVCAdmin主頁(yè)如何快速構(gòu)建-創(chuàng)新互聯(lián)
    本文地址:http://weahome.cn/article/dcpghh.html

    在線咨詢(xún)

    微信咨詢(xún)

    電話咨詢(xún)

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部