细致引见关于ASP.NET MVC Admin主页的疾速构建【C#.Net教程】,ASP.NET， MVC ，Admin

这篇文章主要为人人细致引见了ASP.NET MVC Admin主页疾速构建的相干材料，具有肯定的参考价值，感兴趣的小伙伴们能够参考一下

媒介

背景开辟人员平常不喜好调款式，搞半天款式出不来，还要斟酌种种浏览器兼容，省心费力不讨好，还好互联网时期有大批的资源共享，防止我们从零最先，如今就来看怎样疾速构建一个ASP.NETMVC背景治理admin主页的要领，先看一看终究的结果！

第一步：挑选一个admin模板

　　互联网时期就是资源共享的时期，网上种种前端模板，这里主假如申明怎样把模板整合到我们的ASP.NETMVC项目中，至于模板人人能够本身去挑选喜好的，这里我们挑选这个清新版的AircraftAdmin，起首看看AircraftAdmin的结果。

第二步：精简模板

　　一般下载一个模板后翻开会发明，内里混淆了大批的css款式js插件，有很多是我们不须要的，直接应用到项目中并不轻易，怎样办呢，我的履历就是，删删删，没错，下载模板后翻开，把不须要的html，css，js一步一步干掉。

1.删除不须要的html元素

　　用vs来开一个页面，剖析团体规划，再分步删除，如下图，顶部和左边的菜单栏我们须要保存，主内容区不须要的html删除。

2.精简css文件

　　经由过程剖析，一共援用了四个css文件，bootstrap.css（bootstrap款式），font-awesome.css（图标字体），theme.css（主题），premium.css（未知），把末了一个删除，革新后一般，因而保存三个css文件。

3.精简js文件

　　同步骤2一样，把一些不须要的js删除，假如你对js不是很熟悉或许不清楚页面中的某些js作用，能够临时先保存这些js，经由过程删除一个再革新看结果确认某个js作用。

经由上面几步，页面文件和援用文件已大大减少了，基础文档我们也清楚了。下一步将整合到MVC项目中。

第三步：整合相干文件

1.下面我们最先剖析文档构造，竖立MVC项目，整合相干文件。全部文档我们分为三块，头部东西信息栏，左边菜单栏、主体内容区，头部和左边相对来说是稳定的，而且每一个页面都公用的部份，把它们提取出来，做为MVC项目中的分部视图_TopBarPartial.cshtml和_MenuPartial.cshtml增加进去。这里我对_MenuPartial.cshtml进行了简化，只留下几个示例菜单，主体底部区也作为一个大众分部视图_FooterPartial.cshtml，能够在此增加你的公司和版权信息。

_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字体图标，font-awesome是一个优异的字体图标库，想相识更多的请参考官网 http://fontawesome.dashgame.com/ 。

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"
   ));
 }

4.增加LayoutAdmin母版页并修正Index首页内容，将Index母版页指向LayoutAdmin

@{
 Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
 ViewBag.Title = "Home Page"; 
}

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

　　如许，经由过程简朴的几步就搭好了一个简约慷慨的ASP.NETMVC背景治理模板页，半个小时就搞定了，怎样，效力很高吧！这里我顺便把内里的主题款式加到首页顶部菜单，经由过程简朴切换即可挑选顶部款式，人人也能够在theme.css内里扩大你的主题。

以上就是细致引见关于ASP.NET MVC Admin主页的疾速构建的细致内容，更多请关注ki4网别的相干文章！