重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

ASP.NETMVCAdmin主页如何快速构建-创新互联

这篇文章给大家分享的是有关ASP.NET MVC Admin主页如何快速构建的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家集网站建设,献县企业网站建设,献县品牌网站建设,网站定制,献县网站建设报价,网络营销,网络优化,献县网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

效果


ASP.NET MVC Admin主页如何快速构建

第一步:选择一个admin模板

互联网时代就是资源共享的时代,网上各种前端模板,这里主要是说明怎么把模板整合到我们的ASP.NETMVC项目中,至于模板大家可以自己去选择喜欢的,这里我们选择这个清爽版的AircraftAdmin,首先看看AircraftAdmin的效果。

ASP.NET MVC Admin主页如何快速构建

第二步:精简模板

通常下载一个模板后打开会发现,里面混杂了大量的css样式js插件,有很多是我们不需要的,直接应用到项目中并不方便,怎么办呢,我的经验就是,删删删,没错,下载模板后打开,把不需要的html,css,js一步一步干掉。

1.删除不需要的html元素

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

ASP.NET MVC Admin主页如何快速构建

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

     
       Free Bootstrap Theme by Portnine

     

    © 2014 Portnine

    2.通过NUGET安装font-awesome字体图标,font-awesome是一个优秀的字体图标库,想了解更多的请参考官网 http://fontawesome.dashgame.com/ 。

    ASP.NET MVC Admin主页如何快速构建

    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.NET MVC Admin主页如何快速构建”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    网站栏目:ASP.NETMVCAdmin主页如何快速构建-创新互联
    标题链接:http://cqcxhl.cn/article/dcpghh.html