Bootstrap Metronik

Autor：Eve Cole Aktualisierungszeit：2025-07-07 00:32:01

Fahren Sie mit dem vorherigen Artikel die Notizen weiter, die aus der Bootstrap -Menüleiste zusammengestellt wurden, mit Ihnen als Referenz. Der spezifische Inhalt ist wie folgt

1. Einführung

1). Umweltkonfiguration

2). Extrahieren Sie die Seite

3). Generieren Sie dynamisch Menü (unbegrenzter Ebene)

2. Konfiguration der Systemumgebung

Das Projekt erfordert Programmdatenunterstützung, hier wird MVC5.0+EF6.0 [SQLSERVER] ausgewählt (keine Interpretation der MVC -Architektur und SQLServer)

Laufende Umgebung: VS2013+MVC5.0+EF6.1+SQLSERVER2012

Lösungsname: AppSolution -Projektname: App.Web (UI -Ebene) und App.models (Datenzugriffsschicht) - Direktzugriffsmodus

Extrahieren Sie alle Dateien unter dem Thema in den MVC

3. Erstellen Sie Datenbanken und Tabellen

Datenbank: AppDatabase

Erstellen Sie die folgende Datentabelle und erstellen Sie appdb.edmx

 Verwenden Sie [AppDatabase] Go/****** Objekt: Tabelle [DBO]. [Sysmodule] Skriptdatum: 2015/9/15 21:03:39 *******/set ansi_nulls ongoset zitiert_identifier OngoSet ANSI_Padding Ongocreat -Tisch [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] NOT NULL --Is the last item CONSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED ( [Id] ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]) ON [PRIMARY]GOSET ANSI_PADDING OFFGOALTER TABLE [DBO]. [Sysmodule] Mit NoCheck addieren Sie Einschränkungen [fk_sysmodule_sysmodule] Fremdschlüssel ([ParentID]) Referenzen [DBO]. [Sysmodule] ([ID]) Tortertabelle [DBO].

Künstliche Daten

 Einfügen in [sysmodule] ([id], [name], [parentId], [url], [iconic], [sort], [enable], [createTime], [islast]) Werte ('0', 'root', 'root', 'index', 'icon-setings', null, 0, null, 0) In [Sysmodule] einfügen [sysmodule] in [sysmodule] einfügen [sysmodule] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('1', 'Primärmenü 01', '0', 'Index', 'Icon-Settings', Null, 0, Null, 0) Einfügen in [sysmoduls] einfügen [sysmoduls] einfügen [sysmoduls] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('11', 'Primär-Menü 01-01', '1', 'Index', 'Icon-Setings', Null, 0, Null, 0) Einfügen in [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul.] ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('111', 'Drei-Level-Menü01-01-01', '11', 'Index', 'Icon-Link', Null, 0, Null, 1) In [Sysmodule] einfügen, [Sysmodule] einfügen, [Sysmodule] einfügen, [Sysmodule] einfügen, [Sysmodule] einfügen, [Sysmodule] einfügen, [Sysmodule] in Einfügung [Sysmodule] einfügen] ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createtime], [isLast]) Werte ('112', 'Level 3-Menü 01-01-02', '11', 'Index', 'Icon-Setings', Null, 0, Null, 1) In [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [SySmodule] einfügen, [Sysemodule], wird [Sysimatule] einfügen] ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('12', 'Level 2-Menü 01-02', '1', 'Index', 'icon-link', Null, 0, Null, 1) Einfügen in [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('13', 'zweite Stufe 01-03', '1', 'Index', 'icon-link', Null, 0, Null, 1) Einfügen in [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul.] ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('2', 'Primäres Menü 02', '0', 'Index', 'Icon-Settings', Null, 0, Null, 0) Einfügen in [sysmoduls] einfügen [sysmoduls] einfügen [sysmoduls] einfügen [sysmodul.] ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('21', 'Primäres Menü 02-01', '2', 'Index', 'Icon-Setings', Null, 0, Null, 0) In [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('211', 'Level 3 Menu02-01-01', '5', 'Index', 'Icon-Link', Null, Null, Null, 1) In [Sysmodule] einfügen [sysmodule] in [sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, wird [sysmodule] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('212', 'Level 3-Menü 02-01-02', '5', 'Index', 'Icon-Link', Null, Null, Null, 1) In [Sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen, in [sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen [sysmodule] in [sysmodule] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('22', 'Level 2-Menü 02-02', '2', 'Index', 'icon-link', Null, 0, Null, 1) Einfügen in [sysmodul], in [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul). ([ID], [Name], [ParentID], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('23', 'Secial02-03', '2', 'Index', 'icon-link', Null, 0, Null, 1) Ins Ins [sysmodul] einfügen [sysmodul], [sysmodul] einfügen [sysmodul] einfügen [sysmodul) ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('3', 'Primärmenü 03', '0', 'Index', 'Icon-Settings', Null, 0, Null, 0) Einfügen in [sysmoduls] einfügen [sysmoduls] einfügen [sysmoduls] einfügen. ([ID], [Name], [ParentID], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('31', 'Primäres Menü 03-01', '3', 'Index', 'Icon-Setings', Null, 0, Null, 0) In [sysmodul] einfügen [sysmodul] einfügen [sysmodul] in [sysmodul] einfügen [sysmodul) ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('311', 'Level 3-Menü03-01-01', '31', 'Index', 'Icon-Link', Null, Null, Null, 1) In [Sysmodule] einfügen [sysmodule] in [sysmodule] einfügen [sysmodule] einfügen [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, wird [sysmodule] einfügen. ([ID], [Name], [ParentID], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('312', 'Level 3-Menü 03-01-02', '31', 'Index', 'Icon-Link', Null, Null, Null, 1) In [Sysmodule] einfügen [sysmodule] in [sysmodule] einfügen [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] in [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] einfügen, [sysmodule] fügen ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('32', 'Level 2-Menü 03-02', '3', 'Index', 'icon-link', Null, Null, Null, 1) In [sysmodul] einfügen [sysmodul] in [sysmodul] einfügen [sysmodul] in [sysmodul] einfügen [sysmodul. ([ID], [Name], [ParentID], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('33', 'Second-Level-Menü03-03', '3', 'Index', 'Icon-Link', Null, 0, Null, 1) In [sysmodul] einfügen, [sysmodul] in [sysmodul] einfügen, [sysmodul] in [sysmodul] einfügen [sysmodul) ([Id], [name], [parentId], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('4', 'Primärmenü 04', '0', 'Index', 'Icon-Settings', Null, 0, Null, 0) Einfügen in [sysmoduls] einfügen [sysmoduls] einfügen [sysmoduls] einfügen [sysmoduls] einfügen. ([Id], [name], [parentId], [url], [ikonisch], [sort], [enable], [createTime], [isLast]) Werte ('41', 'Primäres Menü 04-01', '4', 'Index', 'icon-link', Null, 0, Null, 1) In einfügen in [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul] einfügen [sysmodul). ([ID], [Name], [ParentID], [url], [ikonisch], [sortieren], [enable], [createTime], [isLast]) Werte ('42', 'Second-Level-Menü04-02', '4', 'Index', 'Icon-Link', Null, 0, Null, 1) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen) (22 Zeilen betroffen), betroffen

4.. Wichtige Seitenlayouts extrahieren

Wir sind das Backend -System, also behalten wir die Spitze. linke Menü und Fuß 3 Teile

Ich habe es extrahiert, bitte kopieren Sie es

 <! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8" /> <title> metronic | Layout-Anzeige < /title> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> <meta content = "width = Gerätebidakte, initial-scale = 1" name = "AnsichtPort" /> <meta content = "name =" Beschreibung " /> <meta content =" name = "name" /> <Link " /> <Link" /> <Link " /> <Link" /> <Link " /> <Link" /> <Link " /> <Link" /> <Link " /> <Link" /> <Link " /> <Link" /< href = "~/content/assets/global/plugins/font-awesome/css/font-awesome.min <link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min href = "~/content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min href = "~/content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/global/plugins/fullCalendar/fullcalendar.min <link 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" Typ = "Text/CSS"/> <!-Endseitenstile-> <!-Starten Sie Themenstile-> <link href = "~/content/assets/global/css/components rel = "styleSheet" type = "text/css"/> <link href = "~/content/assaal/admin/layout/css/layout type = "text/css" id = "style_color"/> <link href = "~/content/assoets/admin/layout/css/benutzerdefinierte <div> <!-Header inneren-> <div> <!-Beginnen Sie Logo-> <div> <a href = "index.html"> <img src = "~/content/assets/admin/layout/img/logo.png"/> </a> </div> </div> </div> <! href = "JavaScript:;" data-toggle = "collapse" data-target = ". navbar-collapse"> </a> <!-End Responsive Menü Toggler-> <!-Starten Sie das Top Navigation-Menü-> <div> <ul> <! href = "JavaScript:;" Data-Toggle = "Dropdown" data-hover = "Dropdown" -Datenclose-Other = "true"> <i> </i> <span> 7 </span> </a> <ul> <li> <h3> <span> 12 Ausstehende Ausstehende </span> meldungsnotifikationen </h3> <a href = "extra_profile 250px; " Data-Handle-Color = "#637283"> <li> <a href = "javaScript:;"> <span> gerade jetzt </span> <span> <Pan> <i> </i> </span> Neuem Benutzer registriert. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 3 min </span> <span> <Pan> <i> </i> </span> Server #12 überladen. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 3 min </span> <span> <Pan> <i> </i> </span> Server #12 überladen. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 10 min </span> <span> <Pan> <i> </i> </span> Server #2 nicht antwortet. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 14 Stunden </span> <span> <i> </i> </span> Anwendungsfehler. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 2 Tage </span> <span> <Pan> <i> </i> </span> Datenbank -Datenbank 68%. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 3 Tage </span> <span> <i> </i> </span> Eine Benutzer -IP blockiert. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 4 Tage </span> <span> <Pan> <i> </i> </span> Speicher Server #4, der nicht auf dfdfdfd reagiert. </span> </a> </li> <li> <a href = "javaScript:;"> <span> 5 Tage </span> <span> <i> </i> </span> Systemfehler. </span> </a> </li> </li> <li> <a href = "javaScript:;"> <span> 9 Tage </span> <span> <in <i> </i> </span> Speicherserver fehlgeschlagen. B. href = "JavaScript:;" data-toggle = "Dropdown" data-hover = "Dropdown" data-close-mother = "true"> <i> </i> <span> 4 </span> </a> <ul> <li> <h3> Sie haben <span> 7 neue </span> Nachrichten </h3> <a href = "page_inbox.html" ada. Data-Griff-Color = "#637283"> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/content/assets/admin/layout3/img/avatar2.jpg" Auctoror Nibh Congue Nibh.AUCTOR NIBH AUCTOR NIBH ... </span> </a> </li> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/content/assets 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> <spannung> <spannung <Pan> 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> <span> <span> Lisa Wong </span> <span> <span> 40 mins </span> </span> <span> vivamus sed auto 40% nibh congue nibh ... </span> </li> <li> <a href = "inbox.html? </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-Posteingang Dropdown-> <! href = "JavaScript:;" data-toggle = "Dropdown" data-hover = "Dropdown" -Datenclose-Other = "true"> <i> </i> <span> 3 </span> </a> <ul> <li> <h3> Sie haben <span> 12 anhängig </span> tasks </h3> <a href = "page_todo.html" -Heighung "lagen". 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%vollständig </span> </span> </span> </a> </li> <li> <a href = "javascript :;"> <span> <spann> <span> <spannung> <spannung> 98%</span> </span> <span> <spannung> <spannung> Datenbankmigration </span> <span> 10%</span> </span> <span> <span arria-valuenow = "10" Aria-Valuemin = "0" Span> <Span> <- </a> </li> <li> <a href = "javaScript:;"> <span> Webserver-Upgrade </span> <span> 58%</span> </span> <span> <span> Webserver-Upgrade </span> <span> 58%</span> </span> <span> <span> <spannung aria-valuems aria-valuenWALLUS arka-valuemin aria-valuenw. aria-valuemax = "100"> <span> 58% vollständig </span> </span> </span> </a> </li> <li> <a href = "JavaScript:; aria-valuemax = "100"> <span> 85% vollständig </span> </span> </span> </li> <li> <a href = "javaScript:;"> <span> Neue UI-Veröffentlichung </span> <span> 38% </span> <spannes <span> <span> <span> <span> <span> <span> arias-valuemine aria-valuemax = "100"> <span> 38% vollständig </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> <!-Ende todo Dropdown-Klassenunterdrückung-DOCKDOWND. Der Dropdown Styte -> <li> <a href = "JavaScript:;" data-toggle = "Dropdown" data-hover = "Dropdown" -Datenclose-mother = "true"> <img src = "~/content/assets/admin/layout/img/avatar3_small.jpg"/> <spenflee> nick </span> <i> </i> </ul> <li> <i> <i> <a href = href = href = href = href = href = ; Mein Posteingang <span> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i> meine Aufgaben <spannes> 7 </span> </a> </li> <li> </li> <a> <a href = "<a.html" href = "login.html"> <i> </i> log out </a> </ul> </li> </li> <!-Endbenutzer-Anmeldung Dropdown-> <!-Schnell Sidebar Toggler-> <!-DOC anwenden: "Dropdown-Dark" -Klasse nach unten "Dropdown-Extansionen", um das Dropdown-Styte zu ändern. <i> </i> </a> </li> <!-End Quick Sidebar Toggler-> </ul> </div> <!-Ende Top Navigation Menü-> </div> <!-Endheader Innere-> </div> <!-Endheader-> </div> <!-Starten Sie Container-> <Div> <! Data-auto-scroll = "false", um die Seitenleiste von automatischem Scrollen/Fokussierung zu deaktivieren-> <!-DOC: Data-auto-Speed = "200", um das Sub-Menü anzupassen. -> <!-DOC: Anwenden Sie "Page-SsideBar-Menu-Hover-Submenu" -Klasse direkt nach der "Seite-SsieBar-Menu", um schwebbare (schwebe vs vs) sub-Menü-Modus zu aktivieren-> <!-DOC: Übertragen Sie "Page-Side-Side-Menu-Clased" -Klasse. -> <!-DOC: Setzen Sie Daten-auto-scroll = "false", um die Seitenleiste von automatischem Scrollen/Fokussierung zu deaktivieren-> <!-DOC: Data-Keep-Expand = "True", um die Untermänner erweitert zu halten-> <!-DOC: Data-auto-Speed = "200", um das Sub-Menü-Aufschwung zu passen,/Down-Geschwindigkeit-> <Ul Data-EXPANTED-EXPANDED-EXPANDED-EXPANDED-EXPANDEDEDEGE-EXPANDED-EXPANDED-EXPANDEDED. Data-auto-scroll = "True" Data-Slide-Speed = "200"> <!-DOC: Um die Seitenleiste aus der Seitenleiste zu entfernen, müssen Sie nur die folgende "Sidebar-Toggler-Wrapper" li-Element-> <li> <!-Beginnen Sie Sidebar Toggler-> </div> </div> </div> <! Die Seitenleiste, in der Sie nur die folgende "Sidebar-Search-Wrapper" li-Element-> <li> <a href = "JavaScript:;"> <i> </i> <span> Multi-Level-Menü </span> </span> </a> <li> <a href = span> </i> </iwn> </i> </ilfr. " <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> Beispiel -Link 1 </a> </li> <li> <a href = "#"> <i> </i> Beispiel -Link 1 </a> </li> <li> <a href = "#"> <i> </i> 1; <li> <a href="#"><i></i> Sample Link 1</a> </li> </li> <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> </li> </li> <li> <a href = "#"> <i> </i> Punkt 3 </a> </li> </li> </li> </li> </li> </li> <! Modale Form-> <div id = "portlet-config" tabindex = "-1" rollen = "dialog" aria-labelledBy = "MYMODALLABEL" ARIA-HIDDEN = "True"> <div> <div> <div> <button type Widget-Einstellungen Formular wird hier </div> <div> <button type = "button"> Änderungen speichern </button> <button type = "button" data-dismiss = "modal"> schließen </button> </div> </div> <!-/.modal-content-> </div> <!-/.modal-dialog-> </div> </Div> </Div> <!-/.modal-/.modal-<! <!-- 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 = "blau" data-container = "body" data-original-title = "blau"> </li> <li Data-Style = "Gray" data-container = "Body" Data-original-Title = "Gray"> </li> <licle DataLinal = "Light" leichte Data-Container = "Body" Data-Oreiginal "," Body "Data-Oreiginal", "data-original". " data-style="light2" data-container="body" data-html="true" data-original-title="Light 2"> </li> </ul> </div> <div> <span> Theme Style </span> <select> <option value="square" selected="selected">Square corners</option> <option value="rounded">Rounded corners</option> </select> </div> <div> <span> Layout </span> <Select> <Option Value = "Fluid" Selected = "Selected"> Fluid </option> <Option Value = "Boxed"> Boxed </option> </select> </div> <div> <span> Header </span> <select> <option = "fixed" seleted <span> Top -Menü Dropdown </span> <Select> <option value = "light" selected = "selected"> hell </option> <option value = "dark"> dark </option> </select> </div> <div> <Pan> SideBar -Modus </span> </select> </Option "Selected"> Standard> Option> Option> -Aption = "Default =" SEFAULT "SELECTED" SELTECTED "SELECTED"> -Aption> -Aption> Selted "SELECTED"> SEITEL = "SELECTED"> SEITEL = "SELECTED"> SELECT "> -Stum" Selected ". <span> Sidebar Menu </span> <select> <option value="accordion" selected="selected">Accordion</option> <option value="hover">Hover</option> </select> </div> <div> <span> Sidebar Style </span> <select> <option value="default" selected="selected">Default</option> <option> <option value="default" 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> Fußzeile </span> <Select> <Option Value = "Fixed"> behoben </option> <Option value = "Default" Selected = "Selected"> Standard </option> </select> </div> </div> <!-Endstil Customizer-> <! href = "index.html"> home </a> <i> </i> </li> <li> <a href = "#"> Layout </a> </li> </ul> </div> <H3> Layout <klein> Berichte & Statistiken </small> </h3> <!-End-Page-Header-> <! <div> </div> </div> </div> <!-Endinhalte-> <!-Beginnen Sie die schnelle Seitenleiste-> <a href = "javaScript:;"> <i> </i> </a> <div> <ul> <li> <a href = "#SideBar_tab_1" data-tabgle = "tab. <a href = "#Quick_sideBar_tab_2" data-toggle = "tab"> alerts <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> Notifications </a> </li> <li> <a href="#quick_sidebar_tab_3" data-toggle="tab"> <i></i> Activities </a> </li> <li> <a href="#quick_sidebar_tab_3" data-toggle="tab"> <i></i> Activities </a> </li> <li> <li> <a href="#quick_sidebar_tab_3" data-toggle="tab"> <i></i> Settings </a> </li> </ul> </li> </ul> </li> </ul> <div> <div id="quick_sidebar_tab_1"> <div data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list"> <h3>Staff</h3> <ul> <li> <div> <span>8</span> </div> <img src="~/Content/assets/admin/layout/img/avatar3.jpg"> <div> <h4>Bob Nilson</h4> <div> Project Manager </div> </div> </li> <li> <img src="~/Content/assets/admin/layout/img/avatar1.jpg"> <div> <h4>Nick Larson</h4> <div> Art Director </div> </li> <li> <div> <span>3</span> </div> <img src="~/Content/assets/admin/layout/img/avatar4.jpg"> <div> <h4>Deon 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/layout/img/avatar6.jpg"> <div> <h4>Lara Kunis</h4> <div> CEO, Loop Inc </div> <div> <div> Last seen 03:10 AM </div> </div> </li> <li> <div> <span>new</span> </div> <img src="~/Content/assets/admin/layout/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.jpg"> <div> <h4>Lisa Stone</h4> <div> CTO, Keort Inc </div> <div> Last seen 13:10 PM </div> </div> </li> <li> <div> <span>7</span> </div> <img src="~/Content/assets/admin/layout/img/avatar9.jpg"> <div> <h4>Deon Portalatin</h4> <div> CFO, H&D LTD </div> </li> </li> <li> <img src="~/Content/assets/admin/layout/img/avatar10.jpg"> <div> <h4>Irina Savikova</h4> <div> CEO, Tizda Motors Inc </div> </li> <li> <div> <span>4</span> </div> <img src = "~/content/assets/admin/layout/img/avatar11.jpg"> <div> <h4> maria gomez </h4> <div> Manager, Infomatic Inc </div> <div> Zuletzt 03:10 AM </div> </li> </div> <div> <div> <An> <a <a. href = "javaScript:;"> <i> </i> zurück </a> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> </span> <a href = "javascript:;" Senden Sie mir den Bericht? </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = " Ich werde es in Kürze senden </span> </div> </div> <div> <img src = "~/content/admin/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "JavaScript:; Danke! :) </span> </div> </div> <div> <img src="~/Content/assets/admin/layout/img/avatar2.jpg" /> <div> <span></span> <a href="javascript:;">Ella Wong</a> <span>20:16</span> <span> You are most welcome. Entschuldigung für die Verzögerung. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "JavaScript :;" Nehmen Sie sich einfach Zeit :) </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript:; Ich habe es dir gerade per E -Mail geschickt. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javaScript :;"> Bob Nilson </a> </a> <Sranges> 20:17 </span> </span> </span> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <Presce! Danke. Wird es sofort überprüfen. </span> </div> </div> <div> <img src="~/Content/assets/admin/layout/img/avatar2.jpg" /> <div> <span></span> <a href="javascript:;">Ella Wong</a> <span>20:40</span> <span> Please let me know if you have any comment. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javaScript :;" Ich werde Sie überprüfen und summen, wenn etwas korrigiert werden muss. </span> </div> </div> </div> </div> <div> <input type="text" placeholder="Type a message here..."> <div> <button type="button"><i></i></button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id = "Quick_sideBar_tab_2"> <div> <h3> Allgemein </h3> <ul> <li> <div> <div> <div> <div> <i> </i> </div> </div> <div> <IV> Sie haben 4 anhängige Aufgaben anhängig. <span> action action <i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> gerade jetzt </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> </div> <div> <div> You have 5 pending membership that requires a quick review. </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> <i> </i> </div> </div> <div> <div> Sie haben 5 anhängige Mitgliedschaft, für die eine schnelle Überprüfung erforderlich ist. </div> </div> </div> </div> </div> <div> <div> 24 min </div> </li> <li> <div> <div> <div> <div> <i> </i> </div> </div> </div> <IVGravingGravinghors. <span> überdurchschnittlich </span> </div> </div> </div> </div> </div> </div> <div> 2 Stunden </div> </li> <li> <a href = "javaScript:; </div> </div> </div> </div> </div> </div> <div> <div> 20 min </div> </a> </li> </ul> <h3> System </h3> <ul> <li> <div> <div> <div> <div> <Viv> <In> <I> </i> </iN </iN </iN </IN </i> </id/</id/</id/</id/</id/</id/</id/</id/</id/</id/</id/</id/</id/</id. <Pan> Take Action <i> </i> </span> </div> </div> </div> <div> Sie haben 4 ausstehende Aufgaben. <span> action action <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> gerade jetzt </div> </li> <li> <a href = "JavaScript:; </div> </div> </div> </div> </div> </div> <div> <div> 20 min </div> </a> </li> <li> <Viv> <Viv> <Viv> <Viv> <Viv> <i> </i> </div> <viv> <IV> <IV> <i> </i> </div> <div> </div> </idr. </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <div> <i></i> </div> </div> </div> <div> New order received with <span> Reference Number: DR23923 </span> </div> </div> </div> </div> </div> </div> <div> <div> 30 min </div> </li> <li> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <IV> Sie haben 5 anhängige Mitgliedschaft, für die eine kurze Überprüfung erforderlich ist. </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> <div> Web server hardware needs to be upgraded. <span> überfällt </span> </div> </div> </div> </div> </div> </div> <div> 2 Stunden </div> </li> <li> <a href = "JavaScript:; </div> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </li> </ul> </div> </div> </div> </div> <div> <div> 20 mins </div> </a> </ul> </div> </div> </div> <div id="quick_sidebar_tab_3"> <div> <h3> Allgemeine Einstellungen </h3> <ul> <li> Benachrichtigungen aktivieren <Eingabe type = "Checkbox" Checked Data-Size = "Small" Data-on-Color = "Erfolg" data-on-text = "auf" Data-off-color = "Standard" Data-Off-Text = "Off"> </li> <li> <li> <li> -Ato-in-type. Data-off-color = "Standard" Data-off-text = "off"> </li> <li> Protokollfehler <Eingabe-Typ = "Kontrollkästchen" Checked Data-Size = "Small" Data-on-Color = "Danger" Data-on-text = "on" Data-off-Color = "Standard" Data-text = "Off"> </li> <li> Auto-Auto-Sumbit-Sumbit-Sumbit-Sumbit-Sumbit-Sumbit-Sumbit-Sumbit-Sumbit. data-on-color = "Warning" data-on-text = "auf" Data-off-color = "Standard" Data-off-text = "off"> </li> <li> Aktivieren SMS-Warnungen <Eingabe type = "Checkbox" Checkbox "Überprüfte data-size =" Small "Data-on-Color =" Success "Data-on-Text =" -Daten-Off-Color = "-Daten-" -Daten-"-Daten-Off-" -Daten-Off-"-Daten-Off-" -Daten-Off-"-Daten-Off- Settings</h3> <ul> <li> Security Level <select> <option value="1">Normal</option> <option value="2" selected>Medium</option> <option value="e">High</option> </select> </li> <li> Failed Email Attempts <input value="5" /> </li> <li> Secondary SMTP Port <input value="3560" /> </li> <li> Notify On System Error <input type="checkbox" checked 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> <button> <i> </i> Änderungen speichern </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <! Metronisch von Keenthemen. </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; mit System verwenden; mit System.Collectionss.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. Zusammenfassung

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

Endwirkung

Autor: Ymnets

Quelle: http://ymnets.cnblogs.com/

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

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.