返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期
AdminLTE
AdminLTE 官网地址:https://adminlte.io/themes/AdminLTE/index2.html
首先去官网下载包下来,然后引入项目.
然后我们在web层添加区域Admin以及Common,关于AdminLTE的地址我们放在Common路劲下面.
在Common下添加LayoutController控制器.
Layout
这里菜单我们先不管,在后面的章节我在加上,首先是_Layout页代码:
1 @{ 2 Layout = null; 3 } 4 5 @using System.Web.Optimization 6 @{ 7 List<JCmsErp.Menu.Menus> sidebarMenuDataList = ViewBag.SidebarMenuModel; 8 } 9 <!DOCTYPE html> 10 <html> 11 <head> 12 <meta charset="UTF-8" /> 13 <title>AdminLTE 2 | Dashboard</title> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 <script src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jQuery/jQuery-2.1.4.min.js"></script> 16 17 <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 18 <!-- Bootstrap 3.3.4 --> 19 <script src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/js/bootstrap.js"></script> 20 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/css/bootstrap.css" rel="stylesheet" /> 21 <!-- FontAwesome 4.3.0 --> 22 <!-- Ionicons 2.0.0 --> 23 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/ionicons.min.css" rel="stylesheet" type="text/css" /> 24 <!-- Theme style --> 25 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> 26 <!-- AdminLTE Skins. Choose a skin from the css/skins 27 folder instead of downloading all of them to reduce the load. --> 28 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" /> 29 <!-- iCheck --> 30 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" /> 31 <!-- Morris chart --> 32 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/morris/morris.css" rel="stylesheet" type="text/css" /> 33 <!-- jvectormap --> 34 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" /> 35 <!-- Date Picker --> 36 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" /> 37 <!-- Daterange picker --> 38 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /> 39 <!-- bootstrap wysihtml5 - text editor --> 40 <link href="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> 41 42 <!-- ./wrapper --> 43 <!-- REQUIRED JS SCRIPTS --> 44 <!-- jQuery 2.2.3 --> 45 46 47 <style type="text/css"> 48 body { 49 font-family: verdana,helvetica,arial,sans-serif; 50 padding: 0 !important; 51 margin: 0; 52 } 53 54 .content { 55 min-height:700px; height:auto!important; 56 } 57 </style> 58 59 </head> 60 61 <body class="hold-transition skin-blue sidebar-mini"> 62 <div class="wrapper"> 63 @Html.Action("_MainHeader", "Layout", new { area = "Common" }) 64 @Html.Action("_LeftSideMenus", "Layout", new { area = "Common" }) 65 66 <div class="content-wrapper"> 67 @RenderBody() 68 </div> 69 @Html.Action("_MainFooter", "Layout", new { area = "Common" }) 70 <div class="control-sidebar-bg"></div> 71 </div> 72 </body> 73 </html>
这里总的模板页.以后在其他地方引用的话就引用这个页面.
头部页面
接下来是头部页面:
1 @{ 2 Layout = null; 3 } 4 5 <header class="main-header"> 6 <!-- Logo --> 7 <a href="@Url.Action("Index", "Home", new { area="Common"})" class="logo"> 8 <!-- mini logo for sidebar mini 50x50 pixels --> 9 <span class="logo-mini"><b>RMS</b></span> 10 <!-- logo for regular state and mobile devices --> 11 <span class="logo-lg"><b>WY</b>RMS</span> 12 </a> 13 <!-- Header Navbar --> 14 <nav class="navbar navbar-static-top" role="navigation"> 15 <!-- Sidebar toggle button--> 16 <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> 17 <span class="sr-only">Toggle navigation</span> 18 </a> 19 <!-- Navbar Right Menu --> 20 <div class="navbar-custom-menu"> 21 <ul class="nav navbar-nav"> 22 <!-- Messages: style can be found in dropdown.less--> 23 <li class="dropdown messages-menu"> 24 <!-- Menu toggle button --> 25 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 26 <i class="fa fa-envelope-o"></i> 27 <span class="label label-success">4</span> 28 </a> 29 <ul class="dropdown-menu"> 30 <li class="header">You have 4 messages</li> 31 <li> 32 <!-- inner menu: contains the messages --> 33 <ul class="menu"> 34 <li> 35 <!-- start message --> 36 <a href="#"> 37 <div class="pull-left"> 38 <!-- User Image --> 39 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="img-circle" alt="User Image"> 40 </div> 41 <!-- Message title and timestamp --> 42 <h4> 43 Support Team 44 <small><i class="fa fa-clock-o"></i> 5 mins</small> 45 </h4> 46 <!-- The message --> 47 <p>Why not buy a new awesome theme?</p> 48 </a> 49 </li><!-- end message --> 50 </ul><!-- /.menu --> 51 </li> 52 <li class="footer"><a href="#">See All Messages</a></li> 53 </ul> 54 </li><!-- /.messages-menu --> 55 <!-- Notifications Menu --> 56 <li class="dropdown notifications-menu"> 57 <!-- Menu toggle button --> 58 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 59 <i class="fa fa-bell-o"></i> 60 <span class="label label-warning">10</span> 61 </a> 62 <ul class="dropdown-menu"> 63 <li class="header">You have 10 notifications</li> 64 <li> 65 <!-- Inner Menu: contains the notifications --> 66 <ul class="menu"> 67 <li> 68 <!-- start notification --> 69 <a href="#"> 70 <i class="fa fa-users text-aqua"></i> 5 new members joined today 71 </a> 72 </li><!-- end notification --> 73 </ul> 74 </li> 75 <li class="footer"><a href="#">View all</a></li> 76 </ul> 77 </li> 78 <!-- Tasks Menu --> 79 <li class="dropdown tasks-menu"> 80 <!-- Menu Toggle Button --> 81 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 82 <i class="fa fa-flag-o"></i> 83 <span class="label label-danger">9</span> 84 </a> 85 <ul class="dropdown-menu"> 86 <li class="header">You have 9 tasks</li> 87 <li> 88 <!-- Inner menu: contains the tasks --> 89 <ul class="menu"> 90 <li> 91 <!-- Task item --> 92 <a href="#"> 93 <!-- Task title and progress text --> 94 <h3> 95 Design some buttons 96 <small class="pull-right">20%</small> 97 </h3> 98 <!-- The progress bar --> 99 <div class="progress xs"> 100 <!-- Change the css width attribute to simulate progress --> 101 <div class="progress-bar progress-bar-aqua" style=" 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 102 <span class="sr-only">20% Complete</span> 103 </div> 104 </div> 105 </a> 106 </li><!-- end task item --> 107 </ul> 108 </li> 109 <li class="footer"> 110 <a href="#">View all tasks</a> 111 </li> 112 </ul> 113 </li> 114 <!-- User Account Menu --> 115 <li class="dropdown user user-menu"> 116 <!-- Menu Toggle Button --> 117 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 118 <!-- The user image in the navbar--> 119 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="user-image" alt="User Image"> 120 <!-- hidden-xs hides the username on small devices so only the image appears. --> 121 <span class="hidden-xs">管理员</span> 122 </a> 123 <ul class="dropdown-menu"> 124 <!-- The user image in the menu --> 125 <li class="user-header"> 126 <img src="@Url.Content("/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/avatar04.png")" class="img-circle" alt="User Image"> 127 <p> 128 管理员 - Web Developer 129 <small>Member since 2015.8.20</small> 130 </p> 131 </li> 132 <!-- Menu Body --> 133 <li class="user-body"> 134 <div class="col-xs-4 text-center"> 135 <a href="#">Followers</a> 136 </div> 137 <div class="col-xs-4 text-center"> 138 <a href="#">Sales</a> 139 </div> 140 <div class="col-xs-4 text-center"> 141 <a href="#">Friends</a> 142 </div> 143 </li> 144 <!-- Menu Footer--> 145 <li class="user-footer"> 146 <div class="pull-left"> 147 <a href="#" class="btn btn-default btn-flat">个人信息</a> 148 </div> 149 <div class="pull-right"> 150 <a href="@Url.Action("Logout", "Login", new { Area="Common"})" class="btn btn-default btn-flat">退出</a> 151 </div> 152 </li> 153 </ul> 154 </li> 155 156 </ul> 157 </div> 158 </nav> 159 </header>
头部是要是导航栏里面的东西包括用户退出功能也在这里.
菜单
接下来是菜单,菜单我还没有设计数据库,会在接下来的章节说明.先写死:
1 @model JCmsErp.Web.Areas.Common.Models.MeunViewModel 2 @{ 3 Layout = null; 4 } 5 6 7 <aside class="main-sidebar"> 8 <!-- sidebar: style can be found in sidebar.less --> 9 <section class="sidebar"> 10 <!-- Sidebar user panel (optional) --> 11 <div class="user-panel"> 12 <div class="pull-left image"> 13 <img src="~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> 14 </div> 15 <div class="pull-left info"> 16 <p>Alexander Pierce</p> 17 <!-- Status --> 18 <a href="#"><i class="fa fa-circle text-success"></i> Online</a> 19 </div> 20 </div> 21 <!-- search form (Optional) --> 22 <form action="#" method="get" class="sidebar-form"> 23 <div class="input-group"> 24 <input type="text" name="q" class="form-control" placeholder="Search..."> 25 <span class="input-group-btn"> 26 <button type="submit" name="search" id="search-btn" class="btn btn-flat"> 27 <i class="fa fa-search"></i> 28 </button> 29 </span> 30 </div> 31 </form> 32 <!-- /.search form --> 33 <!-- Sidebar Menu --> 34 <ul class="sidebar-menu"> 35 <li class="header">HEADER</li> 36 <!-- Optionally, you can add icons to the links --> 37 <li class="active"><a href="/User/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>用户管理</span></a></li> 38 <li><a href="/WorkFlow/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>职位管理</span></a></li> 39 <li><a href="/Member/Role/Index"><i class="fa fa-link"></i><i class="fa fa-windows"></i> <span>角色管理</span></a></li> 40 <li class="active"><a href="/Home/Userinfo"><i class="fa fa-windows"></i> <span>用户详情</span></a></li> 41 <li class="active"><a href="/Home/UsersList"><i class="fa fa-windows"></i> <span>角色管理</span></a></li> 42 <li class="active"><a href="/Home/AbpLanguages"><i class="fa fa-windows"></i> <span>会员管理</span></a></li> 43 <li><a href="/Home/ReadMail"><i class="fa fa-link"></i> <span>邮件管理</span></a></li> 44 <li><a href="/Home/UserProfile"><i class="fa fa-link"></i> <span>语言管理</span></a></li> 45 <li><a href="/Home/ChartJS"><i class="fa fa-link"></i> <span>Chart管理</span></a></li> 46 <li class="treeview"> 47 <a href="/Home/ChartJS"> 48 <i class="fa fa-link"></i> <span>菜单管理</span> 49 <span class="pull-right-container"> 50 <i class="fa fa-angle-left pull-right"></i> 51 </span> 52 </a> 53 <ul class="treeview-menu"> 54 <li><a href="/Home/ChartJS">Link in level 2</a></li> 55 <li><a href="/Home/ChartJS">Link in level 2</a></li> 56 </ul> 57 </li> 58 </ul> 59 <!-- /.sidebar-menu --> 60 </section> 61 <!-- /.sidebar --> 62 </aside>
Foot
最后是Foot:
1 @{ 2 Layout = null; 3 } 4 5 <footer class="main-footer"> 6 <!-- To the right --> 7 <div class="pull-right hidden-xs"> 8 Anything you want 9 </div> 10 <!-- Default to the left --> 11 <strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved. 12 </footer> 13 <aside class="control-sidebar control-sidebar-dark"> 14 <!-- Create the tabs --> 15 <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> 16 <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> 17 <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> 18 </ul> 19 <!-- Tab panes --> 20 <div class="tab-content"> 21 <!-- Home tab content --> 22 <div class="tab-pane active" id="control-sidebar-home-tab"> 23 <h3 class="control-sidebar-heading">Recent Activity</h3> 24 <ul class="control-sidebar-menu"> 25 <li> 26 <a href="javascript:;"> 27 <i class="menu-icon fa fa-birthday-cake bg-red"></i> 28 <div class="menu-info"> 29 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4> 30 <p>Will be 23 on April 24th</p> 31 </div> 32 </a> 33 </li> 34 </ul> 35 <!-- /.control-sidebar-menu --> 36 <h3 class="control-sidebar-heading">Tasks Progress</h3> 37 <ul class="control-sidebar-menu"> 38 <li> 39 <a href="javascript:;"> 40 <h4 class="control-sidebar-subheading"> 41 Custom Template Design 42 <span class="pull-right-container"> 43 <span class="label label-danger pull-right">70%</span> 44 </span> 45 </h4> 46 <div class="progress progress-xxs"> 47 <div class="progress-bar progress-bar-danger" style=" 70%"></div> 48 </div> 49 </a> 50 </li> 51 </ul> 52 <!-- /.control-sidebar-menu --> 53 </div> 54 <!-- /.tab-pane --> 55 <!-- Stats tab content --> 56 <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div> 57 <!-- /.tab-pane --> 58 <!-- Settings tab content --> 59 <div class="tab-pane" id="control-sidebar-settings-tab"> 60 <form method="post"> 61 <h3 class="control-sidebar-heading">General Settings</h3> 62 <div class="form-group"> 63 <label class="control-sidebar-subheading"> 64 Report panel usage 65 <input type="checkbox" class="pull-right" checked> 66 </label> 67 <p> 68 Some information about this general settings option 69 </p> 70 </div> 71 <!-- /.form-group --> 72 </form> 73 </div> 74 <!-- /.tab-pane --> 75 </div> 76 </aside>
效果
就这样我们的模板页就做好了,看效果.
扩展
需要说明一下的是,需要引入bootstrap包和jquery js.至此模板页诞生.
有人说在_Layout页面东西很多js和css过多,我们需要给他减负,这里首先当然想到的是@Styles.Render()和 @Scripts.Render()了, @Scripts.Render是mvc通用,abp继承mvc自然是支持的.
在页面上可以用@Styles.Render("~/Content/css") 来加载css,首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件,BundleConfig就是一个微软新加的 一个打包的配置类,用来Add 各种Bundle.
然后再向ScriptBundle添加js,同时引用到模板页上来.看下代码
1 using System.Web.Optimization; 2 3 namespace JCmsErp.Web 4 { 5 public static class BundleConfig 6 { 7 public static void RegisterBundles(BundleCollection bundles) 8 { 9 bundles.IgnoreList.Clear(); 10 11 //VENDOR RESOURCES 12 13 //~/Bundles/App/vendor/css 14 bundles.Add( 15 new StyleBundle("~/Bundles/App/vendor/css") 16 .Include("~/Content/themes/base/all.css", new CssRewriteUrlTransform()) 17 .Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform()) 18 .Include("~/Content/toastr.min.css") 19 .Include("~/Scripts/sweetalert/sweet-alert.css") 20 .Include("~/Content/flags/famfamfam-flags.css", new CssRewriteUrlTransform()) 21 .Include("~/Content/font-awesome.min.css", new CssRewriteUrlTransform()) 22 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/css/bootstrap.css") 23 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/ionicons.min.css") 24 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/AdminLTE.min.css") 25 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/dist/css/skins/_all-skins.min.css") 26 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/iCheck/flat/blue.css") 27 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/morris/morris.css") 28 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jvectormap/jquery-jvectormap-1.2.2.css") 29 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/datepicker/datepicker3.css") 30 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/daterangepicker/daterangepicker-bs3.css") 31 .Include("~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css") 32 33 ); 34 35 //~/Bundles/App/vendor/js 36 bundles.Add( 37 new ScriptBundle("~/Bundles/App/vendor/js") 38 .Include( 39 "~/Abp/Framework/scripts/utils/ie10fix.js", 40 "~/Scripts/json2.min.js", 41 42 "~/Scripts/modernizr-2.8.3.js", 43 44 "~/Scripts/jquery-2.1.4.min.js", 45 "~/Scripts/jquery-ui-1.11.4.min.js", 46 47 "~/Scripts/bootstrap.min.js", 48 49 "~/Scripts/moment-with-locales.min.js", 50 "~/Scripts/jquery.blockUI.js", 51 "~/Scripts/toastr.min.js", 52 "~/Scripts/sweetalert/sweet-alert.min.js", 53 "~/Scripts/others/spinjs/spin.js", 54 "~/Scripts/others/spinjs/jquery.spin.js", 55 56 "~/Scripts/angular.min.js", 57 "~/Scripts/angular-animate.min.js", 58 "~/Scripts/angular-sanitize.min.js", 59 "~/Scripts/angular-ui-router.min.js", 60 "~/Scripts/angular-ui/ui-bootstrap.min.js", 61 "~/Scripts/angular-ui/ui-bootstrap-tpls.min.js", 62 "~/Scripts/angular-ui/ui-utils.min.js", 63 64 "~/Abp/Framework/scripts/abp.js", 65 "~/Abp/Framework/scripts/libs/abp.jquery.js", 66 "~/Abp/Framework/scripts/libs/abp.toastr.js", 67 "~/Abp/Framework/scripts/libs/abp.blockUI.js", 68 "~/Abp/Framework/scripts/libs/abp.spin.js", 69 "~/Abp/Framework/scripts/libs/abp.sweet-alert.js", 70 "~/Abp/Framework/scripts/libs/abp.moment.js", 71 "~/Abp/Framework/scripts/libs/angularjs/abp.ng.js", 72 "~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/bootstrap/js/bootstrap.js", 73 "~/Scripts/AdminLTE-2.1.1/AdminLTE-2.1.1/plugins/jQuery/jQuery-2.1.4.min.js", 74 "~/Scripts/AdminLTE-2.3.11/AdminLTE-2.3.11/dist/js/app.min.js" 75 ) 76 ); 77 78 //APPLICATION RESOURCES 79 80 //~/Bundles/App/Main/css 81 bundles.Add( 82 new StyleBundle("~/Bundles/App/Main/css") 83 .IncludeDirectory("~/App/Main", "*.css", true) 84 ); 85 86 //~/Bundles/App/Main/js 87 bundles.Add( 88 new ScriptBundle("~/Bundles/App/Main/js") 89 .IncludeDirectory("~/App/Main", "*.js", true) 90 ); 91 } 92 } 93 }
1 @{ 2 Layout = null; 3 } 4 5 @using System.Web.Optimization 6 @{ 7 List<JCmsErp.Menu.Menus> sidebarMenuDataList = ViewBag.SidebarMenuModel; 8 } 9 <!DOCTYPE html> 10 <html> 11 <head> 12 <meta charset="UTF-8" /> 13 <title>AdminLTE 2 | Dashboard</title> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 16 <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 17 18 @Styles.Render("~/Bundles/App/vendor/css") 19 <style type="text/css"> 20 body { 21 font-family: verdana,helvetica,arial,sans-serif; 22 padding: 0 !important; 23 margin: 0; 24 } 25 .content { 26 min-height:700px; height:auto!important; 27 } 28 </style> 29 </head> 30 <body class="hold-transition skin-blue sidebar-mini"> 31 <div class="wrapper"> 32 @Html.Action("_MainHeader", "Layout", new { area = "Common" }) 33 @Html.Action("_LeftSideMenus", "Layout", new { area = "Common" }) 34 <div class="content-wrapper"> 35 @RenderBody() 36 </div> 37 @Html.Action("_MainFooter", "Layout", new { area = "Common" }) 38 <div class="control-sidebar-bg"></div> 39 </div> 40 @Scripts.Render("~/Bundles/App/vendor/js") 41 42 </body> 43 </html>
就这样模板页,看上去简洁了很多.至此,模板页.
