返回总目录: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>

View Code

这里总的模板页.以后在其他地方引用的话就引用这个页面.

头部页面

接下来是头部页面:

  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="width: 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>

View Code

头部是要是导航栏里面的东西包括用户退出功能也在这里.

菜单

接下来是菜单,菜单我还没有设计数据库,会在接下来的章节说明.先写死:

 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>

View Code

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 &copy; 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="width: 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>

View Code

效果

就这样我们的模板页就做好了,看效果.

扩展

需要说明一下的是,需要引入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 }

View Code

 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>

View Code

就这样模板页,看上去简洁了很多.至此,模板页.

返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期

转载于:https://www.cnblogs.com/anyushengcms/p/7261822.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

24gulp打包angular1实例和作用域之间通信
一、gulp打包angular1实例1、监听通配路径下文件及内容的变化，2、注入到index.html文件中，注入完毕后渲染该页面，从上往下执行到模块加载时，模块已经存在。3、执行外来类库4、执行以ng-app的属性值定义的模块及该模块的控制器5、执…...
2024/4/20 19:47:17
一个angular站点的开始(1)
搭建环境参考BAIDU过很多资料，项目参考过各个大神的代码， 2以上的学习文档国内很少，遇到问题只能要么stackoverflow,要么自己琢磨原理，页面可以浏览器了，程序调试配置又是头痛问题，百思不得其解&#xff0c…...
2024/4/21 4:32:40
后台管理系统-使用AdminLTE搭建前端
返回总目录《ABP项目实战-后台管理系统-目录》安装AdminLte 我们通过Nuget包管理器安装AdminLte 引用三方组件因为AdminLte使用到了很多三方的组件，所以我们需要将这些组件也引用到项目中（可以在AdminLte官网下载），放在Content目…...
2024/4/21 8:26:55
angularjs checked选中 ng-checked无效的问题！adminLte
使用adminlte框架时，默认的组件就是name一样的 radio，如果name一样那么checked“checked”在浏览器中是无法生效的！！ 解决方案： 1：修改不一样的name 2 : 自定义name 不要使用默认name...
2024/5/5 19:03:48
CrossApp 简化创建工程，简化android环境部署
正处在beta版本中的跨平台移动应用开发引擎CrossApp不断快速的迭代，CrossApp官方在alpha版本中不断听取开发者们的使用建议，并吸纳了对大部分开发者都会遇到的哪些问题，将其迅速修改并执行。针对alpha版本中许多应用开发者觉得CrossApp的入门有环境和部署门槛，首先是在andr…...
2024/4/21 4:32:37
Angular.element和$document的使用方法分析，代替jquery
AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs是不建议和JQuery同时…...
2024/5/5 19:47:05
AngularJS angularJS实现了部分JQuery功能 (jqLite) (angular.element())
demo.html： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>AngularJS JQuery</title><script src"jquery.min.js"></script> <!-- 如果要用完整的JQuery…...
2024/4/26 20:09:35
react、reactnative、Angular、vue关系
文章目录react、angular、vue是js的三大框架。React Native官方地址今天搞清楚了react、reactnative、Angular、vue他们之间的关系，这里记录一下。简单的说： react、angular、vue是js的三大框架。人们常说的，前端3大框架：Faceb…...
2024/5/3 13:57:31
Angular、React、Vue，对组件的子元素的处理
1，Vue：使用slot 2，Angular：使用ng-content 3，React：使用pro的children...
2024/4/26 14:43:25
Web前端（六）：简述三大框架：Angular、React、Vue
结合之前所说的内容，我们已经能够较为便捷地自己开发网页了，但是如果你真的从头开始写一个较为复杂的网站，就会发现这是一件十分繁琐复杂的事情。比如说以下几点是曾经困扰过我的问题： 1、代码复用问题：比如你自己设计…...
2024/5/5 21:20:16
在angular中引入bpmn（1）【引入基础bpmn】
因为之前公司的angular项目中需要用到bpmn，网上教程不多，我是参照下面这个博主写的教程才学会使用的：他写的特别棒 BPMN-JS与Angular集成（1） BPMN-JS与Angular集成（2） BPMN-JS与Angular集成&…...
2024/4/21 4:32:31
Angular 相关概念
1.XMLHttpRequest 对象（属于xmlJavascript） XMLHttpRequest 对象用于在后台与服务器交换数据。 Ajax 是对XMLHttpRequest 的封装，XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 Act…...
2024/4/21 4:32:29
Angular4学习笔记（一）：准备和环境搭建
代码已提交至Github 写在前面的废话1 我用angular的时候还是1.x，属于代码写的很反人类但是angular2还没出的蛮荒年代。我本身是从j2ee转到Android的工程师，也是就是说，我的日常开发语言是Java。突然切换到JavaScript那真是难受的像北极熊同企…...
2024/5/5 21:54:26
Angular 5 反向代理配置
一、webpack server 方式这里所说的反向代理仅限于基于Angular-cli创建的HTTP Server,也就是通过ng、cnpm、npm启动的Server。在项目根目录新建proxy.config.json填入以下内容 {"/api": {"target": "http://localhost:8080","secure&quo…...
2024/5/5 20:27:31
angular——ionic
ionic 安装 cnpm i -g cordova ionic创建项目 # 空白栏 ionic start myApp blank # 底部切换 （适合手机 app） ionic start myApp tabs # 侧边栏 （适合 pc 端） ionic start myApp sidemenu运行项目 ionic serve常用命令 ionic…...
2024/4/21 4:32:27
Angular集成bpmn.js 基础实现及扩展
Angular集成bpmn.js 基础实现及扩展1、angular引入bpmn.js2、添加便捷工具3、添加bpmn自带属性面板4、bpmn.js页面汉化5、修改左侧工具栏（palatte）6、修改context-pad7、节点添加自定义属性8、流程图完整性的校验最近工作项目中有用到bpmn做一个前端工作…...
2024/4/28 17:44:16
angular2学习笔记（8）
依赖注入依赖注入的意思是：对象在被创建的时候，由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。通过这种设计模式，降低代码耦合度，实现依赖类的外部修改（在不改变原代码的基础上通过xml配置文件…...
2024/5/5 19:09:18
string 转化xml xml转化为string
一、使用最原始的javax.xml.parsers，标准的jdk api // 字符串转XML [java] view plaincopyprint? String xmlStr \"......\"; StringReader sr new StringReader(xmlStr); InputSource is new InputSource(sr); DocumentBuilder…...
2024/4/20 19:47:25
十二、Angular开发准备
Angular开发准备 1、安装第三方依赖包Jquery、BootStarp npm install jquery --savenpm install bootstrap --save–save：表示将这个安装包记录到package.json中。 package.json: 2、angular.json中引入第三库（类似pom.xml） angular.jso…...
2024/4/20 19:47:23
la-admin发布,基于Laravel 6 和 Angular 8 的通用后台
GITHUB：https://github.com/donjan-deng/la-admin 环境需求 Node.js > 10.9.0PHP > 7.2.0BCMath PHP 拓展Ctype PHP 拓展JSON PHP 拓展Mbstring PHP 拓展OpenSSL PHP 拓展PDO PHP 拓展Tokenizer PHP 拓展XML PHP 拓展集成组件 endroid/qr-code 二维码gre…...
2024/4/20 7:59:15

ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE引入及模板页和布局和菜单...

AdminLTE

Layout

头部页面

菜单

Foot

效果

扩展

相关文章

最新文章