1.简介

1)  .环境配置

2)  .提取页面

2）.动态生成菜单（无限级别树）

2.系统环境配置

项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）

运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012

解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式

提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造

3.创建数据库和表

数据库：AppDataBase

创建以下数据表，并创建AppDB.edmx

  1. USE [AppDataBase]
  2. GO
  3.  
  4. /****** Object:  Table [dbo].[SysModule]    Script Date: 2015/9/15 21:03:39 ******/
  5. SET ANSI_NULLS ON
  6. GO
  7.  
  8. SET QUOTED_IDENTIFIER ON
  9. GO
  10.  
  11. SET ANSI_PADDING ON
  12. GO
  13.  
  14. CREATE TABLE [dbo].[SysModule](
  15.     [ID] [varchar](50) NOT NULL,        --主键ID
  16.     [Name] [varchar](50) NOT NULL,        --菜单名称
  17.     [ParentID] [varchar](50) NULL,        --上级ID
  18.     [Url] [varchar](200) NULL,            --URL
  19.     [Iconic] [varchar](200) NULL,        --图标
  20.     [Sort] [int] NULL,                    --排序
  21.     [Enable] [bit] NOT NULL,            --是否显示
  22.     [CreateTime] [datetime] NULL,        --创建时间
  23.     [IsLast] [bit] NOT NULL                --是否最后一项
  24.  CONSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED
  25. (
  26.     [Id] ASC
  27. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  28. ) ON [PRIMARY]
  29.  
  30. GO
  31.  
  32. SET ANSI_PADDING OFF
  33. GO
  34.  
  35. ALTER TABLE [dbo].[SysModule]  WITH NOCHECK ADD  CONSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentID])
  36. REFERENCES [dbo].[SysModule] ([Id])
  37. GO
  38.  
  39. ALTER TABLE [dbo].[SysModule] NOCHECK CONSTRAINT [FK_SysModule_SysModule]
  40. GO

人为造点数据

  1. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','root','root','Index','icon-settings',NULL,0,NULL,0)
  2. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','一级菜单01','','Index','icon-settings',NULL,0,NULL,0)
  3. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单01-01','','Index','icon-settings',NULL,0,NULL,0)
  4. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单01-01-01','','Index','icon-link',NULL,0,NULL,1)
  5. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单01-01-02','','Index','icon-settings',NULL,0,NULL,1)
  6. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单01-02','','Index','icon-link',NULL,0,NULL,1)
  7. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单01-03','','Index','icon-link',NULL,0,NULL,1)
  8. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','一级菜单02','','Index','icon-settings',NULL,0,NULL,0)
  9. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单02-01','','Index','icon-settings',NULL,0,NULL,0)
  10. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单02-01-01','','Index','icon-link',NULL,0,NULL,1)
  11. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单02-01-02','','Index','icon-link',NULL,0,NULL,1)
  12. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单02-02','','Index','icon-link',NULL,0,NULL,1)
  13. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单02-03','','Index','icon-link',NULL,0,NULL,1)
  14. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','一级菜单03','','Index','icon-settings',NULL,0,NULL,0)
  15. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单03-01','','Index','icon-settings',NULL,0,NULL,0)
  16. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单03-01-01','','Index','icon-link',NULL,0,NULL,1)
  17. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','三级菜单03-01-02','','Index','icon-link',NULL,0,NULL,1)
  18. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单03-02','','Index','icon-link',NULL,0,NULL,1)
  19. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单03-03','','Index','icon-link',NULL,0,NULL,1)
  20. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','一级菜单04','','Index','icon-settings',NULL,0,NULL,0)
  21. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单04-01','','Index','icon-link',NULL,0,NULL,1)
  22. INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('','二级菜单04-02','','Index','icon-link',NULL,0,NULL,1)
  23.  
  24. (22 行受影响)

4.提取页面重要布局

我们是后台系统所以我们保留top. left menu和foot3个部分

我已经提取好了，请复制

  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Metronic | 版面展示</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta content="width=device-width, initial-scale=1" name="viewport" />
  8.     <meta content="" name="description" />
  9.     <meta content="" name="author" />
  10.     <link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  11.     <link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
  12.     <link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  13.     <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
  14.     <link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
  15.     <!-- END GLOBAL MANDATORY STYLES -->
  16.     <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
  17.     <link href="~/Content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
  18.     <link href="~/Content/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
  19.     <link href="~/Content/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
  20.     <!-- END PAGE LEVEL PLUGIN STYLES -->
  21.     <!-- BEGIN PAGE STYLES -->
  22.     <link href="~/Content/assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
  23.     <!-- END PAGE STYLES -->
  24.     <!-- BEGIN THEME STYLES -->
  25.     <link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
  26.     <link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
  27.     <link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" />
  28.     <link href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color" />
  29.     <link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" />
  30.     <!-- END THEME STYLES -->
  31.     <link rel="shortcut icon" href="favicon.ico" />
  32. </head>
  33. <body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo page-container-bg-solid">
  34.     <!-- BEGIN HEADER -->
  35.     <div class="page-header navbar navbar-fixed-top">
  36.         <!-- BEGIN HEADER INNER -->
  37.         <div class="page-header-inner">
  38.             <!-- BEGIN LOGO -->
  39.             <div class="page-logo">
  40.                 <a href="index.html">
  41.                     <img src="~/Content/assets/admin/layout/img/logo.png" alt="logo" class="logo-default" />
  42.                 </a>
  43.                 <div class="menu-toggler sidebar-toggler hide">
  44.                 </div>
  45.             </div>
  46.             <!-- END LOGO -->
  47.             <!-- BEGIN RESPONSIVE MENU TOGGLER -->
  48.             <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
  49.             </a>
  50.             <!-- END RESPONSIVE MENU TOGGLER -->
  51.             <!-- BEGIN TOP NAVIGATION MENU -->
  52.             <div class="top-menu">
  53.                 <ul class="nav navbar-nav pull-right">
  54.                     <!-- BEGIN NOTIFICATION DROPDOWN -->
  55.                     <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
  56.                     <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
  57.                         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
  58.                             <i class="icon-bell"></i>
  59.                             <span class="badge badge-default">
  60.                                 7
  61.                             </span>
  62.                         </a>
  63.                         <ul class="dropdown-menu">
  64.                             <li class="external">
  65.                                 <h3><span class="bold">12 pending</span> notifications</h3>
  66.                                 <a href="extra_profile.html">view all</a>
  67.                             </li>
  68.                             <li>
  69.                                 <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
  70.                                     <li>
  71.                                         <a href="javascript:;">
  72.                                             <span class="time">just now</span>
  73.                                             <span class="details">
  74.                                                 <span class="label label-sm label-icon label-success">
  75.                                                     <i class="fa fa-plus"></i>
  76.                                                 </span>
  77.                                                 New user registered.
  78.                                             </span>
  79.                                         </a>
  80.                                     </li>
  81.                                     <li>
  82.                                         <a href="javascript:;">
  83.                                             <span class="time">3 mins</span>
  84.                                             <span class="details">
  85.                                                 <span class="label label-sm label-icon label-danger">
  86.                                                     <i class="fa fa-bolt"></i>
  87.                                                 </span>
  88.                                                 Server #12 overloaded.
  89.                                             </span>
  90.                                         </a>
  91.                                     </li>
  92.                                     <li>
  93.                                         <a href="javascript:;">
  94.                                             <span class="time">10 mins</span>
  95.                                             <span class="details">
  96.                                                 <span class="label label-sm label-icon label-warning">
  97.                                                     <i class="fa fa-bell-o"></i>
  98.                                                 </span>
  99.                                                 Server #2 not responding.
  100.                                             </span>
  101.                                         </a>
  102.                                     </li>
  103.                                     <li>
  104.                                         <a href="javascript:;">
  105.                                             <span class="time">14 hrs</span>
  106.                                             <span class="details">
  107.                                                 <span class="label label-sm label-icon label-info">
  108.                                                     <i class="fa fa-bullhorn"></i>
  109.                                                 </span>
  110.                                                 Application error.
  111.                                             </span>
  112.                                         </a>
  113.                                     </li>
  114.                                     <li>
  115.                                         <a href="javascript:;">
  116.                                             <span class="time">2 days</span>
  117.                                             <span class="details">
  118.                                                 <span class="label label-sm label-icon label-danger">
  119.                                                     <i class="fa fa-bolt"></i>
  120.                                                 </span>
  121.                                                 Database overloaded 68%.
  122.                                             </span>
  123.                                         </a>
  124.                                     </li>
  125.                                     <li>
  126.                                         <a href="javascript:;">
  127.                                             <span class="time">3 days</span>
  128.                                             <span class="details">
  129.                                                 <span class="label label-sm label-icon label-danger">
  130.                                                     <i class="fa fa-bolt"></i>
  131.                                                 </span>
  132.                                                 A user IP blocked.
  133.                                             </span>
  134.                                         </a>
  135.                                     </li>
  136.                                     <li>
  137.                                         <a href="javascript:;">
  138.                                             <span class="time">4 days</span>
  139.                                             <span class="details">
  140.                                                 <span class="label label-sm label-icon label-warning">
  141.                                                     <i class="fa fa-bell-o"></i>
  142.                                                 </span>
  143.                                                 Storage Server #4 not responding dfdfdfd.
  144.                                             </span>
  145.                                         </a>
  146.                                     </li>
  147.                                     <li>
  148.                                         <a href="javascript:;">
  149.                                             <span class="time">5 days</span>
  150.                                             <span class="details">
  151.                                                 <span class="label label-sm label-icon label-info">
  152.                                                     <i class="fa fa-bullhorn"></i>
  153.                                                 </span>
  154.                                                 System Error.
  155.                                             </span>
  156.                                         </a>
  157.                                     </li>
  158.                                     <li>
  159.                                         <a href="javascript:;">
  160.                                             <span class="time">9 days</span>
  161.                                             <span class="details">
  162.                                                 <span class="label label-sm label-icon label-danger">
  163.                                                     <i class="fa fa-bolt"></i>
  164.                                                 </span>
  165.                                                 Storage server failed.
  166.                                             </span>
  167.                                         </a>
  168.                                     </li>
  169.                                 </ul>
  170.                             </li>
  171.                         </ul>
  172.                     </li>
  173.                     <!-- END NOTIFICATION DROPDOWN -->
  174.                     <!-- BEGIN INBOX DROPDOWN -->
  175.                     <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
  176.                     <li class="dropdown dropdown-extended dropdown-inbox" id="header_inbox_bar">
  177.                         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
  178.                             <i class="icon-envelope-open"></i>
  179.                             <span class="badge badge-default">
  180.                                 4
  181.                             </span>
  182.                         </a>
  183.                         <ul class="dropdown-menu">
  184.                             <li class="external">
  185.                                 <h3>You have <span class="bold">7 New</span> Messages</h3>
  186.                                 <a href="page_inbox.html">view all</a>
  187.                             </li>
  188.                             <li>
  189.                                 <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
  190.                                     <li>
  191.                                         <a href="inbox.html?a=view">
  192.                                             <span class="photo">
  193.                                                 <img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
  194.                                             </span>
  195.                                             <span class="subject">
  196.                                                 <span class="from">
  197.                                                     Lisa Wong
  198.                                                 </span>
  199.                                                 <span class="time">Just Now </span>
  200.                                             </span>
  201.                                             <span class="message">
  202.                                                 Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh...
  203.                                             </span>
  204.                                         </a>
  205.                                     </li>
  206.                                     <li>
  207.                                         <a href="inbox.html?a=view">
  208.                                             <span class="photo">
  209.                                                 <img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
  210.                                             </span>
  211.                                             <span class="subject">
  212.                                                 <span class="from">
  213.                                                     Richard Doe
  214.                                                 </span>
  215.                                                 <span class="time">16 mins </span>
  216.                                             </span>
  217.                                             <span class="message">
  218.                                                 Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  219.                                             </span>
  220.                                         </a>
  221.                                     </li>
  222.                                     <li>
  223.                                         <a href="inbox.html?a=view">
  224.                                             <span class="photo">
  225.                                                 <img src="~/Content/assets/admin/layout3/img/avatar1.jpg" class="img-circle" alt="">
  226.                                             </span>
  227.                                             <span class="subject">
  228.                                                 <span class="from">
  229.                                                     Bob Nilson
  230.                                                 </span>
  231.                                                 <span class="time">2 hrs </span>
  232.                                             </span>
  233.                                             <span class="message">
  234.                                                 Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  235.                                             </span>
  236.                                         </a>
  237.                                     </li>
  238.                                     <li>
  239.                                         <a href="inbox.html?a=view">
  240.                                             <span class="photo">
  241.                                                 <img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt="">
  242.                                             </span>
  243.                                             <span class="subject">
  244.                                                 <span class="from">
  245.                                                     Lisa Wong
  246.                                                 </span>
  247.                                                 <span class="time">40 mins </span>
  248.                                             </span>
  249.                                             <span class="message">
  250.                                                 Vivamus sed auctor 40% nibh congue nibh...
  251.                                             </span>
  252.                                         </a>
  253.                                     </li>
  254.                                     <li>
  255.                                         <a href="inbox.html?a=view">
  256.                                             <span class="photo">
  257.                                                 <img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt="">
  258.                                             </span>
  259.                                             <span class="subject">
  260.                                                 <span class="from">
  261.                                                     Richard Doe
  262.                                                 </span>
  263.                                                 <span class="time">46 mins </span>
  264.                                             </span>
  265.                                             <span class="message">
  266.                                                 Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  267.                                             </span>
  268.                                         </a>
  269.                                     </li>
  270.                                 </ul>
  271.                             </li>
  272.                         </ul>
  273.                     </li>
  274.                     <!-- END INBOX DROPDOWN -->
  275.                     <!-- BEGIN TODO DROPDOWN -->
  276.                     <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
  277.                     <li class="dropdown dropdown-extended dropdown-tasks" id="header_task_bar">
  278.                         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
  279.                             <i class="icon-calendar"></i>
  280.                             <span class="badge badge-default">
  281.                                 3
  282.                             </span>
  283.                         </a>
  284.                         <ul class="dropdown-menu extended tasks">
  285.                             <li class="external">
  286.                                 <h3>You have <span class="bold">12 pending</span> tasks</h3>
  287.                                 <a href="page_todo.html">view all</a>
  288.                             </li>
  289.                             <li>
  290.                                 <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
  291.                                     <li>
  292.                                         <a href="javascript:;">
  293.                                             <span class="task">
  294.                                                 <span class="desc">New release v1.2 </span>
  295.                                                 <span class="percent">30%</span>
  296.                                             </span>
  297.                                             <span class="progress">
  298.                                                 <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></span>
  299.                                             </span>
  300.                                         </a>
  301.                                     </li>
  302.                                     <li>
  303.                                         <a href="javascript:;">
  304.                                             <span class="task">
  305.                                                 <span class="desc">Application deployment</span>
  306.                                                 <span class="percent">65%</span>
  307.                                             </span>
  308.                                             <span class="progress">
  309.                                                 <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">65% Complete</span></span>
  310.                                             </span>
  311.                                         </a>
  312.                                     </li>
  313.                                     <li>
  314.                                         <a href="javascript:;">
  315.                                             <span class="task">
  316.                                                 <span class="desc">Mobile app release</span>
  317.                                                 <span class="percent">98%</span>
  318.                                             </span>
  319.                                             <span class="progress">
  320.                                                 <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">98% Complete</span></span>
  321.                                             </span>
  322.                                         </a>
  323.                                     </li>
  324.                                     <li>
  325.                                         <a href="javascript:;">
  326.                                             <span class="task">
  327.                                                 <span class="desc">Database migration</span>
  328.                                                 <span class="percent">10%</span>
  329.                                             </span>
  330.                                             <span class="progress">
  331.                                                 <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">10% Complete</span></span>
  332.                                             </span>
  333.                                         </a>
  334.                                     </li>
  335.                                     <li>
  336.                                         <a href="javascript:;">
  337.                                             <span class="task">
  338.                                                 <span class="desc">Web server upgrade</span>
  339.                                                 <span class="percent">58%</span>
  340.                                             </span>
  341.                                             <span class="progress">
  342.                                                 <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">58% Complete</span></span>
  343.                                             </span>
  344.                                         </a>
  345.                                     </li>
  346.                                     <li>
  347.                                         <a href="javascript:;">
  348.                                             <span class="task">
  349.                                                 <span class="desc">Mobile development</span>
  350.                                                 <span class="percent">85%</span>
  351.                                             </span>
  352.                                             <span class="progress">
  353.                                                 <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">85% Complete</span></span>
  354.                                             </span>
  355.                                         </a>
  356.                                     </li>
  357.                                     <li>
  358.                                         <a href="javascript:;">
  359.                                             <span class="task">
  360.                                                 <span class="desc">New UI release</span>
  361.                                                 <span class="percent">38%</span>
  362.                                             </span>
  363.                                             <span class="progress progress-striped">
  364.                                                 <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">38% Complete</span></span>
  365.                                             </span>
  366.                                         </a>
  367.                                     </li>
  368.                                 </ul>
  369.                             </li>
  370.                         </ul>
  371.                     </li>
  372.                     <!-- END TODO DROPDOWN -->
  373.                     <!-- BEGIN USER LOGIN DROPDOWN -->
  374.                     <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
  375.                     <li class="dropdown dropdown-user">
  376.                         <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
  377.                             <img alt="" class="img-circle" src="~/Content/assets/admin/layout/img/avatar3_small.jpg" />
  378.                             <span class="username username-hide-on-mobile">
  379.                                 Nick
  380.                             </span>
  381.                             <i class="fa fa-angle-down"></i>
  382.                         </a>
  383.                         <ul class="dropdown-menu dropdown-menu-default">
  384.                             <li>
  385.                                 <a href="extra_profile.html">
  386.                                     <i class="icon-user"></i> My Profile
  387.                                 </a>
  388.                             </li>
  389.                             <li>
  390.                                 <a href="page_calendar.html">
  391.                                     <i class="icon-calendar"></i> My Calendar
  392.                                 </a>
  393.                             </li>
  394.                             <li>
  395.                                 <a href="inbox.html">
  396.                                     <i class="icon-envelope-open"></i> My Inbox <span class="badge badge-danger">
  397.                                         3
  398.                                     </span>
  399.                                 </a>
  400.                             </li>
  401.                             <li>
  402.                                 <a href="page_todo.html">
  403.                                     <i class="icon-rocket"></i> My Tasks <span class="badge badge-success">
  404.                                         7
  405.                                     </span>
  406.                                 </a>
  407.                             </li>
  408.                             <li class="divider">
  409.                             </li>
  410.                             <li>
  411.                                 <a href="extra_lock.html">
  412.                                     <i class="icon-lock"></i> Lock Screen
  413.                                 </a>
  414.                             </li>
  415.                             <li>
  416.                                 <a href="login.html">
  417.                                     <i class="icon-key"></i> Log Out
  418.                                 </a>
  419.                             </li>
  420.                         </ul>
  421.                     </li>
  422.                     <!-- END USER LOGIN DROPDOWN -->
  423.                     <!-- BEGIN QUICK SIDEBAR TOGGLER -->
  424.                     <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
  425.                     <li class="dropdown dropdown-quick-sidebar-toggler">
  426.                         <a href="javascript:;" class="dropdown-toggle">
  427.                             <i class="icon-logout"></i>
  428.                         </a>
  429.                     </li>
  430.                     <!-- END QUICK SIDEBAR TOGGLER -->
  431.                 </ul>
  432.             </div>
  433.             <!-- END TOP NAVIGATION MENU -->
  434.         </div>
  435.         <!-- END HEADER INNER -->
  436.     </div>
  437.     <!-- END HEADER -->
  438.     <div class="clearfix">
  439.     </div>
  440.     <!-- BEGIN CONTAINER -->
  441.     <div class="page-container">
  442.         <!-- BEGIN SIDEBAR -->
  443.         <div class="page-sidebar-wrapper">
  444.             <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
  445.             <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
  446.             <div class="page-sidebar navbar-collapse collapse">
  447.                 <!-- BEGIN SIDEBAR MENU -->
  448.                 <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
  449.                 <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
  450.                 <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
  451.                 <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
  452.                 <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
  453.                 <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
  454.                 <ul class="page-sidebar-menu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
  455.                     <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
  456.                     <li class="sidebar-toggler-wrapper">
  457.                         <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
  458.                         <div class="sidebar-toggler">
  459.                         </div>
  460.                         <!-- END SIDEBAR TOGGLER BUTTON -->
  461.                     </li>
  462.                     <!-- DOC: To remove the search box from the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element -->
  463.  
  464.                     <li class="start active open">
  465.                         <a href="javascript:;">
  466.                             <i class="icon-folder"></i>
  467.                             <span class="title">Multi Level Menu</span>
  468.                             <span class="arrow "></span>
  469.                         </a>
  470.                         <ul class="sub-menu">
  471.                             <li>
  472.                                 <a href="javascript:;">
  473.                                     <i class="icon-settings"></i> Item 1 <span class="arrow"></span>
  474.                                 </a>
  475.                                 <ul class="sub-menu">
  476.                                     <li>
  477.                                         <a href="javascript:;">
  478.                                             <i class="icon-user"></i>
  479.                                             Sample Link 1 <span class="arrow"></span>
  480.                                         </a>
  481.                                         <ul class="sub-menu">
  482.                                             <li>
  483.                                                 <a href="#"><i class="icon-power"></i> Sample Link 1</a>
  484.                                             </li>
  485.                                             <li>
  486.                                                 <a href="#"><i class="icon-paper-plane"></i> Sample Link 1</a>
  487.                                             </li>
  488.                                             <li>
  489.                                                 <a href="#"><i class="icon-star"></i> Sample Link 1</a>
  490.                                             </li>
  491.                                         </ul>
  492.                                     </li>
  493.                                     <li>
  494.                                         <a href="#"><i class="icon-camera"></i> Sample Link 1</a>
  495.                                     </li>
  496.                                     <li>
  497.                                         <a href="#"><i class="icon-link"></i> Sample Link 2</a>
  498.                                     </li>
  499.                                     <li>
  500.                                         <a href="#"><i class="icon-pointer"></i> Sample Link 3</a>
  501.                                     </li>
  502.                                 </ul>
  503.                             </li>
  504.                             <li>
  505.                                 <a href="javascript:;">
  506.                                     <i class="icon-globe"></i> Item 2 <span class="arrow"></span>
  507.                                 </a>
  508.                                 <ul class="sub-menu">
  509.                                     <li>
  510.                                         <a href="#"><i class="icon-tag"></i> Sample Link 1</a>
  511.                                     </li>
  512.                                     <li>
  513.                                         <a href="#"><i class="icon-pencil"></i> Sample Link 1</a>
  514.                                     </li>
  515.                                     <li>
  516.                                         <a href="#"><i class="icon-graph"></i> Sample Link 1</a>
  517.                                     </li>
  518.                                 </ul>
  519.                             </li>
  520.                             <li>
  521.                                 <a href="#">
  522.                                     <i class="icon-bar-chart"></i>
  523.                                     Item 3
  524.                                 </a>
  525.                             </li>
  526.                         </ul>
  527.                     </li>
  528.  
  529.                 </ul>
  530.                 <!-- END SIDEBAR MENU -->
  531.             </div>
  532.         </div>
  533.         <!-- END SIDEBAR -->
  534.         <!-- BEGIN CONTENT -->
  535.         <div class="page-content-wrapper">
  536.             <div class="page-content">
  537.                 <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
  538.                 <div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  539.                     <div class="modal-dialog">
  540.                         <div class="modal-content">
  541.                             <div class="modal-header">
  542.                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  543.                                 <h4 class="modal-title">Modal title</h4>
  544.                             </div>
  545.                             <div class="modal-body">
  546.                                 Widget settings form goes here
  547.                             </div>
  548.                             <div class="modal-footer">
  549.                                 <button type="button" class="btn blue">Save changes</button>
  550.                                 <button type="button" class="btn default" data-dismiss="modal">Close</button>
  551.                             </div>
  552.                         </div>
  553.                         <!-- /.modal-content -->
  554.                     </div>
  555.                     <!-- /.modal-dialog -->
  556.                 </div>
  557.                 <!-- /.modal -->
  558.                 <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
  559.                 <!-- BEGIN STYLE CUSTOMIZER -->
  560.                 <div class="theme-panel hidden-xs hidden-sm">
  561.                     <div class="toggler">
  562.                     </div>
  563.                     <div class="toggler-close">
  564.                     </div>
  565.                     <div class="theme-options">
  566.                         <div class="theme-option theme-colors clearfix">
  567.                             <span>
  568.                                 THEME COLOR
  569.                             </span>
  570.                             <ul>
  571.                                 <li class="color-default current tooltips" data-style="default" data-container="body" data-original-title="Default">
  572.                                 </li>
  573.                                 <li class="color-darkblue tooltips" data-style="darkblue" data-container="body" data-original-title="Dark Blue">
  574.                                 </li>
  575.                                 <li class="color-blue tooltips" data-style="blue" data-container="body" data-original-title="Blue">
  576.                                 </li>
  577.                                 <li class="color-grey tooltips" data-style="grey" data-container="body" data-original-title="Grey">
  578.                                 </li>
  579.                                 <li class="color-light tooltips" data-style="light" data-container="body" data-original-title="Light">
  580.                                 </li>
  581.                                 <li class="color-light2 tooltips" data-style="light2" data-container="body" data-html="true" data-original-title="Light 2">
  582.                                 </li>
  583.                             </ul>
  584.                         </div>
  585.                         <div class="theme-option">
  586.                             <span>
  587.                                 Theme Style
  588.                             </span>
  589.                             <select class="layout-style-option form-control input-sm">
  590.                                 <option value="square" selected="selected">Square corners</option>
  591.                                 <option value="rounded">Rounded corners</option>
  592.                             </select>
  593.                         </div>
  594.                         <div class="theme-option">
  595.                             <span>
  596.                                 Layout
  597.                             </span>
  598.                             <select class="layout-option form-control input-sm">
  599.                                 <option value="fluid" selected="selected">Fluid</option>
  600.                                 <option value="boxed">Boxed</option>
  601.                             </select>
  602.                         </div>
  603.                         <div class="theme-option">
  604.                             <span>
  605.                                 Header
  606.                             </span>
  607.                             <select class="page-header-option form-control input-sm">
  608.                                 <option value="fixed" selected="selected">Fixed</option>
  609.                                 <option value="default">Default</option>
  610.                             </select>
  611.                         </div>
  612.                         <div class="theme-option">
  613.                             <span>
  614.                                 Top Menu Dropdown
  615.                             </span>
  616.                             <select class="page-header-top-dropdown-style-option form-control input-sm">
  617.                                 <option value="light" selected="selected">Light</option>
  618.                                 <option value="dark">Dark</option>
  619.                             </select>
  620.                         </div>
  621.                         <div class="theme-option">
  622.                             <span>
  623.                                 Sidebar Mode
  624.                             </span>
  625.                             <select class="sidebar-option form-control input-sm">
  626.                                 <option value="fixed">Fixed</option>
  627.                                 <option value="default" selected="selected">Default</option>
  628.                             </select>
  629.                         </div>
  630.                         <div class="theme-option">
  631.                             <span>
  632.                                 Sidebar Menu
  633.                             </span>
  634.                             <select class="sidebar-menu-option form-control input-sm">
  635.                                 <option value="accordion" selected="selected">Accordion</option>
  636.                                 <option value="hover">Hover</option>
  637.                             </select>
  638.                         </div>
  639.                         <div class="theme-option">
  640.                             <span>
  641.                                 Sidebar Style
  642.                             </span>
  643.                             <select class="sidebar-style-option form-control input-sm">
  644.                                 <option value="default" selected="selected">Default</option>
  645.                                 <option value="light">Light</option>
  646.                             </select>
  647.                         </div>
  648.                         <div class="theme-option">
  649.                             <span>
  650.                                 Sidebar Position
  651.                             </span>
  652.                             <select class="sidebar-pos-option form-control input-sm">
  653.                                 <option value="left" selected="selected">Left</option>
  654.                                 <option value="right">Right</option>
  655.                             </select>
  656.                         </div>
  657.                         <div class="theme-option">
  658.                             <span>
  659.                                 Footer
  660.                             </span>
  661.                             <select class="page-footer-option form-control input-sm">
  662.                                 <option value="fixed">Fixed</option>
  663.                                 <option value="default" selected="selected">Default</option>
  664.                             </select>
  665.                         </div>
  666.                     </div>
  667.                 </div>
  668.                 <!-- END STYLE CUSTOMIZER -->
  669.                 <!-- BEGIN PAGE HEADER-->
  670.                 <div class="page-bar">
  671.                     <ul class="page-breadcrumb">
  672.                         <li>
  673.                             <i class="fa fa-home"></i>
  674.                             <a href="index.html">Home</a>
  675.                             <i class="fa fa-angle-right"></i>
  676.                         </li>
  677.                         <li>
  678.                             <a href="#">版面展示</a>
  679.                         </li>
  680.                     </ul>
  681.  
  682.                 </div>
  683.                 <h3 class="page-title">
  684.                     版面展示 <small>reports & statistics</small>
  685.                 </h3>
  686.                 <!-- END PAGE HEADER-->
  687.                 <!-- BEGIN 版面展示 STATS -->
  688.                 @RenderBody()
  689.                 <!-- END 版面展示 STATS -->
  690.                 <div class="clearfix">
  691.                 </div>
  692.  
  693.             </div>
  694.         </div>
  695.         <!-- END CONTENT -->
  696.         <!-- BEGIN QUICK SIDEBAR -->
  697.         <a href="javascript:;" class="page-quick-sidebar-toggler"><i class="icon-close"></i></a>
  698.         <div class="page-quick-sidebar-wrapper">
  699.             <div class="page-quick-sidebar">
  700.                 <div class="nav-justified">
  701.                     <ul class="nav nav-tabs nav-justified">
  702.                         <li class="active">
  703.                             <a href="#quick_sidebar_tab_1" data-toggle="tab">
  704.                                 Users <span class="badge badge-danger">2</span>
  705.                             </a>
  706.                         </li>
  707.                         <li>
  708.                             <a href="#quick_sidebar_tab_2" data-toggle="tab">
  709.                                 Alerts <span class="badge badge-success">7</span>
  710.                             </a>
  711.                         </li>
  712.                         <li class="dropdown">
  713.                             <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
  714.                                 More<i class="fa fa-angle-down"></i>
  715.                             </a>
  716.                             <ul class="dropdown-menu pull-right" role="menu">
  717.                                 <li>
  718.                                     <a href="#quick_sidebar_tab_3" data-toggle="tab">
  719.                                         <i class="icon-bell"></i> Alerts
  720.                                     </a>
  721.                                 </li>
  722.                                 <li>
  723.                                     <a href="#quick_sidebar_tab_3" data-toggle="tab">
  724.                                         <i class="icon-info"></i> Notifications
  725.                                     </a>
  726.                                 </li>
  727.                                 <li>
  728.                                     <a href="#quick_sidebar_tab_3" data-toggle="tab">
  729.                                         <i class="icon-speech"></i> Activities
  730.                                     </a>
  731.                                 </li>
  732.                                 <li class="divider">
  733.                                 </li>
  734.                                 <li>
  735.                                     <a href="#quick_sidebar_tab_3" data-toggle="tab">
  736.                                         <i class="icon-settings"></i> Settings
  737.                                     </a>
  738.                                 </li>
  739.                             </ul>
  740.                         </li>
  741.                     </ul>
  742.                     <div class="tab-content">
  743.                         <div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
  744.                             <div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
  745.                                 <h3 class="list-heading">Staff</h3>
  746.                                 <ul class="media-list list-items">
  747.                                     <li class="media">
  748.                                         <div class="media-status">
  749.                                             <span class="badge badge-success">8</span>
  750.                                         </div>
  751.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar3.jpg" alt="...">
  752.                                         <div class="media-body">
  753.                                             <h4 class="media-heading">Bob Nilson</h4>
  754.                                             <div class="media-heading-sub">
  755.                                                 Project Manager
  756.                                             </div>
  757.                                         </div>
  758.                                     </li>
  759.                                     <li class="media">
  760.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar1.jpg" alt="...">
  761.                                         <div class="media-body">
  762.                                             <h4 class="media-heading">Nick Larson</h4>
  763.                                             <div class="media-heading-sub">
  764.                                                 Art Director
  765.                                             </div>
  766.                                         </div>
  767.                                     </li>
  768.                                     <li class="media">
  769.                                         <div class="media-status">
  770.                                             <span class="badge badge-danger">3</span>
  771.                                         </div>
  772.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar4.jpg" alt="...">
  773.                                         <div class="media-body">
  774.                                             <h4 class="media-heading">Deon Hubert</h4>
  775.                                             <div class="media-heading-sub">
  776.                                                 CTO
  777.                                             </div>
  778.                                         </div>
  779.                                     </li>
  780.                                     <li class="media">
  781.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar2.jpg" alt="...">
  782.                                         <div class="media-body">
  783.                                             <h4 class="media-heading">Ella Wong</h4>
  784.                                             <div class="media-heading-sub">
  785.                                                 CEO
  786.                                             </div>
  787.                                         </div>
  788.                                     </li>
  789.                                 </ul>
  790.                                 <h3 class="list-heading">Customers</h3>
  791.                                 <ul class="media-list list-items">
  792.                                     <li class="media">
  793.                                         <div class="media-status">
  794.                                             <span class="badge badge-warning">2</span>
  795.                                         </div>
  796.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar6.jpg" alt="...">
  797.                                         <div class="media-body">
  798.                                             <h4 class="media-heading">Lara Kunis</h4>
  799.                                             <div class="media-heading-sub">
  800.                                                 CEO, Loop Inc
  801.                                             </div>
  802.                                             <div class="media-heading-small">
  803.                                                 Last seen 03:10 AM
  804.                                             </div>
  805.                                         </div>
  806.                                     </li>
  807.                                     <li class="media">
  808.                                         <div class="media-status">
  809.                                             <span class="label label-sm label-success">new</span>
  810.                                         </div>
  811.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar7.jpg" alt="...">
  812.                                         <div class="media-body">
  813.                                             <h4 class="media-heading">Ernie Kyllonen</h4>
  814.                                             <div class="media-heading-sub">
  815.                                                 Project Manager,<br>
  816.                                                 SmartBizz PTL
  817.                                             </div>
  818.                                         </div>
  819.                                     </li>
  820.                                     <li class="media">
  821.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar8.jpg" alt="...">
  822.                                         <div class="media-body">
  823.                                             <h4 class="media-heading">Lisa Stone</h4>
  824.                                             <div class="media-heading-sub">
  825.                                                 CTO, Keort Inc
  826.                                             </div>
  827.                                             <div class="media-heading-small">
  828.                                                 Last seen 13:10 PM
  829.                                             </div>
  830.                                         </div>
  831.                                     </li>
  832.                                     <li class="media">
  833.                                         <div class="media-status">
  834.                                             <span class="badge badge-success">7</span>
  835.                                         </div>
  836.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar9.jpg" alt="...">
  837.                                         <div class="media-body">
  838.                                             <h4 class="media-heading">Deon Portalatin</h4>
  839.                                             <div class="media-heading-sub">
  840.                                                 CFO, H&D LTD
  841.                                             </div>
  842.                                         </div>
  843.                                     </li>
  844.                                     <li class="media">
  845.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar10.jpg" alt="...">
  846.                                         <div class="media-body">
  847.                                             <h4 class="media-heading">Irina Savikova</h4>
  848.                                             <div class="media-heading-sub">
  849.                                                 CEO, Tizda Motors Inc
  850.                                             </div>
  851.                                         </div>
  852.                                     </li>
  853.                                     <li class="media">
  854.                                         <div class="media-status">
  855.                                             <span class="badge badge-danger">4</span>
  856.                                         </div>
  857.                                         <img class="media-object" src="~/Content/assets/admin/layout/img/avatar11.jpg" alt="...">
  858.                                         <div class="media-body">
  859.                                             <h4 class="media-heading">Maria Gomez</h4>
  860.                                             <div class="media-heading-sub">
  861.                                                 Manager, Infomatic Inc
  862.                                             </div>
  863.                                             <div class="media-heading-small">
  864.                                                 Last seen 03:10 AM
  865.                                             </div>
  866.                                         </div>
  867.                                     </li>
  868.                                 </ul>
  869.                             </div>
  870.                             <div class="page-quick-sidebar-item">
  871.                                 <div class="page-quick-sidebar-chat-user">
  872.                                     <div class="page-quick-sidebar-nav">
  873.                                         <a href="javascript:;" class="page-quick-sidebar-back-to-list"><i class="icon-arrow-left"></i>Back</a>
  874.                                     </div>
  875.                                     <div class="page-quick-sidebar-chat-user-messages">
  876.                                         <div class="post out">
  877.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar3.jpg" />
  878.                                             <div class="message">
  879.                                                 <span class="arrow"></span>
  880.                                                 <a href="javascript:;" class="name">Bob Nilson</a>
  881.                                                 <span class="datetime">20:15</span>
  882.                                                 <span class="body">
  883.                                                     When could you send me the report ?
  884.                                                 </span>
  885.                                             </div>
  886.                                         </div>
  887.                                         <div class="post in">
  888.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar2.jpg" />
  889.                                             <div class="message">
  890.                                                 <span class="arrow"></span>
  891.                                                 <a href="javascript:;" class="name">Ella Wong</a>
  892.                                                 <span class="datetime">20:15</span>
  893.                                                 <span class="body">
  894.                                                     Its almost done. I will be sending it shortly
  895.                                                 </span>
  896.                                             </div>
  897.                                         </div>
  898.                                         <div class="post out">
  899.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar3.jpg" />
  900.                                             <div class="message">
  901.                                                 <span class="arrow"></span>
  902.                                                 <a href="javascript:;" class="name">Bob Nilson</a>
  903.                                                 <span class="datetime">20:15</span>
  904.                                                 <span class="body">
  905.                                                     Alright. Thanks! :)
  906.                                                 </span>
  907.                                             </div>
  908.                                         </div>
  909.                                         <div class="post in">
  910.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar2.jpg" />
  911.                                             <div class="message">
  912.                                                 <span class="arrow"></span>
  913.                                                 <a href="javascript:;" class="name">Ella Wong</a>
  914.                                                 <span class="datetime">20:16</span>
  915.                                                 <span class="body">
  916.                                                     You are most welcome. Sorry for the delay.
  917.                                                 </span>
  918.                                             </div>
  919.                                         </div>
  920.                                         <div class="post out">
  921.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar3.jpg" />
  922.                                             <div class="message">
  923.                                                 <span class="arrow"></span>
  924.                                                 <a href="javascript:;" class="name">Bob Nilson</a>
  925.                                                 <span class="datetime">20:17</span>
  926.                                                 <span class="body">
  927.                                                     No probs. Just take your time :)
  928.                                                 </span>
  929.                                             </div>
  930.                                         </div>
  931.                                         <div class="post in">
  932.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar2.jpg" />
  933.                                             <div class="message">
  934.                                                 <span class="arrow"></span>
  935.                                                 <a href="javascript:;" class="name">Ella Wong</a>
  936.                                                 <span class="datetime">20:40</span>
  937.                                                 <span class="body">
  938.                                                     Alright. I just emailed it to you.
  939.                                                 </span>
  940.                                             </div>
  941.                                         </div>
  942.                                         <div class="post out">
  943.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar3.jpg" />
  944.                                             <div class="message">
  945.                                                 <span class="arrow"></span>
  946.                                                 <a href="javascript:;" class="name">Bob Nilson</a>
  947.                                                 <span class="datetime">20:17</span>
  948.                                                 <span class="body">
  949.                                                     Great! Thanks. Will check it right away.
  950.                                                 </span>
  951.                                             </div>
  952.                                         </div>
  953.                                         <div class="post in">
  954.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar2.jpg" />
  955.                                             <div class="message">
  956.                                                 <span class="arrow"></span>
  957.                                                 <a href="javascript:;" class="name">Ella Wong</a>
  958.                                                 <span class="datetime">20:40</span>
  959.                                                 <span class="body">
  960.                                                     Please let me know if you have any comment.
  961.                                                 </span>
  962.                                             </div>
  963.                                         </div>
  964.                                         <div class="post out">
  965.                                             <img class="avatar" alt="" src="~/Content/assets/admin/layout/img/avatar3.jpg" />
  966.                                             <div class="message">
  967.                                                 <span class="arrow"></span>
  968.                                                 <a href="javascript:;" class="name">Bob Nilson</a>
  969.                                                 <span class="datetime">20:17</span>
  970.                                                 <span class="body">
  971.                                                     Sure. I will check and buzz you if anything needs to be corrected.
  972.                                                 </span>
  973.                                             </div>
  974.                                         </div>
  975.                                     </div>
  976.                                     <div class="page-quick-sidebar-chat-user-form">
  977.                                         <div class="input-group">
  978.                                             <input type="text" class="form-control" placeholder="Type a message here...">
  979.                                             <div class="input-group-btn">
  980.                                                 <button type="button" class="btn blue"><i class="icon-paper-clip"></i></button>
  981.                                             </div>
  982.                                         </div>
  983.                                     </div>
  984.                                 </div>
  985.                             </div>
  986.                         </div>
  987.                         <div class="tab-pane page-quick-sidebar-alerts" id="quick_sidebar_tab_2">
  988.                             <div class="page-quick-sidebar-alerts-list">
  989.                                 <h3 class="list-heading">General</h3>
  990.                                 <ul class="feeds list-items">
  991.                                     <li>
  992.                                         <div class="col1">
  993.                                             <div class="cont">
  994.                                                 <div class="cont-col1">
  995.                                                     <div class="label label-sm label-info">
  996.                                                         <i class="fa fa-check"></i>
  997.                                                     </div>
  998.                                                 </div>
  999.                                                 <div class="cont-col2">
  1000.                                                     <div class="desc">
  1001.                                                         You have 4 pending tasks. <span class="label label-sm label-warning ">
  1002.                                                             Take action <i class="fa fa-share"></i>
  1003.                                                         </span>
  1004.                                                     </div>
  1005.                                                 </div>
  1006.                                             </div>
  1007.                                         </div>
  1008.                                         <div class="col2">
  1009.                                             <div class="date">
  1010.                                                 Just now
  1011.                                             </div>
  1012.                                         </div>
  1013.                                     </li>
  1014.                                     <li>
  1015.                                         <a href="javascript:;">
  1016.                                             <div class="col1">
  1017.                                                 <div class="cont">
  1018.                                                     <div class="cont-col1">
  1019.                                                         <div class="label label-sm label-success">
  1020.                                                             <i class="fa fa-bar-chart-o"></i>
  1021.                                                         </div>
  1022.                                                     </div>
  1023.                                                     <div class="cont-col2">
  1024.                                                         <div class="desc">
  1025.                                                             Finance Report for year 2013 has been released.
  1026.                                                         </div>
  1027.                                                     </div>
  1028.                                                 </div>
  1029.                                             </div>
  1030.                                             <div class="col2">
  1031.                                                 <div class="date">
  1032.                                                     20 mins
  1033.                                                 </div>
  1034.                                             </div>
  1035.                                         </a>
  1036.                                     </li>
  1037.                                     <li>
  1038.                                         <div class="col1">
  1039.                                             <div class="cont">
  1040.                                                 <div class="cont-col1">
  1041.                                                     <div class="label label-sm label-danger">
  1042.                                                         <i class="fa fa-user"></i>
  1043.                                                     </div>
  1044.                                                 </div>
  1045.                                                 <div class="cont-col2">
  1046.                                                     <div class="desc">
  1047.                                                         You have 5 pending membership that requires a quick review.
  1048.                                                     </div>
  1049.                                                 </div>
  1050.                                             </div>
  1051.                                         </div>
  1052.                                         <div class="col2">
  1053.                                             <div class="date">
  1054.                                                 24 mins
  1055.                                             </div>
  1056.                                         </div>
  1057.                                     </li>
  1058.                                     <li>
  1059.                                         <div class="col1">
  1060.                                             <div class="cont">
  1061.                                                 <div class="cont-col1">
  1062.                                                     <div class="label label-sm label-info">
  1063.                                                         <i class="fa fa-shopping-cart"></i>
  1064.                                                     </div>
  1065.                                                 </div>
  1066.                                                 <div class="cont-col2">
  1067.                                                     <div class="desc">
  1068.                                                         New order received with <span class="label label-sm label-success">
  1069.                                                             Reference Number: DR23923
  1070.                                                         </span>
  1071.                                                     </div>
  1072.                                                 </div>
  1073.                                             </div>
  1074.                                         </div>
  1075.                                         <div class="col2">
  1076.                                             <div class="date">
  1077.                                                 30 mins
  1078.                                             </div>
  1079.                                         </div>
  1080.                                     </li>
  1081.                                     <li>
  1082.                                         <div class="col1">
  1083.                                             <div class="cont">
  1084.                                                 <div class="cont-col1">
  1085.                                                     <div class="label label-sm label-success">
  1086.                                                         <i class="fa fa-user"></i>
  1087.                                                     </div>
  1088.                                                 </div>
  1089.                                                 <div class="cont-col2">
  1090.                                                     <div class="desc">
  1091.                                                         You have 5 pending membership that requires a quick review.
  1092.                                                     </div>
  1093.                                                 </div>
  1094.                                             </div>
  1095.                                         </div>
  1096.                                         <div class="col2">
  1097.                                             <div class="date">
  1098.                                                 24 mins
  1099.                                             </div>
  1100.                                         </div>
  1101.                                     </li>
  1102.                                     <li>
  1103.                                         <div class="col1">
  1104.                                             <div class="cont">
  1105.                                                 <div class="cont-col1">
  1106.                                                     <div class="label label-sm label-info">
  1107.                                                         <i class="fa fa-bell-o"></i>
  1108.                                                     </div>
  1109.                                                 </div>
  1110.                                                 <div class="cont-col2">
  1111.                                                     <div class="desc">
  1112.                                                         Web server hardware needs to be upgraded. <span class="label label-sm label-warning">
  1113.                                                             Overdue
  1114.                                                         </span>
  1115.                                                     </div>
  1116.                                                 </div>
  1117.                                             </div>
  1118.                                         </div>
  1119.                                         <div class="col2">
  1120.                                             <div class="date">
  1121.                                                 2 hours
  1122.                                             </div>
  1123.                                         </div>
  1124.                                     </li>
  1125.                                     <li>
  1126.                                         <a href="javascript:;">
  1127.                                             <div class="col1">
  1128.                                                 <div class="cont">
  1129.                                                     <div class="cont-col1">
  1130.                                                         <div class="label label-sm label-default">
  1131.                                                             <i class="fa fa-briefcase"></i>
  1132.                                                         </div>
  1133.                                                     </div>
  1134.                                                     <div class="cont-col2">
  1135.                                                         <div class="desc">
  1136.                                                             IPO Report for year 2013 has been released.
  1137.                                                         </div>
  1138.                                                     </div>
  1139.                                                 </div>
  1140.                                             </div>
  1141.                                             <div class="col2">
  1142.                                                 <div class="date">
  1143.                                                     20 mins
  1144.                                                 </div>
  1145.                                             </div>
  1146.                                         </a>
  1147.                                     </li>
  1148.                                 </ul>
  1149.                                 <h3 class="list-heading">System</h3>
  1150.                                 <ul class="feeds list-items">
  1151.                                     <li>
  1152.                                         <div class="col1">
  1153.                                             <div class="cont">
  1154.                                                 <div class="cont-col1">
  1155.                                                     <div class="label label-sm label-info">
  1156.                                                         <i class="fa fa-check"></i>
  1157.                                                     </div>
  1158.                                                 </div>
  1159.                                                 <div class="cont-col2">
  1160.                                                     <div class="desc">
  1161.                                                         You have 4 pending tasks. <span class="label label-sm label-warning ">
  1162.                                                             Take action <i class="fa fa-share"></i>
  1163.                                                         </span>
  1164.                                                     </div>
  1165.                                                 </div>
  1166.                                             </div>
  1167.                                         </div>
  1168.                                         <div class="col2">
  1169.                                             <div class="date">
  1170.                                                 Just now
  1171.                                             </div>
  1172.                                         </div>
  1173.                                     </li>
  1174.                                     <li>
  1175.                                         <a href="javascript:;">
  1176.                                             <div class="col1">
  1177.                                                 <div class="cont">
  1178.                                                     <div class="cont-col1">
  1179.                                                         <div class="label label-sm label-danger">
  1180.                                                             <i class="fa fa-bar-chart-o"></i>
  1181.                                                         </div>
  1182.                                                     </div>
  1183.                                                     <div class="cont-col2">
  1184.                                                         <div class="desc">
  1185.                                                             Finance Report for year 2013 has been released.
  1186.                                                         </div>
  1187.                                                     </div>
  1188.                                                 </div>
  1189.                                             </div>
  1190.                                             <div class="col2">
  1191.                                                 <div class="date">
  1192.                                                     20 mins
  1193.                                                 </div>
  1194.                                             </div>
  1195.                                         </a>
  1196.                                     </li>
  1197.                                     <li>
  1198.                                         <div class="col1">
  1199.                                             <div class="cont">
  1200.                                                 <div class="cont-col1">
  1201.                                                     <div class="label label-sm label-default">
  1202.                                                         <i class="fa fa-user"></i>
  1203.                                                     </div>
  1204.                                                 </div>
  1205.                                                 <div class="cont-col2">
  1206.                                                     <div class="desc">
  1207.                                                         You have 5 pending membership that requires a quick review.
  1208.                                                     </div>
  1209.                                                 </div>
  1210.                                             </div>
  1211.                                         </div>
  1212.                                         <div class="col2">
  1213.                                             <div class="date">
  1214.                                                 24 mins
  1215.                                             </div>
  1216.                                         </div>
  1217.                                     </li>
  1218.                                     <li>
  1219.                                         <div class="col1">
  1220.                                             <div class="cont">
  1221.                                                 <div class="cont-col1">
  1222.                                                     <div class="label label-sm label-info">
  1223.                                                         <i class="fa fa-shopping-cart"></i>
  1224.                                                     </div>
  1225.                                                 </div>
  1226.                                                 <div class="cont-col2">
  1227.                                                     <div class="desc">
  1228.                                                         New order received with <span class="label label-sm label-success">
  1229.                                                             Reference Number: DR23923
  1230.                                                         </span>
  1231.                                                     </div>
  1232.                                                 </div>
  1233.                                             </div>
  1234.                                         </div>
  1235.                                         <div class="col2">
  1236.                                             <div class="date">
  1237.                                                 30 mins
  1238.                                             </div>
  1239.                                         </div>
  1240.                                     </li>
  1241.                                     <li>
  1242.                                         <div class="col1">
  1243.                                             <div class="cont">
  1244.                                                 <div class="cont-col1">
  1245.                                                     <div class="label label-sm label-success">
  1246.                                                         <i class="fa fa-user"></i>
  1247.                                                     </div>
  1248.                                                 </div>
  1249.                                                 <div class="cont-col2">
  1250.                                                     <div class="desc">
  1251.                                                         You have 5 pending membership that requires a quick review.
  1252.                                                     </div>
  1253.                                                 </div>
  1254.                                             </div>
  1255.                                         </div>
  1256.                                         <div class="col2">
  1257.                                             <div class="date">
  1258.                                                 24 mins
  1259.                                             </div>
  1260.                                         </div>
  1261.                                     </li>
  1262.                                     <li>
  1263.                                         <div class="col1">
  1264.                                             <div class="cont">
  1265.                                                 <div class="cont-col1">
  1266.                                                     <div class="label label-sm label-warning">
  1267.                                                         <i class="fa fa-bell-o"></i>
  1268.                                                     </div>
  1269.                                                 </div>
  1270.                                                 <div class="cont-col2">
  1271.                                                     <div class="desc">
  1272.                                                         Web server hardware needs to be upgraded. <span class="label label-sm label-default ">
  1273.                                                             Overdue
  1274.                                                         </span>
  1275.                                                     </div>
  1276.                                                 </div>
  1277.                                             </div>
  1278.                                         </div>
  1279.                                         <div class="col2">
  1280.                                             <div class="date">
  1281.                                                 2 hours
  1282.                                             </div>
  1283.                                         </div>
  1284.                                     </li>
  1285.                                     <li>
  1286.                                         <a href="javascript:;">
  1287.                                             <div class="col1">
  1288.                                                 <div class="cont">
  1289.                                                     <div class="cont-col1">
  1290.                                                         <div class="label label-sm label-info">
  1291.                                                             <i class="fa fa-briefcase"></i>
  1292.                                                         </div>
  1293.                                                     </div>
  1294.                                                     <div class="cont-col2">
  1295.                                                         <div class="desc">
  1296.                                                             IPO Report for year 2013 has been released.
  1297.                                                         </div>
  1298.                                                     </div>
  1299.                                                 </div>
  1300.                                             </div>
  1301.                                             <div class="col2">
  1302.                                                 <div class="date">
  1303.                                                     20 mins
  1304.                                                 </div>
  1305.                                             </div>
  1306.                                         </a>
  1307.                                     </li>
  1308.                                 </ul>
  1309.                             </div>
  1310.                         </div>
  1311.                         <div class="tab-pane page-quick-sidebar-settings" id="quick_sidebar_tab_3">
  1312.                             <div class="page-quick-sidebar-settings-list">
  1313.                                 <h3 class="list-heading">General Settings</h3>
  1314.                                 <ul class="list-items borderless">
  1315.                                     <li>
  1316.                                         Enable Notifications <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1317.                                     </li>
  1318.                                     <li>
  1319.                                         Allow Tracking <input type="checkbox" class="make-switch" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1320.                                     </li>
  1321.                                     <li>
  1322.                                         Log Errors <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1323.                                     </li>
  1324.                                     <li>
  1325.                                         Auto Sumbit Issues <input type="checkbox" class="make-switch" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1326.                                     </li>
  1327.                                     <li>
  1328.                                         Enable SMS Alerts <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1329.                                     </li>
  1330.                                 </ul>
  1331.                                 <h3 class="list-heading">System Settings</h3>
  1332.                                 <ul class="list-items borderless">
  1333.                                     <li>
  1334.                                         Security Level
  1335.                                         <select class="form-control input-inline input-sm input-small">
  1336.                                             <option value="1">Normal</option>
  1337.                                             <option value="2" selected>Medium</option>
  1338.                                             <option value="e">High</option>
  1339.                                         </select>
  1340.                                     </li>
  1341.                                     <li>
  1342.                                         Failed Email Attempts <input class="form-control input-inline input-sm input-small" value="5" />
  1343.                                     </li>
  1344.                                     <li>
  1345.                                         Secondary SMTP Port <input class="form-control input-inline input-sm input-small" value="3560" />
  1346.                                     </li>
  1347.                                     <li>
  1348.                                         Notify On System Error <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1349.                                     </li>
  1350.                                     <li>
  1351.                                         Notify On SMTP Error <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF">
  1352.                                     </li>
  1353.                                 </ul>
  1354.                                 <div class="inner-content">
  1355.                                     <button class="btn btn-success"><i class="icon-settings"></i> Save Changes</button>
  1356.                                 </div>
  1357.                             </div>
  1358.                         </div>
  1359.                     </div>
  1360.                 </div>
  1361.             </div>
  1362.         </div>
  1363.         <!-- END QUICK SIDEBAR -->
  1364.     </div>
  1365.     <!-- END CONTAINER -->
  1366.     <!-- BEGIN FOOTER -->
  1367.     <div class="page-footer">
  1368.         <div class="page-footer-inner">
  1369.             2014 &copy; Metronic by keenthemes.
  1370.         </div>
  1371.         <div class="scroll-to-top">
  1372.             <i class="icon-arrow-up"></i>
  1373.         </div>
  1374.     </div>
  1375.     <!-- END FOOTER -->
  1376.     <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
  1377.     <!-- BEGIN CORE PLUGINS -->
  1378.     <!--[if lt IE 9]>
  1379.     <script src="~/Content/assets/global/plugins/respond.min.js"></script>
  1380.     <script src="~/Content/assets/global/plugins/excanvas.min.js"></script>
  1381.     <![endif]-->
  1382.     <script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
  1383.     <script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
  1384.     <!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
  1385.     <script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
  1386.     <script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  1387.     <script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
  1388.     <script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
  1389.     <script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
  1390.     <script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
  1391.     <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
  1392.     <script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
  1393.     <!-- BEGIN PAGE LEVEL SCRIPTS -->
  1394.     <script src="~/Content/assets/global/scripts/metronic.js" type="text/javascript"></script>
  1395.     <script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
  1396.     <script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
  1397.     <script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script>
  1398.     <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script>
  1399.     <script src="~/Content/assets/admin/pages/scripts/tasks.js" type="text/javascript"></script>
  1400.     <!-- END PAGE LEVEL SCRIPTS -->
  1401.     <script>
  1402. jQuery(document).ready(function() {
  1403.    Metronic.init(); // init metronic core componets
  1404.    Layout.init(); // init layout
  1405.    QuickSidebar.init(); // init quick sidebar
  1406. Demo.init(); // init demo features
  1407.    Index.init();
  1408.    Index.init版面展示Daterange();
  1409.    Index.initJQVMAP(); // init index page's custom scripts
  1410.    Index.initCalendar(); // init index page's custom scripts
  1411.    Index.initCharts(); // init index page's custom scripts
  1412.    Index.initChat();
  1413.    Index.initMiniCharts();
  1414.    Tasks.init版面展示Widget();
  1415. });
  1416.     </script>
  1417.     <!-- END JAVASCRIPTS -->
  1418. </body>
  1419. <!-- END BODY -->
  1420. </html>

Layout.cshtml

再次提取菜单代码

<li class="start active open">

                        <a href="javascript:;">

                            <i class="icon-folder"></i>

                            <span class="title">Multi Level Menu</span>

                            <span class="arrow "></span>

                        </a>

                        <ul class="sub-menu">

                            <li>

                                <a href="javascript:;">

                                    <i class="icon-settings"></i> Item 1 <span class="arrow"></span>

                                </a>

                                <ul class="sub-menu">

                                    <li>

                                        <a href="javascript:;">

                                            <i class="icon-user"></i>

                                            Sample Link 1 <span class="arrow"></span>

                                        </a>

                                        <ul class="sub-menu">

                                            <li>

                                                <a href="#"><i class="icon-power"></i> Sample Link 1</a>

                                            </li>

                                            <li>

                                                <a href="#"><i class="icon-paper-plane"></i> Sample Link 1</a>

                                            </li>

                                            <li>

                                                <a href="#"><i class="icon-star"></i> Sample Link 1</a>

                                            </li>

                                        </ul>

                                    </li>

                                    <li>

                                        <a href="#"><i class="icon-camera"></i> Sample Link 1</a>

                                    </li>

                                    <li>

                                        <a href="#"><i class="icon-link"></i> Sample Link 2</a>

                                    </li>

                                    <li>

                                        <a href="#"><i class="icon-pointer"></i> Sample Link 3</a>

                                    </li>

                                </ul>

                            </li>

                            <li>

                                <a href="javascript:;">

                                    <i class="icon-globe"></i> Item 2 <span class="arrow"></span>

                                </a>

                                <ul class="sub-menu">

                                    <li>

                                        <a href="#"><i class="icon-tag"></i> Sample Link 1</a>

                                    </li>

                                    <li>

                                        <a href="#"><i class="icon-pencil"></i> Sample Link 1</a>

                                    </li>

                                    <li>

                                        <a href="#"><i class="icon-graph"></i> Sample Link 1</a>

                                    </li>

                                </ul>

                            </li>

                            <li>

                                <a href="#">

                                    <i class="icon-bar-chart"></i>

                                    Item 3

                                </a>

                            </li>

                        </ul>

                    </li>

Menu

大约在466行-529行

分析上面html可以看出，li包含ul循环调用。所以我们用递归读取菜单

5.拼接菜单栏

创建Home视图Index.cshtml并应用_Layout.cshtml

Bootstrap Metronic并菜单没有提供Ajax模式，我们只能读取数据拼接HTML

过程：读取数据表数据递归调用

using App.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Text;

namespace App.Web.Controllers

{

    public class HomeController : Controller

    {

        AppDBContainer db = new AppDBContainer();

        public ActionResult Index()

        {

            IQueryable<SysModule> menus = db.SysModule.AsQueryable().Where(a=>a.ParentID=="");

            StringBuilder sb = new StringBuilder();

            bool firstFlag = true;//第一个默认展开

            GetChildMenus(ref sb, menus, firstFlag);//二级菜单

            ViewBag.Menus = sb.ToString();

            return View();

        }

        //递归调用

        public void GetChildMenus(ref StringBuilder sb, IQueryable<SysModule> menus,bool firstFlag)//二级以上菜单

        {

            int count = ;

            if(!firstFlag)

            sb.Append("<ul class='sub-menu'>");

            foreach (var m in menus)

            {

                IQueryable<SysModule> menusChild = db.SysModule.AsQueryable().Where(a => a.ParentID == m.ID);

                count = menusChild.Count();

                sb.AppendFormat("<li class='{0}'>",firstFlag?"start actove open":"");

                sb.AppendFormat("<a href='{0}'><i class='{1}'></i><span class='title'>{2}</span>{3}</a>", count >  ? "javascript:;" : m.Url, m.Iconic, m.Name, count >  ? "<span class='arrow '></span>" : "");

                firstFlag = false;

                if (count > )

                    GetChildMenus(ref sb, menusChild,firstFlag);

                sb.Append("</li>");

            }

            if (!firstFlag)

            sb.Append("</ul>");

        }

    }

}

去掉提取的li替换成@Html.Raw(ViewBag.Menus)

6.总结

前端这种东西最考验人的耐心，不信你自己拼接一下

最后效果

Bootstrap Metronic 学习记录（二）菜单栏的更多相关文章

  1. Bootstrap Metronic 学习记录（一）简介

    1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...

  2. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

  3. Material Calendar View 学习记录(二)

    Material Calendar View 学习记录(二) github link: material-calendarview; 在学习记录一中简单翻译了该开源项目的README.md文档.接下来 ...

  4. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  6. Spring Boot学习记录(二)–thymeleaf模板

    自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好 ...

  7. ELK学习记录二 ：elasticsearch、logstash及kibana的安装与配置

    注意事项: 1.ELK版本要求5.X以上,本人使用版本:elasticsearch-6.0.0.kibana-6.0.0-linux-x86_64.logstash-6.0.0.tar 2.Elast ...

  8. 【java并发编程艺术学习】（四）第二章 java并发机制的底层实现原理 学习记录(二) synchronized

    章节介绍 本章节主要学习 Java SE 1.6 中为了减少获得锁 和 释放锁 时带来的性能消耗 而引入的偏向锁 和 轻量级锁,以及锁的存储结构 和 升级过程. synchronized实现同步的基础 ...

  9. SpringBoot学习记录(二)

    一. SpringBoot日志框架 SpringBoot:底层是Spring框架,Spring框架默认是用JCL(commons-logging): SpringBoot选用SLF4j和logback ...

随机推荐

  1. echo.js 延迟加载图片控件

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

  2. haha2

    # YOU - fhasd - fdks jf > jd sfkjd sf ```python print "helloworld" ``` 来自为知笔记(Wiz)

  3. C# base64 Img 互转

    [AcceptVerbs(HttpVerbs.Post)] public JsonResult Upload(HttpPostedFileBase fileData) { try { if (file ...

  4. _MSC_VER详细介绍

    _MSC_VER详细介绍 转自:http://www.cnblogs.com/braver/articles/2064817.html _MSC_VER是微软的预编译控制. _MSC_VER可以分解为 ...

  5. （转）小小科学家的归来 by 王珢

    小小科学家的归来 by 王垠很多人来信关心我的现状,所以在写别的技术性文章之前,先说说我现在的情况吧.虽然自己追求的东西和经历都比较不同寻常,但是也许可以给奋斗中的人们一些慰藉和鼓励. 首先是超级好消 ...

  6. 李洪强iOS经典面试题155 - const,static,extern详解（面试必备）

    李洪强iOS经典面试题155 - const,static,extern详解(面试必备) 一.const与宏的区别(面试题): const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽 ...

  7. Python之路第一课Day4--随堂笔记（迭代生成装饰器）

    上节回顾: 1.集合 a.关系测试 b.去重 2.文件操作及编码 3.函数 4.局部变量和全局变量 上节回顾 本节课内容: 1.迭代器生成器 2.装饰器 3.json pickle数据序列化 4.软件 ...

  8. ajax 全套

    ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编程语言, ...

  9. mysql解决其他服务器不可连接问题

    在安装mysql的机器上运行: 1.d:\mysql\bin\>mysql   -h   localhost   -u   root //这样应该可以进入MySQL服务器 2.mysql> ...

  10. ios 关于问题 no matching provisioning profiles found

    ios 关于问题 no matching provisioning profiles found