Continuez avec l'article précédent, partagez les notes compilées à partir de la barre de menu Bootstrap Metronic avec vous pour votre référence. Le contenu spécifique est le suivant
1. Introduction
1) Configuration de l'environnement
2). Extrait la page
3). Générer dynamiquement menu (arbre de niveau illimité)
2. Configuration de l'environnement système
Le projet nécessite la prise en charge des données du programme, ici MVC5.0 + EF6.0 [SQLServer] est sélectionnée (aucune interprétation de l'architecture MVC et SQLServer)
Environnement de course: VS2013 + MVC5.0 + EF6.1 + SQLSERver2012
Nom de la solution: Appsolution Nom du projet: app.web (couche d'interface utilisateur) et app.models (couche d'accès aux données) - Mode d'accès direct
Extraire tous les fichiers sous le thème du contenu MVC, extraire l'index.html de l'administrateur à _layout.cshtml pour se préparer à la transformation
3. Créez des bases de données et des tables
Base de données: appdatabase
Créez le tableau de données suivant et créez une appdb.edmx
Utilisez [AppDatabase] Go / ****** Objet: Table [DBO]. [Sysmodule] Date de script: 2015/9/15 21:03:39 ******* / Set ANSI_NULLS ONGOSET CITÉD_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE TABLE [DBO]. Id [name] [varchar] (50) pas null, --menu nom [parentid] [varchar] (50) null, --super id [url] [varchar] (200) null, --url [iconic] [varchar] (200) null, --iconc [sort] [int] null, --sort [enable] [bit] non nul [Islast] [bit] pas null - est la dernière contrainte d'article [pk_sysmodule] clés principale en cluster ([id] asc) avec (pad_index = off, statistics_noreCompute = off, ignore_dup_key = off, allow_row_locks = on, allow_page_locks = on) on [primaire]) sur [primaire] goset ansi_padding offgoalter [dbo]. [sysmodule] avec nocheck ajouter une contrainte [fk_sysmodule_sysmodule] clé étrangère ([parentid]) références [dbo]. [sysmodule] ([id]) Tableau de but [dbo]. [sysmodule] nocheck contraint [fk_symodule_sysmodule] Go Go
Données artificielles
Insérer dans [sysmodule] ([id], [name], [parentid], [url], [emblématique], [tri], [activer], [CreateEtime], [Islast]) valeurs ('0', 'root', 'root', 'index', 'icon-settings', null, 0, null, 0) insert dans [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activer], [CreateTime], [Islast]) VALEURS ('1', 'Menu primaire 01', '0', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) Values ('11', 'Menu primaire 01-01', '1', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('111', 'Menu à trois niveaux01-01-01', '11', 'index', 'icon-lik', null, 0, null, 1) INSERT IN [SYSMODULE] ([Id], [nom], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('112', 'Menu de niveau 3 01-01-02', '11', 'index', 'icon-settings', null, 0, null, 1) INSERT IN [SYSMODULE] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) VALEURS ('12', 'Menu de niveau 2 01-02', '1', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('13', 'deuxième niveau 01-03', '1', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activer], [CreateTime], [Islast]) VALEURS ('2', 'Menu primaire 02', '0', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) Values ('21', 'Menu primaire 02-01', '2', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [enable], [CreateTime], [Islast]) VALEURS ('211', 'Level 3 menu02-01-01', '5', 'index', 'icon-link', null, 0, null, 1) insert dans [Sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('212', 'Menu de niveau 3 02-01-02', '5', 'index', 'icon-link', null, 0, null, 1) INSERT IN [Sysmodule] ([Id], [nom], [parentid], [url], [emblématique], [tri], [activer], [CreateTime], [Islast]) VALEURS ('22', 'Menu de niveau 2 02-02', '2', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) VALEURS ('23', 'second niveau menu02-03', '2', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('3', 'Menu primaire 03', '0', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) Values ('31', 'Menu primaire 03-01', '3', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('311', 'Niveau 3 menu03-01-01', '31', 'index', 'icon-link', null, 0, null, 1) INSERT IN [Sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [enable], [CreateTime], [Islast]) VALEURS ('312', 'Menu de niveau 3 03-01-02', '31', 'index', 'icon-link', null, 0, null, 1) INSERT IN [Sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) VALEURS ('32', 'Menu de niveau 2 03-02', '3', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activer], [CreateTime], [Islast]) VALEURS ('33', 'second niveau menu03-03', '3', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('4', 'Menu primaire 04', '0', 'index', 'icon-settings', null, 0, null, 0) insert in [sysmodule] ([Id], [name], [parentid], [url], [iconic], [tri], [activer], [CreateTime], [Islast]) VALEURS ('41', 'Menu primaire 04-01', '4', 'index', 'icon-link', null, 0, null, 1) insert in [sysmodule] ([Id], [name], [parentid], [url], [emblématique], [tri], [activé], [CreateTime], [Islast]) VALEURS ('42', 'second niveau menu04-02', '4', 'index', 'icon-link', null, 0, null, 1) (22 lignes affectées)4. Extraire les mises en page importantes
Nous sommes le système backend, nous gardons donc le sommet. menu de gauche et pied 3 pièces
Je l'ai extrait, veuillez le copier
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8" /> <itle> métronic | Affichage de la mise en page </ title> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta contenu = "width = device-width, initial-scale = 1" name = "Viewport" /> <meta contenu = "" name = "description" /> <méta teneur href = "~ / contenu / actifs / global / plugins / font-awesome / css / font-awesome.min.css" rel = "Stylesheet" type = "text / css" /> <link href = "~ / contenu / actifs / globins / plugins / simple-line-icons / texs" <link href = "~ / contenu / actifs / global / plugins / bootstrap / css / bootstrap.min.css" rel = "stylesheet" type = "text / css" /> <link href = "~ / contenu / actifs / global / plugins / uniforme / css / uniform.default.css" rel = "StyleSheet" Type = "/ C.Default" href = "~ / contenu / atouts / global / plugins / bootstrap-switch / css / bootstrap-switch.min.css" rel = "stylesheet" type = "text / css" /> <! - end les styles obligatoires globaux -> <! - commencent les styles de plugin de niveau de page -> <lien HREF = "~ / Content / Assets / Global / Plugins / Bootstrap-DaterangePicker / DaterangePicker-BS3.css" rel = "Stylesheet" type = "Text / CSS" /> <link href = "~ / Content / Assets / Global / Plugins / FullCalendar / FullCalendar.min.CSSS" REL = "StyleSheet" Type = "Text / CSSS href = "~ / contenu / actifs / global / plugins / jqvmap / jqvmap.css" rel = "Stylesheet" type = "text / css" /> <! - Fin de niveau de page Styles -> <! - Début des styles de page -> <lien href = "~ / contenu / atouts / pages / css / tasks.csS" type = "text / css" /> <! - Styles de page finale -> <! - Démarrer les styles de thème -> <link href = "~ / contenu / actifs / global / css / composants.css" id = "style_components" rel = "Stylesheet" type = "text / css" /> <link href = "~ / contenu / actifs / global / css / plugins" " rel = "Stylesheet" type = "text / css" /> <link href = "~ / contenu / actifs / admin / disposition / css / loction.css" rel = "Stylesheet" type = "text / css" /> <link href = "~ / contenu / actifs / admin / loset / css / themes / darkblue.css" rel = "sheylesheet" type = "text / css" id = "style_color" /> <link href = "~ / contenu / actifs / admin / loyout / css / cousty.css" rel = "Stylesheet" type = "text / css" /> <! - end les styles de thème -> <link rel = "shortcut icon" href = "favcon.ico" <div> <! - Begin Header Inner -> <div> <! - Begin Logo -> <div> <a href = "index.html"> <img src = "~ / contenu / actifs / admin / Layout / img / logo.png" /> </a> <v> </ div> </ div> <! - END LOGO -> <! - Début du menu Reactive Toggler - <A href = "javascript:;" data-toggle = "effondrement" data-target = ". Navbar-Collapse"> </a> <! - End Reactive Menu Toggler -> <! - Begin top Navigation Menu -> <div> <ul> <! - commence la notification Dropdown -> <! - DOC: appliquer "Dropdown-Dark" Class After ci-dessous "Dropdown-axtend" pour changer le style de dropdown -> <li href = "javascript:;" Data-Toggle = "Dropdown" Data-Hover = "Dropdown" Data-Close-ThereS = "True"> <i> </i> <span> 7 </span> </a> <ul> <li> <h3> <pan> 12 en attente </span> notifications </h3> <a href = "extra_profile.html"> All </a> 250px; " Data-Handle-Color = "# 637283"> <li> <a href = "JavaScript :;"> <span> Juste maintenant </span> <span> <span> <i> </i> </span> nouvel utilisateur enregistré. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 min </span> <span> <span> <i> </i> </span> serveur # 12 surchargé. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 min </span> <span> <span> <i> </i> </span> serveur # 12 surchargé. </span> </a> </li> <li> <a href = "javascript :;"> <span> 10 minutes </span> <span> <span> <i> </i> </span> Server # 2 ne répond pas. </span> </a> </li> <li> <a href = "javascript :;"> <span> 14 heures </span> <span> <span> <i> </i> </span> Erreur d'application. </span> </a> </li> <li> <a href = "javascript :;"> <span> 2 jours </span> <span> <span> <i> </i> </span> base de données surchargée 68%. </span> </a> </li> <li> <a href = "javascript :;"> <span> 3 jours </span> <span> <span> <i> </i> </span> Un utilisateur IP bloqué. </span> </a> </li> <li> <a href = "javascript :;"> <span> 4 jours </span> <span> <span> <i> </i> </span> Server de stockage # 4 ne répondant pas à dfdfdfd. </span> </a> </li> <li> <a href = "javascript :;"> <span> 5 jours </span> <span> <i> </i> </span> Erreur système. </span> </a> </li> </li> <li> <a href = "javascript :;"> <span> 9 jours </span> <span> <span> <i> </i> </span> Le serveur de stockage a échoué. </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <! - End Notification Dropdown -> <! - Begin de la boîte de réception -> <! - DOC: appliquer "Dropdown-Dark" Class After ci-dessous "Dropdown-Extended" pour changer le Style Dropdown Style -> <Le href = "javascript:;" Data-Toggle = "Dropdown" Data-Hover = "Dropdown" Data-Close-ThereS = "True"> <i> </i> <span> 4 </span> </a> <ul> <li> <h3> Vous avez <span> 7 nouveaux </span> Messages </h3> <a href = "page_inbox.html"> All </a> Data-Handle-Color = "# 637283"> <li> <a href = "Inbox.html? A = View"> <span> <img src = "~ / Content / Assets / Admin / Layout3 / Img / Avatar2.Jpg"> </ Span> <pan> <pander> lisa </pan> <pander> Vivamus sed actor nibh congue nibh.auctor nibh actor nibh ... </span> </a> </li> <li> <a href = "inbox.html? A = voir"> <span> <img src = "~ / contenu / actifs / admin / spank> Richard Doe. </span> <pan> 16 min </span> </span> <span> vivamus sed Congue Nibh Autor Nibh Congue Nibh. AUTOR NIBH AUTOR NIBH ... </ SPAND> </a> </li> <li> <a href = "Inbox.html? A = View"> <span> <img src = "~ / Content / Assets / Admin / Layout3 / Img / Avatar1.jpg"> </span> <pander> Bob Nilson </pannet> <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"> </span> <spanne> <pander> lisa wong </pange <span> vivamus sed auto 40% nibh congue nibh ... </span> </li> <li> <a href = "inbox.html? a = vue"> <span> <img src = "~ / contenu / actifs / admin / Layout3 / img / avatar3.jpg"> </pande> <pande> <pank> Richard doe </ spander> </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 Inbox Dropdown -> <! - commencez Todo Dropdown -> <! - DOC: Appliquer "Dropdown-Dark" Class After ci-dessous "Dropdown-Extended" pour changer le style dropdown -> <Lid = "WEDER_BAR_Bar" href = "javascript:;" Data-Toggle = "Dropdown" Data-Hover = "Dropdown" Data-Close-ThereS = "True"> <i> </i> <span> 3 </span> </a> <ul> <li> <h3> Vous avez <span> 12 en attente </span> Tasks </h3> <a href = "Page_Todo.html"> Voir tous </a> 275px; " Data-Handle-Color = "# 637283"> <li> <a href = "javascript :;"> <span> <span> Nouvelle version v1.2 </span> <span> 30% </span> </span> <span> <span> <span> Déplacement de l'application </span> <pan> 65% </span> </span> <spanes> Aria-Valuemin = "0" Aria-ValuMax = "100"> <span> 65% Complete </span> </span> </span> </a> </li> <li> <a href = "javascript :;"> <span> <span> Release de l'application mobile </pander> <pander> </pan> </pan> <pander> <span> <span> <span> <span> 98% </span> </span> <span> <span> <span> <span> Migration de base de données </span> <span> 10% </span> </span> <span> <spann aria-valueNow = "10" aria-valuemin = "0" aria-valemax = "100"> <pander> 10% complet </panne> </panne> </a> </li> <li> <a href = "javascript :;"> <span> <span> mise à niveau du serveur Web </span> <span> 58% </span> </span> <span> <span> <span> Upgrade du serveur Web </span> <span> 58% </span> </span> <pander> <span Aria-Valuenow = "58" Aria-Value = "Span-" Aria-ValuMax = "100"> <span> 58% complet </span> </span> </span> </a> </li> <li> <a href = "JavaScript :;"> <span> <span> <span> Développement mobile </span> <pan> 85% </span> </span> <pank = "Span-Valuenow =" 85 "Aria-valueM =" Span-Valuenow = "85" Aria-ValueM = "0" 0 "0" 0 "0" Span-Valuenow = "85" Aria-ValueM = "Span-Valuenow =" 85 "Aria-ValueM =" Span-Valuenow = "85" Aria-ValueM = "Span-" 0 " Aria-ValuMax = "100"> <span> 85% complet </span> </span> </span> </li> <li> <a href = "javascript :;"> <span> <span> nouvelle version d'interface utilisateur </span> <span> 38% </span> </span> <span> <span> aria-valuemin = "0" 0 " Aria-ValuMax = "100"> <span> 38% Complete </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> <! - End ToDo Dropdown -> <! - Début de la loginon " La liste déroulante -> <li> <a href = "javascript:;" Data-Toggle = "Dropdown" Data-Hover = "Dropdown" Data-Close-Others = "True"> <img Src = "~ / Content / Assets / Admin / Layout / Img / Avatar3_Small.jpg" /> <Span> Nick </ Span> <i> </i> </a> <ul> <li> <a href = "Extra_Profile.html" Profil </a> </li> <li> <a href = "page_calendar.html"> <i> </i> mon calendrier </a> </li> <li> <a href = "page_calendar.html"> <i> </i> mon calendar </a> </li> <li> <a href = "dans le calendar </a> </li> <li> <a href =" dans Box. <i> </i> ma boîte de réception <span> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i> Mes tâches <span> 7 </span> </a> </li> <li> </li> <li> <a href = "ExtraLock.html"> <i> </li> <li> <a href = "login.html"> <i> </i> se déconnecter </a> </ul> </li> </li> <! - Fin de la connexion de l'utilisateur -> <! - Démarrer la basse de la barre latérale rapide -> <! - DOC: Doc: Appliquer "Dropdown-Dark" après ci-dessous "Dropdown-Extended" pour changer la dropdown Styte -> <li> href = "javascript :;"> <i> </i> </a> </li> <! - Toggler la barre latérale finale de fin -> </ul> </ div> <! - End Top Navigation Menu -> </ div> <! - End Heard Inner -> </ Div> <! - End Header -> <div> </v> <! - Begin Container -> <! DOC: Définissez Data-Auto-Scroll = "FALSE" pour désactiver la barre latérale à partir de défilement / focalisation automatique -> <! - DOC: Changer Data-Auto-Speed = "200" pour ajuster le sous-menu Slide Up / Down Speed -> <div> <! Borders) -> <! - DOC: Appliquez "la classe de page-sidebar-menu-hover-submenu" juste après "Mode de menu" Page-Sidebar-Menu "pour permettre à Hoverable (Hover vs selon) le mode sous-menu -> <! - DOC: Appliquer le" Page-Sidebar-Menu-Closed "Class Class après" Page-Sidebar Meu "pour les collapsages (" Page-SIDEBAR CLOSED "CLASS CLASS APPLIED" Mode du sous-menu de barre latérale -> <! - DOC: Définissez les données-auto-scroll = "false" pour désactiver la barre latérale à partir de défilement automatique / focalisation -> <! - DOC: Définissez Data -kee-Expand = "true" pour maintenir les sous-mines étendus -> <! - DOC: Set Data-Auto-Speed = "200" pour ajuster la diaporama du menu Up / Down Speed ->> <ul Data-Warded = "FAUX" Data-Auto-Scroll = "True" Data-Slide-Speed = "200"> <! - DOC: Pour supprimer le basculement de la barre latérale de la barre latérale, vous avez juste besoin de supprimer complètement le bouton Toggler latéral de la barre latérale barre latérale, vous avez juste besoin de supprimer complètement l'élément "LI-SECCH-WECH-WAPPER" ci-dessous -> <li> <a href = "JavaScript :;"> <i> </i> <pan> Menu Multivel </span> <span> </span> </a> <ul> <li> <a href = "Javascript :;> <i> </i> élément 1 <spanneux> </pandé> <li> <a href = "JavaScript :;"> <i> </i> Exemple de lien 1 <span> </span> </a> <ul> <li> <a href = "#"> <i> </i> Exemple de lien 1 </a> </li> <li> <a href = "#"> <i> </i> Échantillon de lien 1 </a> href = "#"> <i> </i> Exemple de lien 1 </a> </li> <li> <a href = "#"> <i> </i> Exemple de lien 1 </a> </li> <li> <a href = "#"> <i> </i> 1 </a> </li> <li> <a href = "#"> <i> </i> Exemple de lien 2 </a> </li> <li> <a href = "#"> <i> </i> Exemple de lien 3 </a> </li> </li> </li> <li> <a href = "#"> <i> </ i> <li> <a href = "#"> <i> </i> Exemple de lien 1 </a> </li> </li> <li> <a href = "#"> <i> </i> Exemple de lien 1 </a> </li> <li> <a href = "#"> <i> </i> Lien d'échantillon 1 </a> </li> <li> Lien 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> élément 3 </a> </li> </li> </li> </li> </li> </li> <! - End Sidebar menu -> </liv> <! - Fin de configuration -> <! - Début contenu -> <! Form modal -> <div id = "portlet-config" tabindex = "- 1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <v> <v> <v> <button type = "Button" Data-Dismiss = "modal" aria-hidden = "true"> </utton> <h4> Title modal </ h4> Le formulaire de paramètres du widget va ici </ div> <div> <bouton type = "Button"> Enregistrer les modifications </ bouton> <Button Type = "Button" Data-Dismiss = "Modal"> Close </ Button> </ Div> </div> <! - /.Modal-Content -> </div> <! - <!-- BEGIN STYLE CUSTOMIZER --> <div> <div> </div> <div> </div> <div> <div> <span> THEME COLOR </span> <ul> <li data-style="default" data-container="body" data-original-title="Default"> </li> <li data-style="darkblue" data-container="body" data-original-title="Dark Blue"> </li> <li data-style = "blue" data-contrainer = "body" data-original-title = "blue"> </li> <li data-style = "gris" data-contrainer = "body" data-title = "gris"> </ li> Data-Style = "Light2" Data-Container = "Body" Data-html = "True" Data-Original-Title = "Light 2"> </li> </ul> </ div> <div> <span> Style de thème </span> <lect> <Option Value = "Square" Selected = "Selected"> Square Corners </ Option> <Option Value = "Ronded"> Corders Arrond Corners </ Option> <span> Layout </ span> <lectring> <option value = "fluid" selected = "selected"> fluid </ option> <option value = "boxed"> boxed </ option> </ select> </ div> <v> <span> en-tête </span> <lelect> <option value = "fixe" selected = "sélectionné"> Correction </ option> <option Value = "Default"> </ option> </poption> </poption> </poption> </pople> </ Div> <option Value = "Default"> </ Option> Dropdown </span> <lelect> <option Value = "Light" Selected = "Seltimed"> Light </ Option> <Option Value = "Dark"> Dark </ Option> </ Select> </ Div> <div> <span> Modebar Sidebar </span> <lelect> <Option Value = "Fixed" Correction </ SELECT> <OPTION VALUE = "Defaun" Sellected = "Sélected"> Default> </ Select> </ SELECT> </ SELECT> </ SELECT> </ SELECT> </ SELECT> <lelect> <Option Value = "Accordeon" Selected = "Selected"> Accordion </ Option> <Option Value = "Hover"> Hover </ Option> </ Select> </ Div> <v> <span> Style de la barre latérale </span> <lelect> <Option Value = "Default" Selected = "Selected"> Default </ Option> <option> <option Value = "Default" Selected = "Selected"> Default </ Option> sélectionné = "Sélectionné"> Default </ Option> <Option> <Option Value = "Light"> Light </ Option> </lect> </div> <div> <span> Position latéral </span> <lect> <Option Value = "Left" Selected = "Selected"> Left </ Div> <pander> FooTere </ Span> </ Sélect> Value = "Correct"> Correction </ Option> <Option Value = "Default" Selected = "Selected"> Default </ Option> </lect> </div> </div> <! - End Style CustomerS href = "#"> Layout </a> </li> </ul> </div> <h3> Layout <small> Rapports et statistiques </small> </h3> <! - End Page Header -> <! - Begin LayOne Stats -> @RenderBody () <! href = "javascript :;"> <i> </i> </a> <v> <div> <ul> <li> <a href = "# Quick_sidebar_tab_1" data-toggle = "tab"> Les utilisateurs <span> 2 </span> </a> </li> <li> <a href = "# Quick_sidebar_Tab_2" Data-Toggle = "> alerts" # Quick_sidebar_TAB_2 "Data-Toggle =" ALERST <span> 7 </span> </a> </li> <li> <a href = "javascript:;" data-toggle = "dropdown"> plus <i> </i> </a> <ul role = "menu"> <li> <a href = "# Quick_sidebar_Tab_3" data-toggle = "tab"> <i> </i> alertes </a> </li> <li> <a href = "# Quick_sidebar_Tab_3" "Data-Toggle ="> <i> <i> Notifications </a> </li> <li> <a href = "# Quick_sidebar_TAB_3" Data-Toggle = "Tab"> <i> </i> Activités </a> </li> <li> <a href = "# Quick_sidebar_Tab_3" Data-Toggle = "Tab" href = "# Quick_sidebar_TAB_3" Data-Toggle = "Tab"> <i> </i> Paramètres </a> </li> </ul> </li> </ul> </li> </ul> <div> <div id = "Quick_sidebar_TAB_1"> <div data-rail = "# ddd" Data-Wrapper-Class = "Page-QUICK-SIDEBAR-List"> <h3> Personnel </H3> <ul> <li> <div> <span> 8 </span> </ div> <img Src = "~ / Content / Assets / Admin / Layout / Img / Avatar3.jpg"> <v> <h4> Bob Nilson </h4> <li> <img src = "~ / contenu / actifs / admin / disposition / img / avatar1.jpg"> <div> <h4> nick Larson </h4> <v> Directeur artistique </ div> </li> <li> <div> <span> 3 </span> </div> <img Src = "~ / Content / Assets / Admin / Layout / Img / Avatar4 <h4> Deon Hubert </h4> <div> cto </div> </li> <li> <img src = "~ / contenu / actifs / admin / disposition / img / avatar2.jpg"> <v> <h4> ella wong </h4> <v> ceo </v> </li> </ul> <h3> <span> 2 </span> </ div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar6.jpg"> <div> <h4> Lara Kunis </h4> <v> CEO, Loop Inc </div> <div> <div> Dernier 03:10 AM </v> </v> </li> </li> </li> </li> <img src = "~ / contenu / actifs / admin / disposition / img / avatar7.jpg"> <div> <h4> Ernie Kyllonen </h4> <div> Project Manager, <br> SmartBizz PTL </div> </div> </li> <li> <img Src = "~ / Content / Assets / Admin / Layout / IMG / AVATAR8.>" <div> <h4> lisa pierre </h4> <div> cto, keort inc </div> <div> pour la dernière fois 13:10 PM </div> </div> </li> <li> <div> <span> 7 </span> </vatar9 <div> cfo, h & d ltd </ div> </li> </li> <li> <img src = "~ / contenu / actifs / admin / disposition / img / avatar10.jpg"> <div> <h4> irina savikova </h4> <v> ceo, Tizda Motors Inc </div> </li> <li> <li> <li> <li> <li> <li> <li> <li> <img src = "~ / contenu / actifs / admin / Layout / img / avatar11.jpg"> <div> <h4> Maria Gomez </h4> <v> Manager, Infomatic Inc </v> <v> a vu la dernière fois 03:10 AM </div> </ div> </li> </div> <v> <div> <v> <A href = "javascript :;"> <i> </i> back </a> </ div> <div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar3.jpg" /> <v> <span> </ span> <a href = "javascript :;"> bob nilson </a> Envoyez-moi le rapport? </span> </ div> </ div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar2.jpg" /> <v> <span> </span> <a href = "javascript :;"> ella wong </a> <pan> 20:15 </span> <pan> c'est presque fait. Je l'enverrai sous peu </span> </ div> </div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar3.jpg" /> <v> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:15 </pande> <span> Merci! « Désolé pour le retard. </span> </ div> </ div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar3.jpg" /> <v> <span> </span> <a href = "javascript :;"> Bob Nilson </a> <pan> 20:17 </span> <pan> Non Probs. Prenez simplement votre temps :) </span> </ div> </ div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar2.jpg" /> <div> <span> </span> <a href = "javascript :;"> ella wong </a> <pan> 20:40 </pan> <pank> Je viens de vous envoyer un e-mail. </span> </ div> </ div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar3.jpg" /> <v> <span> </span> <a href = "javascript :;"> bob nilson </a> <pan> 20:17 </span> <pan> grand! Merci. Va le vérifier tout de suite. </span> </ div> </ div> <div> <img src = "~ / contenu / atouts / admin / Layout / img / avatar2.jpg" /> <div> <span> </span> <a href = "javascript :;"> ella wong </a> <pan> 20:40 </span> <pan> s'il vous plaît laissez-moi savoir si vous avez un commentaire. </span> </ div> </ div> <div> <img src = "~ / contenu / actifs / admin / Layout / img / avatar3.jpg" /> <v> <span> </span> <a href = "javascript :;"> Bob Nilson </a> <pan> 20:17 </span> <pan> sûr. Je vais vous vérifier et bourdonner si quelque chose doit être corrigé. </spanes id = "Quick_sidebar_tab_2"> <div> <h3> Général </h3> <ul> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> Vous avez 4 tâches en attente. <span> Action <i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> Just </div> </li> <li> <a href = "JavaScript :;"> <v> <div> <div> <v> <iv> <i> </i> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </iv> </ Div> <iv> Finance Report pour une année. </div> </ div> </div> </div> </div> </div> <div> <div> 20 min </div> </a> </li> <li> <div> <div> <div> <div> <i> </i> </div> </div> <v> <div> Vous avez 5 abonnements suspendus qui nécessitent une revue rapide. </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> Vous avez 5 adhésions en attente qui nécessitent une revue rapide. </div> </div> </div> </div> </div> <div> <div> 24 min </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> <i> </i> </div> </div> <v> Le hardware Web du serveur Web a besoin d'être élevé. <span> en souffrance </span> </ div> </div> </div> </div> </div> </div> <div> <div> 2 heures </v> </li> <li> <a href = "javascript :;"> <v> <v> <div> <div> <v> <i> </i> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> <adiv> <div> <i> </i> </div> </v> </v> </v> </v> </v> </v> <adiv> <div> <i "a été publié. </div> </div> </div> </div> </div> </div> <div> <div> 20 min </div> </a> </li> </ul> <h3> System </h3> <ul> <li> <div> <v> <div> <div> <v> <div> <i> </i> </div> </div> <v> <span> Agissez <i> </i> </span> </div> </div> </div> <div> Vous avez 4 tâches en attente. <span> Action <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> Tout à l'heure </div> </li> <li> <a href = "javascript :;"> <v> <div> <div> <av> <div> <iv> <i> </i> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </v> </div> </iv> </iv> </iv> </iv " </div> </ div> </ div> </ div> </div> </div> <div> <div> 20 min </div> </a> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> Vous avez 5 abonnements pondérés qui nécessitent une revue rapide. </div> </ div> </ div> </ div> <div> <div> 24 min </div> </li> <li> <div> <div> <div> <v> <div> Nouveau ordre reçu avec <pan> numéro de référence: DR23923 </pan> </v> </div> <div> <div> 30 min </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> Vous avez 5 membres en attente qui nécessitent un examen rapide. </div> </ div> </div> </div> <div> <div> 24 min </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> Le matériel du serveur Web a besoin d'être amélioré. <span> surexerne </span> </div> </div> </div> </div> </div> </div> <div> 2 heures </div> </li> <li> <a href = "javascript :;"> <div> <div> <div> <div> ipo report pour l'année 2013 a été libéré. </div> </ div> </ div> </ div> </div> <div> <div> 20 min </div> </a> </li> </ul> </div> </div> </v> </v> <v> <div> 20 min </v> </a> </ul> </v> </div> </v> <div Id = "Quick_sidebar_tab_3" <h3> Paramètres généraux </h3> <ul> <li> Activer les notifications <entrée type = "checkbox" cochées data-size = "small" data-on-color = "Success" data-on-text = "on" data-off-color = "Default" data-off-text = "off"> </li> <li> Autoriser la suivi <entrée = "Checkbox" Data-Size = "small" "Data-on-Color =" info "Type = on" sur "Data-Size =" small "" Data-on-Color = "info" Text = on "sur" Data-Size = "small" "Data-on-Color =" info "Text = on" sur "Data-Size =" Small "" Data-On-Color = "info" Text = ONT-on "sur" Data-Size = "Small" Data-Off-Color = "Default" Data-Off-Text = "OFF"> </li> <li> Erreurs de journal <entrée type = "Checkbox" Vérifié Data-Size = "Small" Data-on-Color = "Danger" Data-on-Text = "sur" Data-Off-Color = "Default" Data-Off-Text = "OFF"> </li> <li> Dato Sumbit Issues <Entrée = "Checkbox" data-on-text = "on" data-off-color = "default" data-off-text = "off"> </li> <li> Activer les alertes sms <entrée type = "checkbox" coché data-size = "small" data-on-color = "Success" data-on-tex Niveau de sécurité <lelect> <Option Value = "1"> Normal </ Option> <Option Value = "2" Selected> Medium </ Option> <Option Value = "E"> High </ Option> </li> </li> <li> Tentures de messagerie défaillantes <Valeur d'entrée = "5" /> </li> <li> Port SMTS secondaire <Entrée Value = "3560" /> Data-Size = "Small" Data-on-Color = "Danger" Data-on-Text = "sur" Data-Off-Color = "Default" Data-Off-Text = "OFF"> </li> <li> Notifier sur SMTP Error <Input Type = "Checkbox" Checked Data-Size = "Small" Data-on-Color = "Warning" Data-on-Text = "sur" Data-Off-Color = "DAUTM" <div> <fontificatrice> <i> </i> Enregistrer les modifications </ bouton> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <! - End Quick Sidebar -> </div> <! - End Container -> <! - Begin Footer -> <div> <div> 2014 © Metronic by Keenthems. </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; Utilisation du système; Utilisation de System.Collections. GENENERIER; 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. Résumé
前端这种东西最考验人的耐心，不信你自己拼接一下
最后效果
Auteur: ymnets
Source: http://ymnets.cnblogs.com/
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.