Bootstrap Metronic Notas de aprendizaje de plantilla administrativa totalmente receptiva

Continúe con el artículo anterior, comparta las notas compiladas desde la barra de menú Bootstrap Metronic con usted para su referencia. El contenido específico es el siguiente

1. Introducción

1). Configuración del medio ambiente

2). Extracte la página

3). Generar dinámicamente el menú (árbol de nivel ilimitado)

2. Configuración del entorno del sistema

El proyecto requiere soporte de datos del programa, aquí se selecciona MVC5.0+EF6.0 [SQLServer] (no hay interpretación de MVC Architecture y SQLServer)

Entorno en ejecución: VS2013+MVC5.0+EF6.1+SQLServer2012

Nombre de la solución: AppSolution Nombre del proyecto: App.web (capa de interfaz de usuario) y app.models (capa de acceso de datos) - Modo de acceso directo

Extraiga todos los archivos bajo el tema al contenido de MVC, extraiga index.html de admin a _layout.cshtml para prepararse para la transformación

3. Cree bases de datos y tablas

Base de datos: AppDatabase

Cree la siguiente tabla de datos y cree appdb.edmx

 Use [AppDatabase] Go/****** Object: Table [DBO]. [SysModule] Fecha de script: 2015/9/15 21:03:39 *********/SET ANSI_NULLS ONGOSET COTED_IDENDIFIER ONGOSET ANSI_PADDING TABLA DE ONGOCREATE [DBO]. [SYSMODUL [Nombre] [Varchar] (50) No NULL, -Menu Name [ParentId] [Varchar] (50) NULL, - -Super ID [URL] [VARCHAR] (200) NULL, --URL [iconic] [Varchar] (200) NULL, --iconic [sort] [int] NULL, --sort [enable] [bit] no null, - -does [does] [satetime] [Islast] [bit] no nulo: es la última restricción del elemento [pk_sysmodule] primaria clustered ([id] asc) con (pad_index = apagado, statistics_norecompute = apagado, ignore_dup_key = off, tampod_row_locks = on, pETO_PAGE_LOCKS = on [primario]) en [primario] goset ansi_padding y teaTding [DBO]. [SysModule] con Noccheck Agregar restricción [FK_SYSMODULE_SYSMODULE] Extraje Key ([ParentId]) Referencias [DBO]. [SysModule] ([id]) Tabla de portero [DBO]. [SysModule] restricción de nocheck [fk_sysmodule_sysmodule]

Datos artificiales

 Insertar en [sysModule] ([id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('0', 'root', 'root', 'index', 'icon-settings', null, 0, null, 0) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('1', 'menú primario 01', '0', 'index', 'encasillados de iconos', nulo, 0, nulo, 0) insertar en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('11', 'menú primario 01-01', '1', 'index', 'icon-settings', null, 0, null, 0) Insert en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('111', 'menú de tres niveles01-01-01', '11', 'índice', 'icon-link', null, 0, null, 1) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('112', 'Menú de nivel 3 01-01-02', '11', 'índice', 'icon-asetings', null, 0, null, 1) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('12', 'Menú de nivel 2 01-02', '1', 'índice', 'icon-link', null, 0, null, 1) Insert en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('13', 'segundo nivel 01-03', '1', 'index', 'icon-link', null, 0, null, 1) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('2', 'menú primario 02', '0', 'index', 'encasillados de iconos', nulo, 0, nulo, 0) insertar en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('21', 'menú primario 02-01', '2', 'index', 'icon-settings', null, 0, null, 0) insertar en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('211', 'nivel 3 menú02-01-01', '5', 'índice', 'icon-link', null, 0, null, 1) insertar en [symodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('212', 'Menú de nivel 3 02-01-02', '5', 'índice', 'icon-link', null, 0, null, 1) insertar en [symodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('22', 'Menú de nivel 2 02-02', '2', 'index', 'icon-link', null, 0, null, 1) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('23', 'segundo nivel02-03', '2', 'índice', 'icon-link', null, 0, null, 1) Insert en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('3', 'menú primario 03', '0', 'index', 'icon-settings', null, 0, null, 0) insertar en [sysmodule] ([Id], [nombre], [parentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('31', 'menú primario 03-01', '3', 'index', 'icon-settings', null, 0, null, 0) insertar en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('311', 'nivel 3 menú03-01-01', '31', 'index', 'icon-link', null, 0, null, 1) inserto en [symodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('312', 'Menú de nivel 3 03-01-02', '31', 'índice', 'icon-link', null, 0, null, 1) inserto en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('32', 'Menú de nivel 2 03-02', '3', 'índice', 'icon-link', null, 0, null, 1) Insert en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [createTime], [islast]) valores ('33', 'segundo nivel03-03', '3', 'index', 'icon-link', null, 0, null, 1) en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('4', 'menú primario 04', '0', 'index', 'encasillados de iconos', nulo, 0, nulo, 0) insertar en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTime], [islast]) valores ('41', 'menú primario 04-01', '4', 'índice', 'icon-link', null, 0, null, 1) Insert en [sysmodule] ([Id], [nombre], [ParentId], [url], [icónico], [sort], [enable], [CreateTeTime], [islast]) valores ('42', 'Menú de segundo nivel04-02', '4', 'índice', 'icon-link', null, 0, null, 1) (22 líneas afectadas)

4. Extraer diseños de página importantes

Somos el sistema de backend, por lo que mantenemos la parte superior. menú izquierdo y pie 3 partes

Lo he extraído, por favor, cópielo

 * Dispose Display </title> <meta http-eEquiv = "x-ua-compatible" content = "ie = edge"> <meta content = "width = dispositivo-width, inicial-escale = 1" name = "Viewport" /> <meta content = "" name = "descripción" /> <meta content = "" name = "autor" /> <enlace " href = "~/content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/global/simples-line-iCons/simple-line-iCons.min.css" rel = "styles types" tymet "tyx/" tymet "ty =" cys "tymet "s". /> <Link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "stylesheet" type = "text/css"/> <link href = "~/assets/global/plugins/uniform/css/uniform.default.css" rel = "Stylesheet tipos" " /> <link href = "~/content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel = "stylesheet" type = "text/css"/> <!-final de estilos de obligatorio global-> <!-Estilos de nivel de nivel de página iniciales-> <enlace href = "~/content/assets/global/plugins/bootstrap-daterangePicker/daterangePicker-bs3.css" rel = "stylesheet" type = "text/css"/> <link href = "~/assets/global/plugins/fullCalendar/fullCalendar.min.css" rel = "styles types" types " /> <link href = "~/content/assets/global/plugins/jqvmap/jqvmap.css" rel = "stylesheet" type = "text/css"/> <!-estilos de complemento de nivel de página final-> <!-comienza la página styles-> <link href = "~/content/assets/admin/pages/css/tareas/tareas de página" type = "text/css"/> <!-estilos de página final-> <!-BEGIN TEMA STYLES-> <Link href = "~/content/assets/global/css/components.css" id = "style_components" rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/assets/css/csss". rel="stylesheet" type="text/css" /> <link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type = "text/css" id = "style_color"/> <link href = "~/content/assets/admin/layout/css/custom.css" rel = "stylesheet" type = "text/css"/> <!-end teme styles-> <link rel = "Shortcut icon" href = "favicon.iCo"/<ceote " -> <div> <!-Begin Header Inner-> <Viv> <!-Begin Logo-> <div> <a href = "index.html"> <img src = "~/content/assets/admin/layout/img/logo.png"/> </a> <div> </div> </div> <! href = "javascript :;" data-toggle = "colapse" data-target = ". Navbar-collapse"> </a> <!-final de menú receptivo toggler-> <!-Comienza el menú de navegación superior-> <div> <ul> <!-Comenzar la reducción de notificaciones-> <!-DOC: Aplicar clase "Dark" después de " href = "javascript :;" data-toggle = "desplegable" data-hover = "desplegable" data-close-others = "true"> <i> </i> <span> 7 </span> </a> <ul> <li> <h3> <span> 12 pendientes </span> notificaciones </h3> <a href = "extra_profile.html"> ver todo </a> </li> <li> <ul> <uly> <ul style: ":": " 250px; " data-handle-color = "#637283"> <li> <a href = "javascript :;"> <span> justo ahora </span> <span> <span> <i> </i> </span> nuevo usuario registrado. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 mins </span> <span> <span> <i> </i> </span> servidor #12 sobrecargado. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 mins </span> <span> <span> <i> </i> </span> servidor #12 sobrecargado. </span> </a> </li> <li> <a href = "javascript :;"> <span> 10 minutos </span> <span> <span> <i> </i> </span> el servidor #2 no responde. </span> </a> </li> <li> <a href = "javascript :;"> <span> 14 hrs </span> <span> <span> <i> </i> </span> error de aplicación. </span> </a> </li> <li> <a href = "javascript :;"> <span> 2 días </span> <span> <span> <i> </i> </span> base de datos sobrecargada 68%. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 días </span> <span> <span> <i> </i> </span> una IP de usuario bloqueada. </span> </a> </li> <li> <a href = "javascript :;"> <span> 4 días </span> <span> <span> <i> </i> </span> El servidor de almacenamiento #4 no responde a dfdfdfd. </span> </a> </li> <li> <a href = "javascript :;"> <span> 5 días </span> <span> <i> </i> </span> error del sistema. </span> </a> </li> </li> <li> <a href = "javascript :;"> <span> 9 días </span> <span> <span> <i> </i> </span> falló en el servidor de almacenamiento. </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <!-final de notificación desplegable-> <!-Comenzar la bandeja de entrada-> <!-Doc: aplicar la clase "Downark" después de " href = "javascript :;" data-toggle = "desplegable" data-hover = "desplegable" data-close-others = "true"> <i> </i> <span> 4 </span> </a> <ul> <li> <h3> tiene <span> 7 nuevo </span> mensajes </h3> <a href = "page_inbox.html"> ver todo </a> </li> <li> <li> <lyle "; data data-handle-color = "#6372283"> <li> <a href = "inBox.html? A = View"> <span> <img src = "~/content/assets/admin/layout3/img/avatar2.jpg"> </span> <pan> <span> sed auctor nibh congue nibh.auctor nibh auctor nibh ... </span> </a> </li> <li> <a href = "inBOY.HTML? A = View"> <span> <img src = "~/content/assets/admin/layout3/img/avatar <span> 16 mins </span> </span> <span> Vivamus SED Congue Nibh Autor Nibh Congue Nibh. Autor nibh Autor Nibh ... </span> </a> </li> <li> <a href = "inBox.html? A = View"> <span> <img src = "~/content/assets/admin/Layout3/img/avatar1.jpg"> </span> <span> bob nilson </span> <span> vivamus sed nibh Autor nibh Congue nibh. auto nibh auto nibh ... </span> </a> </li> <li> <a href = "inBox.html? A = View"> <span> <img src = "~/content/assets/admin/Layout3/img/avatar2.jpg"> </pan <span> Vivamus Sed Auto 40% nibh Congue Nibh ... </span> </li> <li> <a href = "inBoBoL.html? A = View"> <span> <img src = "~/centent/assets/admin/layOut3/img/avatar </span> </span> <span> Vivamus Sed Congue Nibh Autotor Nibh Congue NIBH. Autotor Nibh Autotor Nibh ... </span> </a> </li> </ul> </li> </li> </li> </li> </li> <!-End de la bandeja de entrada-> <!-Comenzar toDo Dropdown-> <!-Doc: Aplicar "Dropdown-Dark" Clase tras abajo "A continuación", para cambiar el estilo de desplazamiento-> <li lii = "Headsward" href = "javascript :;" data-toggle = "desplegable" data-hover = "desplegable" data-close-others = "true"> <i> </i> <span> 3 </span> </a> <ul> <li> <h3> tiene <span> 12 pendientes </span> tareas </h3> <a href = "page_todo.html> ver todo </a> </li> </li> <li> <ly>:" ULTY = ":": ":". 275px; " data data-handle-color = "#6372283"> <li> <a href = "javascript :;"> <span> <span> nueva versión v1.2 </span> <span> 30%</span> </span> <span> <span> <span> de la aplicación de la aplicación </span> <pane> 65 65 "65" aria-valuemin="0" aria-valuemax="100"><span>65% Complete</span></span> </span> </a> </li> <li> <a href="javascript:;"> <span> <span>Mobile app release</span> <span>98%</span> </span> <span> <span> <span>98%</span> </span> <span> <span> <span> <span>98%</span> </span> <span> <span> <span> <span>Database migration</span> <span>10%</span> </span> <span> <span aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><span>10% Complete</span></span> </span> </a> </li> <li> <a href = "javascript:;"> <span> <span> actualización del servidor web </span> <span> 58%</span> </span> <span> <span> <span> actualización del servidor web </span> <span> 58%</span> </pan> <> <pane> <span ARIA-ValUENW = "58" ARIA-VALUAL = "0" Span-ValuAlUaluAlUaluAnw = "58" ARIA "ARIANEMINATROMIN =" "SPAN->" SPAN-> "SPAN-SPAN-VALUUNOW =" 58 "ARIA" ARIA "ARIANE =" "SPAN) aria-valuemax = "100"> <span> 58% completo </span> </span> </span> </a> </li> <li> <a href = "javascript :;"> <span> <span> <span> desarrollo móvil </span> <span> 85% </pan> </span> <span> <span aria-valuenow = "85" ARIA-VALUININ = "0" 0 "0" 0 "0". aria-valuemax = "100"> <span> 85% completo </span> </span> </span> </li> <li> <a href = "javascript:;"> <span> <span> nueva UI Release </span> <span> 38% </span> </span> <span> <span> <span> aria-valuemin = "0" 0 "0" aria-valueMax = "100"> <span> 38% completo </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> <!-End a LODO Towning-> < El styte desplegable -> <li> <a href = "javascript :;" data-toggle = "desplegable" data-hover = "desplegable" data-close-others = "true"> <img src = "~/content/assets/admin/layout/img/avatar3_small.jpg"/> <span> nick </ail> <i> </i> </a> <ul> <li> <a href = "extra_profile.html> <i> </a> <ul> <li> <a href =" extra_profile.html> <i> </a> <ul> <li> <a href = "adicional </a> </li> <li> <a href="page_calendar.html"> <i></i> My Calendar </a> </li> <li> <a href="page_calendar.html"> <i></i> My Calendar </a> </li> <li> <a href="inbox.html"> <i></i> My Inbox <span> 3 </span> </a> </li> <li> <a href="page_todo.html"> <i></i> My Tasks <span> 7 </span> </a> </li> <li> </li> <li> <a href="extra_lock.html"> <i></i> Lock Screen </a> </li> <li> <a href = "Login.html"> <i> </i> Soge OUT </a> </ul> </li> </li> <!-Desense de inicio de sesión del usuario final-> <!-Comience Quick Barbar Toggler-> <!-Doc: Aplicar clase "desplegable" después " <i> </i> </a> </li> <!-End Quick BarBar Toggler-> </ul> </div> <!-Menú de navegación superior en final-> </div> <!-End Header Inner-> </div> <!-End Header-> <Viv> </div> <!-Begin Container-> <Div> <!-Comienza SideBar-> <Viv> <! Doc: Doc: Doc. data-auto-scroll = "false" para deshabilitar la barra lateral desde el desplazamiento automático/enfoque-> <!-doc: cambiar data-auto-speed = "200" para ajustar el subense de menú Slide/down velocidad-> <div> <!-Comenzar el menú de la barra lateral-> <!-Doc: Aplicar "Page-SideBar-Menu-Light" Class After "PageBar-SideBar-Menu" To "A SideBar" A SideBar "A SideBar (Menú de la página". bordes)-> < Modo de menú Sub-> <!-Doc: Establezca data-auto-scroll = "false" para deshabilitar la barra lateral desde desplazamiento automático/enfocado-> <!-doc: set data-skeing-expand = "true" para mantener los submenues expandidos-> <! DOC: establecer datos-auto-velocidad = "200" para ajustar el menú Menú Deslice/Down Speed-> <ul Data-Expess-Expandy-Expandyengy "" data-auto-scroll = "true" data-slide-speed = "200"> <!-doc: para eliminar el toggler de la barra lateral de la barra lateral solo necesita eliminar completamente el siguiente "lateral-toggler-wrapper" li elemento-> <li> <!-button de cajas de toggler de comienzo-> <div> </div> <!-final the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element --> <li> <a href="javascript:;"> <i></i> <span>Multi Level Menu</span> <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Item 1 <span></span> </a> <ul> <li> <a href = "javaScript :;"> <i> </i> Enlace de muestra 1 <span> </span> </a> <ul> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <Li> <Li> <Li> href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> </li> </li> <li> <a href = " 1</a> </li> <li> <a href="#"><i></i> Sample Link 2</a> </li> <li> <a href="#"><i></i> Sample Link 3</a> </li> </li> </li> <li> <a href="#"><i></i> Sample Link 3</a> </li> </li> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <a href = "#"> <i> </i> Enlace de muestra 1 </a> </li> <li> <a href = " Enlace 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> item 3 </a> </li> </li> </li> </li> </li> </li> <!-Menú de end lateral-> </div> <!-End SideBar-> <!-Begin Content-> <div> MODAL FORM--> <div id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>Modal title</h4> </div> <div> <div> El formulario de configuración de widget va aquí </div> <div> <button type = "botón"> Guardar cambios </boton> <botón type = "botón" data-dismiss = "modal"> cerrar </botón> </div> </div> <!-/.modal-Content-> </Div> <!-/.modal-dialog-> </div> <!-/.modal-> <<! < <li data-style = "blue" data-conctainer = "body" data-original-title = "blue"> </li> <li data-syle = "gris" data-conctainer = "cuerpo" data-original-title = "gris"> </li> <li data-tyle = "light" data-container = "body" original-original-title = "light"> <//li> </li> <li> data = "Light2" Light2 "Light2" Light2 "Light2" Light2 "Light2" LI LI LI LI LI LIP data-container = "Body" data-html = "true" data-original-title = "light 2"> </li> </ul> </div> <div> <div> <span> estilo de tema </span> <select> <opción valor = "cuadrado" seleccionado = "seleccionado"> Square Corners </ppection> <Opción Valor = "redondeado"> Ronadrones de las esquinas </ppection> </select> </siv> <viv <Diviv <Diviv <Diviv <Diviv <Diviv. <select> <option value = "fluid" selected = "selected"> fluid </option> <opción value = "boxed"> boxed </option> </select> </div> <div> <span> encabezado </span> <select> <option value = "corregido" seleccionado = "seleccionado"> corregido </opción> <option Value = "predeterminado"> option </spect> </select> </div> <pan> <span> <opción value = "light" selected = "selected"> light </option> <opción valor = "oscuro"> oscuro </opción> </select> </div> <div> <span> en modo de barra lateral </span> <select> <option value = "fijado"> corregido </opción> <opción valor = "predeterminado" seleccionado = "seleccionado"> predeterminado </select> </siv> <div> <iv> <span> SideBar </Menú <1/Menú seleccionado " valor = "acordoion" seleccionado = "seleccionado"> acorkion </opción> <opción value = "hover"> hover </option> </select> </div> <div> <sp> <span> estilo barra lateral </span> <section> <option value = "default" selected "seleccionado"> default </opción> <pection> <pection opción Valor = "predeterminado" = ""> "Opción </opción> <opción> <opción Value =" Valor "Valor predeterminado" Opción> <Opción Opción Valor = "Valor predeterminado" Seleccionado "Seleccionado" Seleccionado </opción> <Opción> <Option Value = "Valor predeterminado" Seleccionado "Option" Option "Option Value =" Seleccionado "Seleccionado" <Cection> <opción value = "light"> light </option> </select> </div> <div> <span> Posición de barra lateral </span> <select> <opción valore = "izquierda" seleccionada = "seleccionada"> izquierda </ppection> <opción valor = "rect"> derecha </opción> </select> </div> <div> <div> <potante> pie </span> <pection> <spection Value "> sector </option </opción) seleccionado = "seleccionado"> predeterminado </option> </select> </div> </div> <!-End Style Customizer-> <!-Head Page Header-> <Div> <ul> <li> <i> </i> <a href = "index.html"> inicio </a> <i> </i> </li> <li> <a href = "#"> lico </a> </li> < </div> <h3> Diseño <small> Informes y estadísticas </small> </h3> <!-Encabezado de página final-> <!-Begin Layone Stats-> @renderbody () <!-End Layone Stats-> <Div> </div> </div> </div> <!-End Content-> <!-Comience Quick SideBar-> <a href = "javascript :;"> <i> </i> </a> <div> <div> <ul> <li> <a href = "#Quick_sidebar_tab_1" data-toggle = "tab"> usuarios <span> 2 </span> </a> </li> <li> <a href = "#Quick_sideBar_tab_2" Data-toggle " <span> 7 </span> </a> </li> <li> <a href = "javascript :;" data-toggle="dropdown"> More<i></i> </a> <ul role="menu"> <li> <a href="#quick_sidebar_tab_3" data-toggle="tab"> <i></i> Alerts </a> </li> <li> <a href="#quick_sidebar_tab_3" data-toggle="tab"> <i></i> Notificaciones </a> </li> <li> <a href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> actividades </a> </li> <li> <a href = "#Quick_sideBar_tab_3" Data-Toggle = "Tab"> <i> </i> Actividades </a> </li> </li> </li> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li>. href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> Configuración </a> </li> </ul> </li> </ul> </li> </ul> <div> <div it = "Quick_sideBar_tab_1"> <div data-coro-coror = "#ddd" wrapper-class-clase = "" "pageBar_tab_1"> <div data-coro-coro = "#ddd" dddd "-capper-clase = "" "" " <h3> Staff </h3> <ul> <li> <div> <span> 8 </span> </div> <img src = "~/content/assets/admin/lentout/img/avatar3.jpg"> <div> <h4> bob nilson </h4> <div> administrador de proyectos </div> </div> </li> <li> <iMg src = "~/content/assets/admin/lentout/img/avatar1.jpg"> <div> <h4> nick larson </h4> <div> director de arte </div> </li> <li> <div> <span> 3 </span> </div> <img src = "~/contenido/asignes/admin/lentout/img/avatar Hubert</h4> <div> CTO </div> </li> <li> <img src="~/Content/assets/admin/layout/img/avatar2.jpg"> <div> <h4>Ella Wong</h4> <div> CEO </div> </li> </ul> <h3>Customers</h3> <ul> <li> <div> <span>2</span> </div> <img src = "~/content/assets/admin/lentout/img/avatar6.jpg"> <div> <h4> Lara kunis </h4> <div> ceo, bucle inc </div> <iv> <iv> Último visto src = "~/content/assets/admin/lentout/img/avatar7.jpg"> <div> <h4> ernie kyllonen </h4> <div> gerente de proyectos, <br> smartbizz ptl </div> </div> </li> <li> <img src = "~/content/assets/admin/lectout/img/avatar8.J <H4> Lisa Stone </h4> <div> cto, Keort Inc </div> <div> Última vista 13:10 pm </div> </div> </li> <li> <div> <span> 7 </span> </div> <img src = "~/content/assets/admin/layout/img/avatar CFO, H&D Ltd </div> </li> </li> <li> <img src = "~/assets/admin/diseño/img/avatar10.jpg"> <div> <h4> irina savikova </h4> <div> ceo, tizda motors inc </li> <li> <li> <sp> 4 </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span </span> src = "~/content/assets/admin/layout/img/avatar11.jpg"> <div> <h4> maria gómez </h4> <div> gerente, infomatic inc </div> <div> Última vista 03:10 am </div> </li> </div> <div> <div> <div> href = "javascript :;"> <i> </i> back </a> </div> <div> <div> <img src = "~/content/assets/admin/layout/img/avatar3 ¿Envíame el informe? </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript :;"> ella wong </a> <span> 20:15 </span> <span> está casi hecho. Lo enviaré en breve </span> </div> </div> <div> <img src = "~/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript:;"> Bob Nilson </a> <span> 20:15 </span> ¡Gracias! :) </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript:;"> Ella wong </a> <pan Pido disculpas por la demora. </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:17 </span> <span> no probs. Simplemente tómese su tiempo :) </span> </div> </div> <div> <img src = "~/flow/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript:;"> ella wong </a> <span> 20:40 </span> <span> casi. Acabo de enviarte un correo electrónico. </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript:;"> bob nilson </a> <span> 20:17 </span> <span> ¡Genial! Gracias. Lo comprobará de inmediato. </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript:;"> ella wong </a> <span> 20:40 </span> <span> Por favor, hágame saber si tiene algún comentario. </span> </div> </div> <div> <img src = "~/content/assets/admin/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:17 </span> <span> seguro. Lo comprobaré y te haré algo si es necesario corregir algo. </span> </div> </div> </div> </div> <div> <input type = "text" placeholder = "type un mensaje aquí ..."> <div> <button type = "botón"> <i> </i> </boton> </div> </div> </div> </div> </div> </div> </div> </div> <viv <divsi id = "Quick_sidebar_tab_2"> <iv> <h3> General </h3> <ul> <li> <div> <iv> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> tiene 4 tareas pendientes. <span> Tome Action <i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> justo ahora </div> </li> <li> <a href = "javascript:;"> <div> <div> <div> <div> <iv> <i <i> </i> </div> <div> <iv> finance finance. </div> </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> <li> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> Tienes 5 membresías pendientes que requieren una revisión rápida. </div> </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <1> nuevo orden recibido con <span> número de referencia: DR23923 </span> </iv> </div> </div> <div> <div> 30 min. </div> </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> tiene 5 membresía pendiente que requiere una revisión rápida. </div> </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> <i> </i> </div> </div> <iv> Web Servidor debe ser mejorado. <span> Overdue </span> </div> </div> </div> </div> </div> </div> <div> <div> 2 horas </div> </li> <li> <a href = "javascript:;"> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> <iv> ip informe para el año de año. </div> </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> </ul> <h3> System </h3> <ul> <li> <iv> <iv> <div> <div> <div> <div> <i> </i> </div> </div> <iv> tiene 4 pendientes de pendientes. <span> Tome acciones <i> </i> </span> </div> </div> </div> <div> Tienes 4 tareas pendientes. <Span> Tome Action <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> justo ahora </div> </li> <li> <a href = "javaScript:;"> <Sc> <Viv> <div> <div> <div> <div> <i> </i> </div> <div> <div> free> free. </div> </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> tiene 5 membresía pendiente que requiere una revisión rápida. </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <div> <iv> <i> </i> </div> </div> </div> <div> nuevo orden recibido con <span> Número de referencia: DR23923 </span> </div> </div divid </div> <div> <div> 30 minutos </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> tiene 5 membresía pendiente que requiere una revisión rápida. </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <iv> <div> <i> </i> </div> </div> <iv> <iv> servidor web hardware debe ser mejorado. <span> Overdue </span> </div> </div> </div> </div> </div> </div> <div> 2 horas </div> </li> <li> <a href = "javascript:;"> <div> <iv> <div> <div> <i> </i> </div> </div> <div> <div> ipo para el año 2013 ha sido lanzado. </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> </ul> </div> </div> </div> </div> <div> <div> 20 mins </aa> </ul> </div> </div> </div> <divi = "shessideBar_tab_tab" <H3> Configuración general </h3> <ul> <li> Habilitar notificaciones <input type = "checkbox" checked data-size = "Small" data-on-color = "éxito" data-on-text = "en" data off-color = "default" data-off-text = "off"> </li> <li> Permitir el seguimiento de la seguimiento de los datos <input type = "checkbox" de datos = "Small" Data-color = "Info =" Info = "Info" ". datafact-off-color = "default" data-off-text = "off"> </li> <li> log errores <input type = "CheckBox" checked data-size = "Small" data-ond-color = "peligro" data-on-text = "" data-off-color = "predeterminado" data-off-text = "Off">> </li> <li> data-on-text = "en" data-off-color = "predeterminado" data-off-text = "off"> </li> <li> enable sms alertas <input type = "checkbox" data-size = "Small" Data-On-Color = "Success" data-on-text = "en" datafact-color = "predeterminado" datafact-off-text = "Off"> </li> </lul> <h3> Sistema </h3 en "ul-h3 ul-li-li" li-li-li-li-li <selection> <option value = "1"> normal </opción> <opción value = "2" seleccionado> medio </opción> <opción value = "e"> high </option> </select> </li> <li> Falling Correo electrónico intenta <input value = "5"/> </li> <li> SECUNTARIO PORTO SECUPTO <Input Value = "3560"/> </li> <li> Notifique en el error del sistema <li> SECUPTO TIPO SMTP <Input Value = "3560"/> </li> <li> Notifique en el error del sistema <li> SECUPTO SMTP. data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> <li> Notify On SMTP Error <input type="checkbox" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> </ul> <div> <botón> <i> </i> Guardar cambios </boton> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-End Quick SideBar-> </div> <!-End Container-> <!-Begin Footer-> <Div> <Div> 2014 © Metronic por Keenthemes. </div> <div> <i></i> </div> </div> <!-- END FOOTER --> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <!--[if lt IE 9]> <script src="~/Content/assets/global/plugins/respond.min.js"></script> <script src="~/Content/assets/global/plugins/excanvas.min.js"></script> <![endif]--> <script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="~/Content/assets/global/scripts/meteronic.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/tasks.js" type="text/javascript"></script> <!-- END PAGE LEVEL SCRIPTS --> <script>jQuery(document).ready(function() { Metronic.init(); // init metronic core components Layout.init(); // init layout QuickSidebar.init(); // init quick sidebarDemo.init(); // init demo features Index.init(); Index.init layout display Daterange(); Index.initJQVMAP(); // init index page's custom scripts Index.initCalendar(); // init index page's custom scripts Index.initCharts(); // init index page's custom scripts Index.initChat(); Index.initMiniCharts(); Tasks.init layout display Widget();}); </script> <!-- END JAVASCRIPTS --></body><!-- END BODY --></html>

再次提取菜单代码

<li> <a href="javascript:;"> <i></i> <span>Multi Level Menu</span> <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Item 1 <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Sample Link 1 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 2</a> </li> <li> <a href="#"><i></i> Sample Link 3</a> </li> </ul> </li> <li> <a href="javascript:;"> <i></i> Item 2 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"> <i></i> Item 3 </a> </li> </ul> </li>

大约在466行-529行

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

5.拼接菜单栏

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

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

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

using App.Models; using System; usando 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=="0"); StringBuilder sb = new StringBuilder(); bool firstFlag = true;//The first default expansion GetChildMenus(ref sb, menus, firstFlag);//The second-level menu ViewBag.Menus = sb.ToString(); return View(); } //Recursively call public void GetChildMenus(ref StringBuilder sb, IQueryable<SysModule> menus,bool firstFlag)//The second-level menu { int count = 0; 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 > 0 ? "javascript:;" : m.Url, m.Iconic, m.Name, count > 0 ? "<span class='arrow '></span>" : ""); firstFlag = false; if (count > 0) GetChildMenus(ref sb, menusChild,firstFlag); sb.Append("</li>"); } if (!firstFlag) sb.Append("</ul>"); }}}

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

6. Resumen

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

Efecto final

Autor: Ymnets

Fuente: http://ymnets.cnblogs.com/

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.