序

后台开发人员一般不喜欢调整风格，半天出不了风格。他们还需要考虑各种浏览器的兼容性，很辛苦，吃力不讨好。好在互联网时代有很多资源共享，可以避免从头开始。现在我们来看看如何快速构建一个ASP的方法。NETMVC后台管理管理员主页，先来看看最终效果吧！

步骤1:选择管理模板

互联网时代是资源共享的时代。网上有各种前端模板。这里，我们主要解释如何将模板集成到我们的ASP中。NETMVC项目。至于模板，可以选择自己喜欢的。在这里，我们选择这款清爽版的AircraftAdmin，先来看看AircraftAdmin的效果。

步骤2:简化模板

通常，当你下载一个模板并打开它时，你会发现有很多css样式的js插件，其中许多我们并不需要。直接申请项目不方便。我该怎么办？我的经验是，删除它，是的，下载模板后打开，把不必要的html、css、js一步步干掉。

1.删除不必要的html元素

使用vs打开一个页面，分析整体布局，一步一步删除，如下图所示，我们需要保留顶部和左侧的菜单栏，删除主内容区不需要的html。

2.简化css文件

通过分析，引用了4个css文件，分别是bootstrap.css(bootstrap style)、font-awesome.css(图标字体)、theme.css(主题)和premium.css(未知)。最后一个被删除，刷新后正常，所以保留了三个css文件。

3.简化js文件

就像步骤2一样，删除一些不必要的js。如果不熟悉js或者不知道页面上一些js的功能，可以暂时保留这些js，删除一个刷新确认一些js的功能。

经过以上步骤，页面文件和参考文件已经大大减少，基本文档清晰。下一步将是将其集成到MVC项目中。

第三步：整合相关文件

1.接下来，我们开始分析文档结构，建立MVC项目并集成相关文档。整个文档分为三个部分：页眉工具信息栏、左侧菜单栏、主要内容区、页眉和左侧相对不变，每页都有一个公共部分。提取它们，并将其添加为MVC项目中的partial view _ topbar partial . cshtml和_ menubartial.cshtml。在这里，我简化了_MenuPartial.cshtml，只留下了几个示例菜单，主体的底部区域也作为一个公共的分部视图_FooterPartial.cshtml，在这里可以添加自己的公司和版权信息。

_TopBarPartial.cshtml

div class=' nav bar nav bar-默认值'角色='导航' div class='导航条-标题'按钮类型=' button ' class='导航条-切换折叠'数据-切换='折叠'数据-目标='。导航栏-折叠' span class=' Sr-only '切换导航/span class=' icon-bar '/span span class=' icon-bar '/span span class=' icon-bar '/span/button a class=' href=' index。html ' span class=' nav bar-brand ' span class=' fa fa-paper-plane '/span飞机/span/a/div class='导航栏-折叠' style='高度3360 1pxul id=' main-menu ' class=' nav bar-nav bar-right ' Li class=' down hidden-xs ' a href=' # ' class=' drop down-toggle ' data-toggle=' drop down ' span class=' padding-right-small ' style=' position : relative；top : 3px/span I class=' fa fa-user '/I杰克史密斯' fa fa-插入符号-向下'/I/a ul class='下拉菜单利亚./"我的帐户/a/Li Li="分隔线/Li Li="下拉-标题"管理面板/li lia href=./"用户"。/' Security/a/Li lia tabindex='-1 ' href=' ./'付款/a/Li Li class='除法器'/Li lia tabindex='-1 ' href='登录。html ' Logout/a/Li/ul/Li/ul class=' nav bar-nav bar-right ' Li class='下拉隐藏-xs ' a href=' # ' class='下拉-切换'数据-切换='下拉' I class=' fa-转速表/i /a ul class='下拉菜单主题-选择'阿利href='#' data-color='

div class=' sidebar-nav ' ul lia href=' # ' data-target=' .accounts-menu ' class=' nav-header collapsed ' data-toggle=' collapse ' I class=' fa fa fa-fw fa-公文包/I帐户标签-信息3/span/a/Li帐户-菜单导航-列表折叠span legal-menu ' class=' nav-header collapsed ' data-toggle=' collapse ' I class=' fa fa-fw fa-legal '/I Legali class=' fa-collapse '/I/a/Li ul class=' legal-menu nav-header collapse ' lia href=' # ' span class=' fa-fa-caret-right '/span条款和条件/a/li /ul /li lia

页脚hr！-购买站点许可证以从页脚： http://www.portnine.com/bootstrap-themes-p波特宁。com/Bootstrap-主题' target=' _ blank '免费的Bootstrap主题/a通过http://。波特宁。com ' target=' _ blank ' portnine/a/p/p 2014 a href=' http://www .波特宁。com ' target=' _ blank ' portnine/a/p/页脚通过NUGET安装字体-棒极了字体图标，字体-棒极了是一个优秀的字体图标库，想了解更多的请参考官网http://fontawesome.dashgame.com/。

3.在项目的BundleConfig文件中，把相关的钢性铸铁和射流研究…文件添加进去。

//有关绑定的详细信息，请访问http://go.microsoft.com/fwlink/?LinkId=301862公共静态无效注册包(BundleCollection捆绑包){捆绑包.添加（新的脚本包(' ~/bundle/jquery ').包括(' ~/Scripts/jquery-{version}).js’)；捆绑包。添加（新的脚本包(' ~/bundles/jqueryval ').包括(' ~/Scripts/jquery。验证* ')；//使用要用于开发和学习的Modernizr的开发版本。然后，当你做好//生产准备时，请使用http://modernizr.com上的生成工具来仅选择所需的测试捆绑包。添加（新的脚本包(' ~/bundle/modernizr ').包括(' ~/Scripts/modernizr-*)；捆绑包。添加（新的脚本包(' ~/bundle/bootstrap ').包括(' ~/Scripts/bootstrap.js '，' ~/Scripts/response。js’)；捆绑包。添加（新的StyleBundle('~/Content/css ').包括(' ~/Content/bootstrap.css '，' ~/Content/site.css '，' ~/Content/theme.css '，' ~/Content/CSS/font-awesome。量滴CSS ')；}4.添加LayoutAdmin母版页并修改索引首页内容，将索引母版页指向LayoutAdmin

@ {布局=' ~/视图/共享/_布局管理。“cshtml”；视图包。标题="主页";} div class=' header ' h1 class=' page-title ' help/h1 ul class='面包屑' lia href=' # ' Home/a/Li Li class=' active ' help/Li/ul/div class=' main-content ' div class=' FAQ-content '/div @ Html .分部(' _FooterPartial')/div这样，通过简单的几步就搭好了一个简洁大方的ASP .NETMVC后台管理模板页，半个小时就搞定了，怎么样，效率很高吧！这里我顺便把里面的主题样式加到首页顶部菜单，通过简单切换即可选择顶部样式，大家也可以在主题。钢性铸铁里面扩展你的主题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。