Continue com o artigo anterior, compartilhe as notas compiladas na barra de menus metrônica do Bootstrap com você para sua referência. O conteúdo específico é o seguinte
1. Introdução
1). Configuração do ambiente
2). Extrair a página
3). Gerar dinamicamente o menu (árvore de nível ilimitada)
2. Configuração do ambiente do sistema
O projeto requer suporte de dados do programa, aqui MVC5.0+EF6.0 [SQLSERVER] é selecionado (nenhuma interpretação da arquitetura MVC e SQLServer)
Ambiente de corrida: VS2013+MVC5.0+EF6.1+SQLSERVER2012
Nome da solução: Appsolution Nome do projeto: App.Web (camada da interface do usuário) e App.Models (camada de acesso a dados) - Modo de acesso direto
Extraia todos os arquivos sob o tema para o conteúdo do MVC, extraia o index.html de admin to _layout.cshtml para se preparar para a transformação
3. Crie bancos de dados e tabelas
Banco de dados: AppDatabase
Crie a seguinte tabela de dados e crie appdb.edmx
Use [AppDatabase] GO/****** Objeto: Tabela [DBO]. [SysModule] Data do script: 2015/9/15 21:03:39 *******/Set ANSI_NULLS ONGOSET (SYSSMODIDER ONGOSET Ansi_Padding OnGocreate Tabela [DBO]. [ ID [Name] [varchar](50) NOT 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] NOT NULL, --Does [CreateTime] [datetime] NULL, --Create Time [Islast] [bit] não nulo -é a última restrição de item [PK_SYSMODULE] CHAVE PRIMÁRIA CLUTERED ([ID] ASC) com (pad_index = off, estatística_norecompute = off, ignore_dup_key = off, allow_row_locks = on, alipl_page_locks = on [] on []) [DBO]. [SysModule] Com NOCHECK Adicionar restrição [FK_SYSMODULE_SYSMODULE] Chave estranha ([ParentId]) Referências [DBO]. [Sysmodule] ([id]) Tabela de gol [DBO].
Dados artificiais
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('0','root','root','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('1', 'menu primário 01', '0', 'índice', 'icon-settings', null, 0, null, 0) insert em [sysmodule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('11','Primary menu 01-01','1','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('111','Three-level menu01-01-01','11','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('112','Level 3 menu 01-01-02','11','Index','icon-settings',NULL,0,NULL,1)INSERT INTO [SysModule] ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('12', 'nível 2 menu 01-02', '1', 'index', 'icon-link', null, 0, null, 1) insert em [sysmod ',' sysmod ',' icon-link ', null, 0, null, 1) insert em [sysmod', ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('13', 'segundo nível 01-03', '1', 'índice', 'icon-link', null, 0, null, 1) insert em [sysmodule ', ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('2', 'menu primário 02', '0', 'Índice', 'icon-settings', null, 0, null, 0) insert em [sysmodule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('21','Primary menu 02-01','2','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('211', 'nível 3 menu02-01-01', '5', 'index', 'icon-link', null, 0, null, 1). ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('212', 'Menu de nível 3 02-01-02', '5', 'index', 'icon-link', null, 0, null, 1), [sys. ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('22', 'nível 2 menu 02-02', '2', 'índice', 'icon-link', null, 0, null, 1) insert em [sysmod ',' sysmod ',' icon-link ', null, 0, null, 1) insert em [sysmod', ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('23', 'segundo nível MENU02-03', '2', 'index', 'icon-link', null, 0, null, 1) insert em [sysmod ',' sysmod ',' icon-link ', null, 0, null, 1) insert em [Sysmod', ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('3', 'menu primário 03', '0', 'índice', 'icon-settings', null, 0, null, 0) insert em [sysmodule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('31','Primary menu 03-01','3','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('311', 'nível 3 menu03-01-01', '31', 'index', 'icon-link', null, 0, null, 1). ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [Islast]) valores ('312', 'Menu de nível 3 03-01-02', '31', 'index', 'icon-link', null, 0, null, 1). ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [Islast]) valores ('32', 'Menu de nível 2 03-02', '3', 'index', 'icon-link', null, 0, null, 1) insert em [sysmod ', sysmod,' icon-link ', null, 0, null, 1) insert em [sysmod', ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('33', 'segundo nível menu03-03', '3', 'index', 'icon-link', null, 0, null, 1) insert em [sysmod ', sysmod,' icon-link ', null, 0, null, 1) insert em [ ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('4', 'menu primário 04', '0', 'índice', 'icon-settings', null, 0, null, 0) insert em [sysmodule] ([Id], [name], [parentid], [url], [iconic], [Sort], [enable], [createTime], [islast]) valores ('41', 'menu primário 04-01', '4', 'index', 'icon-link', null, 0, null, 1) insert em [sysmod ',' sysmod ',' icon-link ', null, 0, null, 1) insert em [ ([Id], [name], [parentid], [url], [iconic], [Sort], [Enable], [CreateTime], [islast]) valores ('42', 'segundo nível MENU04-02', '4', 'index', 'icon-link', null, 0, null, 1) (22 linhas afetadas)4. Extrair layouts importantes de página
Somos o sistema de back -end, então mantemos o topo. Menu esquerdo e pé 3 partes
Eu extrai, por favor copie
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <title> metronic | Exibição de layout </ititle> <meta http-equiv = "x-ua compatível com" content = "ie = edge"> <meta content = "width = width, escala inicial = 1" name = "viewport" /> <meta content = "" "" "descrição" /> <meta content = "" name = "" /> href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href = "~/content/Assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "sTILELEET" type = "text/css"/> <link href = "~/content/Assets/global/plugins/uniform/css/uniform.Defafult.csSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS" href = "~/content/Assets/global/plugins/bootstrap-switch/css/bootstrap-switch.minmin.css" rel = "Stylesheet" type = "text/css"/> <!-encerrar estilos obrigatórios globais-> <!-iniciar estilos de plugin de página-> <link> <! href = "~/content/Assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/Assets/global/plugins/fullcalendar/completcalendar.min.calendar.Cenet" Rels) "Rels)" Rels) "RelnCalendar/FullCALEndar.Min.C.SSSs" href="~/Content/assets/global/plugins/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" /> <!-- END PAGE LEVEL PLUGIN STYLES --> <!-- BEGIN PAGE STYLES --> <link href="~/Content/assets/admin/pages/css/tasks.css" rel="stylesheet" type = "text/css"/> <!-estilos de página final-> <!-inicia estilos de temas-> <link href = "~/content/assets/global/css/components.css" id = "style_components" ~ contents = "styleSheet" type = "textos/css"/> <link href = " rel = "Stylesheet" type = "text/css"/> <link href = "~/content/Assets/admin/layout/css/layout.css" rel = "sTILESHET" type = "text/csS"/> type = "text/css" id = "style_color"/> <link href = "~/content/assets/admin/layout/css/custom.css" rel = "stylesheet" type = "text/css"/> <!-estilos de tema final-> <link ""/"/curto"/<! <div> <!-Comece o cabeçalho interno-> <div> <!-comece o logotipo-> <div> <a href = "index.html"> <img src = "~/content/Assets/admin/layout/img/logo.png"/> </a> <div> </div> <! href = "JavaScript:;" data-toggle = "colapso" Data-alget = ". NavBar-Collapse"> </a> <!-final do menu responsivo Toggler-> <!-Comece o menu de navegação superior-> <div> <ul> <!-BEGN NOTIFICATELOTODN-> <!-Doc: Aplicar "Dropdown-Dark" APÓS "LIRODDOWNEND" para alterar o stylete-> <! href = "JavaScript:;" data-toggle = "suspenso" data-hover = "suspenso" Dados-close-deothers = "true"> <i> </i> <pan> 7 </span> </a> <ul> <li> <h3> <pan> 12 pending </span> notificações </h3> <a href = "extra_profille.htmlA"> view toda 250px; " Data-Handle-Color = "#637283"> <li> <a href = "javascript :;"> <pan> agora </span> <pan> <pan> <i> </i> </span> novo usuário registrado. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 minutos </span> <pan> <pan> <i> </i> </span> servidor #12 sobrecarregado. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 minutos </span> <pan> <pan> <i> </i> </span> servidor #12 sobrecarregado. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 10 minutos </span> <pan> <pan> <i> </i> </span> servidor #2 não está respondendo. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 14 hrs </span> <pan> <pan> <i> </i> </span> Erro de aplicação. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 2 dias </span> <pan> <pan> <i> </i> </span> Database sobrecarregou 68%. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 dias </span> <pan> <pan> <i> </i> </span> um IP do usuário bloqueado. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 4 dias </span> <pange> <pan> <i> </i> </span> Servidor de armazenamento #4 não está respondendo ao dfdfdfd. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 5 dias </span> <ipa> <i> </i> </span> Erro do sistema. </span> </a> </li> </li> <li> <a href = "javascript :;"> <pan> 9 dias </span> <pan> <pan> <i> </i> </span> O servidor de armazenamento falhou. </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <!-End Notification DropDown-> <!-BEGN EXTOXODOWN-> <!-Doc: Aplicar "Dropdown-Dark" APOSENTO APÓS "DOWNOWNERTENDATELATE" TOXODOWNE-> <!-Doc: Aplicar "Apply-Dark" APOSTO APÓS "DOWNOWNOTENDATELATELTODOWNETO-ASSETLOWNETO: <!-Aplicar" A Aplicar-se da liSTown) depois de liRox) href = "JavaScript:;" data-toggle = "suspenso" data-hover = "suspenso" Data-close-deothers = "true"> <i> </i> <pan> 4 </span> </a> <ul> <li> <h3> você tem <span> 7 new </span> Mensagens </h3> <a href = "página_inbox.html) View All </s3> Data-Handle-Color = "#637283"> <li> <a href = "inBox.html? A = View"> <pange> <img src = "~/content/Assets/admin/layout3/img/avatar2.jpg" </span> <span> <lisa wong </span Auctor Nibh passa a nibh. Mins </span> </span> <pan> Vivamus sed Congue Nibh Autor Nibh Congue Nibh. AUTOR NIBH AUTOR NIBH ... </span> </a> </li> <li> <a href = "inBox.html? a = view"> <pan> <img src = "~/content/assets/admin/layout3/img/avatar.jpg"> </span> <span> spanned nil niln <pan> vivamus sed nibh autor nibh conguh 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"> </span> <span> <span> Lisa Wong </span> <span> <span> 40 mins </span> </span> <pan> Vivamus sed automático 40% Nibh cugue nibh ... </span> </li> <li> <a href = "inBox.html? a = view"> <pan> <img src = "~/content/span/span/span> span/span/span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> </span> </span> <pan> Vivamus sed Congu Nibh Autotorr Nibh Congu Nibh. autotor nibh autotor nibh... </span> </a> </li> </ul> </li> </li> </li> </li> </li> <!-- END INBOX DROPDOWN --> <!-- BEGIN TODO DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown style --> <li id="header_task_bar"> <a href = "JavaScript:;" data-toggle = "suspenso" data-hover = "suspenso" Dados-close-deothers = "true"> <i> </i> <pan> 3 </span> </a> <ul> <li> <h3> você tem <milty> 12 pending </span> Tasks </h3> <a = "Page_todo.html "> </span> viewl </h3> <a href =" Page_todo.html "> 275px; " data-handle-color="#637283"> <li> <a href="javascript:;"> <span> <span> New release v1.2 </span> <span>30%</span> </span> <span> <span> <span>Application deployment</span> <span>65%</span> </span> <span> <span> <span> aria-valuenow="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 :;"> <pan> <pan> upgrade do servidor da web </span> <pan> 58%</span> </span> </span> </span> web upgrade </span> <span> 58%</span> "Spania-VIA-VRIA-ARIAWROUN" 0. ARIA-valuemax = "100"> <pan> 58% completo </span> </span> </span> </a> </li> <li> <a href = "javascript :;"> </span> <plaia> desenvolvimento móvel </span> <85% </span> </span> <pania> ARIA-ARIA-ARIANEN: ARIA-valuemax = "100"> <pan> 85% completo </span> </span> </span> </li> <li> <a href = "javascript :;"> </span> novo ui release </span> <pan> 38% </span> <pan> <pan> </span> ARIA-valu (span> 38% </span> " ARIA-valuemax = "100"> <pan> 38% completo </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> <!-End TOPLOWN-> <!-DOWLOWNOUNDODOWNDOWNDOWNDOWDOWN <! Estilo suspenso -> <li> <a href = "javascript:;" data-toggle = "suspenso" data-hover = "suspenso" Dados-close-deothers = "true"> <img src = "~/content/assets/admin/layout/img/avatar3_small.jpg"/> <span> nick </span> <i> <filys> <li> <li> <li> </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> Minha caixa de entrada <pan> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i> minhas tarefas </span> </span> </a> </li> <li> </li> <li> <a href = "Extra href = "login.html"> <i> </i> logout </a> </ul> </li> </li> <!-Login do usuário final Dropados-> <!-Comece a barra lateral rápida: a classificação "; <i> </i> </a> </li> <!-termine a barra lateral rápida Toggler-> </ul> </div> <!-encerrar o menu de navegação superior-> </div> <!-encerrar o cabeçalho interno-> </div> <!-Cabeçalho final-> <div> </diviVi. Data-Auto-Scroll = "False" para desativar a barra lateral do Auto Rolling/Focusing-> <!-Doc: Alterar dados-auto-speed = "200" para ajustar o sub-menu Slide/Down Speed-> <div> <!-Begin Side-Bar Menu-> <!-Doc: Aplicar "Page-Side-Senu-Light-Light" Class Right-side Right-sider "side-sider" <!-Doc: Aplique a classe "Página-menu-hover-submenu" logo após o "Menu-lado-lado da página" para permitir o modo sub-menu (mouse vs de acordo)-> <!-Doc: Aplicar "Página) da classe" Página "Página" Página-Página-Página-Página-Página "Página-Menu-Menu" ToeL) a Página (Página-Menu-Closed " <!-Doc: Defina dados-auto-scroll = "false" para desativar a barra lateral do rolagem/foco automático-> <!-Doc: defina dados-keep-expand = "true" para manter os submenos expandidos-> <!-Doc: Set Data-Auto-Speed = "200" para ajustar o Sub Menu Up/Down Speed-> <ul Data-slide-speed = "200"> <!-Doc: Para remover o alternador da barra lateral da barra lateral, você só precisa remover completamente o elemento "Li Just Boxing Botut Butter Butter Buttle Butter-Butter Butter-Butt Buttle Remons da barra lateral do lado da barra lateral-Remons da barra lateral do lado da barra lateral do bar da barra lateral-Remover a toggler de barra lateral do lado da barra lateral- O elemento Li "barra lateral da barra de pesquisa"-> <li> <a href = "javascript :;"> <i> </i> <span> menu de nível múltiplo </span> </span> </span> </a> <ul> <li> <a href = "javascript:; href = "javascript :;"> <i> </i> Link de amostra 1 <span> </span> </a> <ul> <li> <a href = "#"> <i> </i> Link de amostra 1 </a> </li> <li> <a href = "#" <i> </i> Amostra link 1 </a> href = "#"> <i> </i> Link de amostra 1 </a> </li> <li> <a href = "#"> <i> </i> Link de amostra 1 </a> </li> <li> <a href = "#"> <i> </i> link 1 </a> </href = </li> 1 </a> </li> <li> <a href = "#"> <i> </i> Link 2 </a> </li> <li> <a href = "#"> <i> </i> Link de amostra 3 </a> </li> </li> </li> <li> <a> </href = "#" </a> </li> <li> <a href = "#"> <i> </i> Link de amostra 1 </a> </li> </li> <li> <a href = "#"> <i> </i> Link 1 </a> </li> <li> <a href = "#" <i> </i> Amostra link 1 </a> <li> Link 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> Item 3 </a> </li> </li> </li> </li> </li> </li> <!-Menu da barra final- Modal Form-> <div id = "Portlet-Config" tabindex = "-1" role = "diálogo" aria-labelledby = "myModallabel" aria-hidden = "true"> <div> <div> <div> <butter type = "Button" Data-Dismiss = "modal" ARIO-HIDDED = "True" </loblow> </button> </button> </button> <button> <butão> O formulário de configurações vai aqui </div> <div> <button type = "button"> salvar alterações </button> <button type = "button" data-dismiss = "modal"> feche </button> </div> </div> <!-/.modal--Cntent-> </div> <!-/.modal-dialog-> </!-/ BEGIN ATILIZADOR-> <div> <div> </div> <div> </div> <div> <div> <span> cor de tema </span> <ul> <li data-shyle = "default" data-container = "body" data-titinal-title = "default"> </li Data-style = "DarkBlue" Data-titing = " <li data-syle = "azul" data-container = "corporal" dados-original-title = "azul"> </li> <li data-style = "cinza" data-container = "corpo" data-origin-title = "cinza"> </li> <li data-style = "" "") Data-style = "Light2" Data-container = "Body" Data-html = "True" Data-original-title = "Light 2"> </li> </ul> </div> <div> <npan> Estilo de tema </span> <leclect> <opção "Redida" Square "Selected =" Selected "> Square </Option> </option> <putption> <eclect> <pan> layout </span> <leclect> <opção value = "fluid" selected = "Selected"> fluid </pption> <option value = "boxed"> boxed </pption> </leclect> </div> <div> </span> </span> </span> <leclect> <ption Value = "Selected =" Selected "> <//option> </span> </span> <ection> <select> <ption) <span> Top Menu Dropdown </span> <select> <option value="light" selected="selected">Light</option> <option value="dark">Dark</option> </select> </div> <div> <span> Sidebar Mode </span> <select> <option value="fixed">Fixed</option> <option value="default" selected="selected">Default</option> </select> </div> <div> Menu da barra lateral </span> </span> <leclect> <option value = "acordeion" selected = "selected"> acordeão </pption> <opção value = "hover"> hover </pption> </leclect> </div> <div> <span> estilo lateral </span> </select> <option) selected="selected">Default</option> <option> <option value="default" selected="selected">Default</option> <option> <option value="light">Light</option> </select> </div> <div> <span> Sidebar Position </span> <select> <option value="left" selected="selected">Left</option> <option value="right">Right</option> </select> </div> <div> <span> rodapé </span> <leclect> <opção value = "corrigido"> corrigido </pption> <opção value = "padrão" selected = "Selected"> padrão </pption> </leclect> </div> </div> <!-Fim Style Customizer->! href = "index.html"> home </a> <i> </i> </li> <li> <a href = "#"> layout </a> </li> </ul> </div> <h3> layout <small> relatórios e estatísticas </mall> </h3> <!-enderer (! <div> </div> </div> </div> <!-Conteúdo final-> <!-Comece a barra lateral rápida-> <a href = "javascript :;"> <i> </i> </a> <divab_tab) <ul> <li> <li> <a href = "#QuickBarBar_Tab_1" Data-T-tabgle " <a href = "#Quick_sidebar_tab_2" data-toggle = "tab"> alertas <pan> 7 </span> </a> </li> <li> <a href = "javascript :;" data-toggle = "suspenso"> mais <i> </i> </a> <ul role = "menu"> <li> <a href = "#quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> alertas </a> </li> <li> <a href = "#rápido_bar Notificações </a> </li> <li> <a href = "#quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> atividades </a> </li> <li> <a href = "#quick_sidebar_tab_3" data-toggle = "Tab" <i> </i> </i> </eu> </i> </i> </i> </i> </i> </i> </i> </i> </i> </i> </i> href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> Configurações </a> </li> </ul> </li> </ul> </li> </li> <div> <div ID = "Quick_Bar_Tab_1"> <liv-cor-cors <dd> <divr = "Quick_Bar_Tab_1"> <H3> Staff </h3> <ul> <li> <div> <mpan> 8 </span> </div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"> <div> <h4> bob nilson </h4> <div> Gerente do projeto </div> <//li> </li> <h4> bob nilson </h4> <div> src = "~/content/Assets/admin/layout/img/avatar1.jpg"> <div> <h4> Nick Larson </h4> <div> Diretor de arte </div> </li> <li> <div> <rpa> 3 </span> </divg src = "~//contents/admin/span> 3 </span> </iMg src =" ~//contents/span> Hubert </h4> <div> cto </div> </li> <li> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"> <div> <h4> ella wong </h4> <div> </divp </li> <h4> <h3> <h3> </h4> <div> <div> </li> <h4> </div> <img src = "~/content/Assets/admin/layout/img/avatar6.jpg"> <div> <h4> Lara kunis </h4> <div> CEO, loop Inc </div> <div> <div> <div> <div> Último visto 03:10 </div </div src = "~/Content/Assets/admin/layout/img/avatar7.jpg"> <div> <h4> Ernie Kyllonen </h4> <div> Gerente de projeto, <br> smartbizz ptl </div> </div> </li> <iMG src = "~/contents/ <H4> lisa stone </h4> <div> cto, keort inc </div> <div> visto pela última vez 13:10 pm CFO, H&D Ltd </div> </li> </li> <li> <img src = "~/content/assets/admin/layout/img/avatar10.jpg"> <div> <h4> Irina Savikova </h4> <div> Tiz Spran src = "~/content/Assets/admin/layout/img/avatar11.jpg"> <div> <h4> maria gomez </h4> <div> gerente, infomatic Inc </div> <div> visto 03:10 am </div> </li> </li> </div> <div> <> <> href="javascript:;"><i></i>Back</a> </div> <div> <div> <img src="~/Content/assets/admin/layout/img/avatar3.jpg" /> <div> <span></span> <a href="javascript:;">Bob Nilson</a> <span>20:15</span> <span> When could you me enviar o relatório? </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar2.jpg"/> <div> </span> </span> <a href = "javascript:; Eu o enviarei em breve </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javasscript:;"> bob nilson </aport> 20:15 <a href = "javasscript:; Obrigado! :) </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar2.jpg"/> <div> </span> </span> <a href = "javascript:; Desculpe pelo atraso. </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar3.jpg"/> <div> </span> </span> <a href = "javascript:;"> bob nilson </a> <pla> 20:17 </span> <span>. Basta levar o seu tempo :) </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript:;"> ella wong </a> <panguer. Acabei de enviar por e -mail para você. </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar3.jpg"/> <div> </span> </span> <a href = "javascript:;"> bob nilson </a> <pla> 20:17 </span> </spanpy! Obrigado. Vou verificar imediatamente. </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar2.jpg"/> <div> </span> </span> <a href = "javascript:; </span> </div> </div> <div> <img src = "~/content/Assets/admin/layout/img/avatar3.jpg"/> <div> </span> </span> <a href = "javascript:;"> bob nilson </a> <span> 20:17 </span> </span> Vou verificar e zumbir se algo precisar ser corrigido. </span> </div> </div> </div> </div> <div> <input type = "text" stawholder = "Digite uma mensagem aqui ..."> <div> <butter type = "button"> <i> </i> </button> </div> </div> </divd id = "Quick_sidebar_tab_2"> <div> <h3> general </h3> <ul> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> você tem 4 tarefas pendentes. <mpan> Tome ação <i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> agora </div> </li> <li> <a href = "javascript:; </div> </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> <li> <div> <div> <div> <div> <i> </i> </div> </liv> <div> Você tem 5 membros pendentes que requerem uma revisão rápida. </div> </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <i></i> </div> </div> <div> New order received with <span> Reference Number: DR23923 </span> </div> </div> </div> </div> <div> <div> 30 mins </div> </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> Você tem 5 membros pendentes que requer uma revisão rápida. </div> </div> </div> </div> </div> <div> <div> 24 minutos </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </Div> </Div> <r ups> </div> </div> </span> vencedores </span> </div> </div> </div> </div> </div> </div> <div> <div> 2 horas </div> </li> <li> <a href = "javascript:;"> </div. </div> </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> </ul> <h3> Sistema </h3> <ul> <li> <li> </div> <div> <div> <div> <div> <div> <ul> <li> </. <mpan> Tome medidas <i> </i> </span> </div> </div> </div> <div> Você tem 4 tarefas pendentes. <mpan> Tome ação <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> agora </div> </li> <li> <a href = "javascript:;;"> <div> <div> <div> <div> <div> <bincript:;; "> <div> <div> <div> <div> <div> </i> </i> </i> </i> </i> </i> </i> </i> </i> </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> <div> <div> </div> </div> </div> </div> <div> <div> 24 minutos </div> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </spanle </div> <div> <div> 30 mins </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> Você tem 5 membros pendentes que exigem uma revisão rápida. </div> </div> </div> </div> <div> <div> 24 minutos </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> <div> <i> </i> </div> </div> </nistGert Harderwer Hardware Webradersing </ <mpan> vencido </span> </div> </div> </div> </div> </div> </div> <div> 2 horas </div> </li> <li> <a href = "javascript :;"> <div> <div> <div> <div> <i> </iene </div> </div> <Div> </div> </div> </div> </div> </div> <div> <div> 20 minutos </div> </a> </li> </ul> </div> </div> </div> </div> <div> </div> 20 mins </s> </a> </ul> </bled> </div> </idan> <rings> <bs> 20 minutos </"</a> <H3> Configurações gerais </h3> <ul> <li> Ativar notificações <input type = "Caixa de seleção" verificada Data-size = "small" data-on-color = "success" Data-on-text = "em" Data-off-colaping "Infault" Data-off-text = "Off"> </li> <li> rastrear <input "" Data " data-on-text = "on" data-off-color = "padrão" data-off-text = "off"> </li> <li> Erros de log <input type = "caixa de seleção" verificados dados-size = "small" data-on-color = "perigo" data-on-text = "em" data-off = "default" summboxt-text = "off"> data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> <li> Enable SMS Alerts <input type="checkbox" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> </ul> <h3> Configurações do sistema </h3> <ul> <li> Nível de segurança <leclect> <opção value = "1"> normal </pption> <option value = "2" selecionado> médio </pption> <opção value = "e" e "hight </ppthment> </select> </li> <li>), falhou em email <bpp"> "5"/> "/> </ppthment> </leclect> </li> <li>). /> </li> <li> Notifique no erro do sistema <input type = "caixa de seleção" verificou data-size = "small" data-on-color = "perigo" data-on-text = "em" data-off-color = "padrão" data-off-text = "off"> </li> <li> notify on smtp smorling <input type = "check" checked "> </li> data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> </ul> <div> <button><i></i> Save Changes</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- END QUICK SIDEBAR --> </div> <!-- END CONTAINER --> <!-BEGN ROWER-> <div> <div> 2014 © METRONIC BY 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; usando o sistema; 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. Resumo
前端这种东西最考验人的耐心，不信你自己拼接一下
Efeito final
Autor: YMNets
Fonte: http://ymnets.cnblogs.com/
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.