这篇文章主要为大家详细介绍了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主页的快速构建的详细内容。