ASP.NETMVC中如何構(gòu)建Admin主頁-創(chuàng)新互聯(lián)

小編給大家分享一下ASP.NET MVC中如何構(gòu)建Admin主頁，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！成都創(chuàng)新互聯(lián)公司具備承接各種類型的成都網(wǎng)站建設(shè)、成都做網(wǎng)站項(xiàng)目的能力。經(jīng)過十年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

效果

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

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

第二步：精簡模板

　　通常下載一個(gè)模板后打開會(huì)發(fā)現(xiàn)，里面混雜了大量的css樣式j(luò)s插件，有很多是我們不需要的，直接應(yīng)用到項(xiàng)目中并不方便，怎么辦呢，我的經(jīng)驗(yàn)就是，刪刪刪，沒錯(cuò)，下載模板后打開，把不需要的html，css，js一步一步干掉。

1.刪除不需要的html元素

　　用vs來開一個(gè)頁面，分析整體布局，再分步刪除，如下圖，頂部和左側(cè)的菜單欄我們需要保留，主內(nèi)容區(qū)不需要的html刪除。

2.精簡css文件

　　通過分析，一共引用了四個(gè)css文件，bootstrap.css（bootstrap樣式），font-awesome.css（圖標(biāo)字體），theme.css（主題），premium.css（未知），把最后一個(gè)刪除，刷新后正常，因此保留三個(gè)css文件。

3.精簡js文件

　　同步驟2一樣，把一些不需要的js刪除，如果你對js不是很熟悉或者不清楚頁面中的某些js作用，可以暫時(shí)先保留這些js，通過刪除一個(gè)再刷新看效果確認(rèn)某個(gè)js作用。

經(jīng)過上面幾步，頁面文件和引用文件已經(jīng)大大減少了，基本文檔我們也清晰了。下一步將整合到MVC項(xiàng)目中。

第三步：整合相關(guān)文件

1.下面我們開始分析文檔結(jié)構(gòu)，建立MVC項(xiàng)目，整合相關(guān)文件。整個(gè)文檔我們分為三塊，頭部工具信息欄，左側(cè)菜單欄、主體內(nèi)容區(qū)，頭部和左側(cè)相對來說是不變的，而且每個(gè)頁面都公用的部分，把它們提取出來，做為MVC項(xiàng)目中的分部視圖_TopBarPartial.cshtml和_MenuPartial.cshtml添加進(jìn)去。這里我對_MenuPartial.cshtml進(jìn)行了簡化，只留下幾個(gè)示例菜單，主體底部區(qū)也作為一個(gè)公共分部視圖_FooterPartial.cshtml，可以在此添加你的公司和版權(quán)信息。

_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字體圖標(biāo)，font-awesome是一個(gè)優(yōu)秀的字體圖標(biāo)庫，想了解更多的請參考官網(wǎng) http://fontawesome.dashgame.com/ 。

3.在項(xiàng)目的BundleConfig文件中，把相關(guān)的css和js文件添加進(jìn)去。

// 有關(guān)綁定的詳細(xì)信息，請?jiān)L問 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ā)版本。然后，當(dāng)你做好
  // 生產(chǎn)準(zhǔn)備時(shí)，請使用 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"; 
}

<p class="header">
 <h2 class="page-title">Help</h2>
 <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>

　　這樣，通過簡單的幾步就搭好了一個(gè)簡潔大方的ASP.NETMVC后臺(tái)管理模板頁，半個(gè)小時(shí)就搞定了，怎么樣，效率很高吧！這里我順便把里面的主題樣式加到首頁頂部菜單，通過簡單切換即可選擇頂部樣式，大家也可以在theme.css里面擴(kuò)展你的主題。

以上是“ASP.NET MVC中如何構(gòu)建Admin主頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：ASP.NETMVC中如何構(gòu)建Admin主頁-創(chuàng)新互聯(lián)
本文來源：http://bm7419.com/article44/djhehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、企業(yè)建站、網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)