小编给大家分享一下ASP.NET MVC中如何构建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
Toggle navigation
Aircraft
Jack Smith
My Account
Admin Panel
Users
Security
Payments
Logout
_MenuPartial.cshtml
- Account +3
-
- Sign In
- Sign Up
- Reset Password
Legal
Privacy Policy
Terms and Conditions
Help
Faq
_FooterPartial.cshtml
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";
}
Help
Home
Help
@Html.Partial("_FooterPartial")
这样，通过简单的几步就搭好了一个简洁大方的ASP.NETMVC后台管理模板页，半个小时就搞定了，怎么样，效率很高吧！这里我顺便把里面的主题样式加到首页顶部菜单，通过简单切换即可选择顶部样式，大家也可以在theme.css里面扩展你的主题。
以上是“ASP.NET MVC中如何构建Admin主页”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文标题：ASP.NETMVC中如何构建Admin主页-创新互联
转载注明：
http://cdkjz.cn/article/djhehe.html
