快速構建ASP.NET MVC Admin主頁

時間 2019-12-07

標籤快速構建 asp.net asp mvc admin 主頁欄目 ASP 简体版

原文原文鏈接

前言css

後臺開發人員通常不喜歡調樣式，搞半天樣式出不來，還要考慮各類瀏覽器兼容，費心費力不討好，還好互聯網時代有大量的資源共享，避免咱們從零開始，如今就來看怎麼快速構建一個ASP.NET MVC後臺管理admin主頁的方法，先看一看最終的效果！html

　　第一步：選擇一個admin模板

　　互聯網時代就是資源共享的時代，網上各類前端模板，這裏主要是說明怎麼把模板整合到咱們的ASP.NET MVC項目中，至於模板你們能夠本身去選擇喜歡的，這裏咱們選擇這個清爽版的AircraftAdmin，首先看看AircraftAdmin的效果。前端

　　第二步：精簡模板

　　一般下載一個模板後打開會發現，裏面混雜了大量的css樣式js插件，有不少是咱們不須要的，直接應用到項目中並不方便，怎麼辦呢，個人經驗就是，刪刪刪，沒錯，下載模板後打開，把不須要的html，css，js一步一步幹掉。jquery

　　1.刪除不須要的html元素

　　用vs來開一個頁面，分析總體佈局，再分步刪除，以下圖，頂部和左側的菜單欄咱們須要保留，主內容區不須要的html刪除。bootstrap

　　2.精簡css文件

　　經過分析，一共引用了四個css文件，bootstrap.css（bootstrap樣式），font-awesome.css（圖標字體），theme.css（主題），premium.css（未知），把最後一個刪除，刷新後正常，所以保留三個css文件。瀏覽器

　　3.精簡js文件

　　同步驟2同樣，把一些不須要的js刪除，若是你對js不是很熟悉或者不清楚頁面中的某些js做用，能夠暫時先保留這些js，經過刪除一個再刷新看效果確認某個js做用。ide

通過上面幾步，頁面文件和引用文件已經大大減小了，基本文檔咱們也清晰了。下一步將整合到MVC項目中。工具

　　第三步：整合相關文件

　　1.下面咱們開始分析文檔結構，創建MVC項目，整合相關文件。整個文檔咱們分爲三塊，頭部工具信息欄，左側菜單欄、主體內容區，頭部和左側相對來講是不變的，並且每一個頁面都公用的部分，把它們提取出來，作爲MVC項目中的分部視圖_TopBarPartial.cshtml和_MenuPartial.cshtml添加進去。這裏我對_MenuPartial.cshtml進行了簡化，只留下幾個示例菜單，主體底部區也做爲一個公共分部視圖_FooterPartial.cshtml，能夠在此添加你的公司和版權信息。佈局

_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>

View Code

_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>

View Code

_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>

View Code

　　2.經過NUGET安裝font-awesome字體圖標，font-awesome是一個優秀的字體圖標庫，想了解更多的請參考官網 http://fontawesome.io/ 。

　　3.在項目的BundleConfig文件中，把相關的css和js文件添加進去。

// 有關綁定的詳細信息，請訪問 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"
                     ));
        }

View Code

　　4.添加LayoutAdmin母版頁並修改Index首頁內容，將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>