تابع المقالة السابقة ، شارك الملاحظات التي تم تجميعها من شريط قائمة Bootstrap Metronic معك للرجوع إليه. المحتوى المحدد كما يلي
1. مقدمة
1). تكوين البيئة
2).
3). قم بإنشاء القائمة بشكل ديناميكي (شجرة مستوى غير محدودة)
2. تكوين بيئة النظام
يتطلب المشروع دعم بيانات البرنامج ، هنا يتم تحديد MVC5.0+EF6.0 [SQLServer] (لا يوجد تفسير لعمارة MVC و SQLServer)
بيئة التشغيل: VS2013+MVC5.0+EF6.1+SQLServer2012
اسم الحل: اسم مشروع Appsolution: App.Web (طبقة واجهة المستخدم) و App.Models (طبقة الوصول إلى البيانات) - وضع الوصول المباشر
استخراج جميع الملفات تحت السمة إلى محتوى MVC ، استخراج index.html من المسؤول إلى _layout.cshtml للتحضير للتحول
3. إنشاء قواعد البيانات والجداول
قاعدة البيانات: APPDATABASE
قم بإنشاء جدول البيانات التالي وإنشاء appdb.edmx
استخدم [AppDatabase] go/****** الكائن: الجدول [dbo]. ID [name] [varchar] (50) not null ، -menu name [parentid] [varchar] (50) null ، -super id [url] [varchar] (200) null ، - -url [iconic] [islast] [bit] not null -هو آخر قيود العنصر [pk_sysmodule] مفتاح الأساسي المفتاح ([id] asc) مع (pad_index = Off ، statistics_norecompute = Off ، reghore_dup_key = Offget ، lemrow_lock = on ، lempage_locks = on) on [pricial]) [DBO].
البيانات الاصطناعية
أدخل في [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('0' ، 'root' ، 'root' ، 'index' ، 'icon-settings' ، null ، 0 ، 0) insert in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('1' ، 'Menu Pricial 01' ، '0' ، 'INDEX' ، 'Icon-settings' ، null ، 0 ، 0) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('11' ، 'menu inclure 01-01 ،' 1 '،' index '،' icon setting '، null ، 0 ، 0) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('111' ، 'threevely mene01-01-01' ، '11' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('112' ، 'Level 3 Menu 01-01-02' ، '11' ، 'index' ، 'icon-settings' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('12' ، 'Level 2 Menu 01-02' ، '1' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('13' ، 'Second very 01-03' ، '1' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('2' ، 'Menu Pricial 02' ، '0' ، 'INDEX' ، 'Icon-settings' ، null ، 0 ، 0) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('21' ، 'menu include 02-01 ،' 2 '،' index '،' icon setting '، null ، 0 ، 0) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('211' ، 'Level 3 Menu02-01-01' ، '5' ، 'index' ، 'icon-ink' ، null ، 0 ، 1) insert in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('212' ، 'Level 3 Menu 02-01-02' ، '5' ، 'index' ، 'icon-link' ، null ، 0 ، 1) insert in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('22' ، 'level 2 menu 02-02' ، '2' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('23' ، 'Second Sleex Menu02-03' ، '2' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('3' ، 'lemal menu 03' ، '0' ، 'index' ، 'Icon-settings' ، null ، 0 ، 0) in in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('31' ، 'MENANM 03-01' ، '3' ، 'INDEX' ، 'ICON-SETTINGS' ، NULL ، 0 ، 0) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('311' ، 'Level 3 Menu03-01-01' ، '31' ، 'index' ، 'icon-ink' ، null ، 0 ، 1) insert in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('312' ، 'Level 3 Menu 03-01-02' ، '31' ، 'index' ، 'icon-link' ، null ، 0 ، 1) insert in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('32' ، 'level 2 menu 03-02' ، '3' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('33' ، 'Second Level Menu03-03' ، '3' ، 'index' ، 'icon-link' ، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [islast]) ('4' ، 'lemal menu 04' ، '0' ، 'index' ، 'icon-settings' ، null ، 0 ، 0) in in [sysmodule] ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('41' ، 'menu primary 04-01 ،' 4 '،' index '،' icon-link '، null ، 0 ، 1) ([id] ، [name] ، [parentid] ، [url] ، [iconic] ، [sort] ، [enable] ، [createTime] ، [Islast]) ('42' ، 'Second Level Menu04-02' ، '4' ، 'index' ، 'icon-link' ، null ، 0 ، 1 ، 1)4. استخراج تخطيطات الصفحات المهمة
نحن نظام الواجهة الخلفية لذلك نحافظ على القمة. قائمة اليسار والقدم 3 أجزاء
لقد استخرجته ، يرجى نسخه
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <title> metronic | عرض التصميم < /title> <meta http-equiv = "x-ua- confervied" content = "ie = edge"> <meta content = "width = width device ، inial-scale = 1" name = "viewport" /> <meta content = "name =" description " /> href = "~/content/arcets/global/plugins/font-awesited/css/font-awesome.min.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/global/plugins/simple-line-line-icons.min.css <link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "STYLESHEET" type = "text/css"/> <link href = "~/content/assets/global/plugins/uniform/css/uniform.css href = "~/content/assets/global/plugins/bootstrap-switch/css/bootstrap-ditch.min.css" rel = "stylesheet" type = "text/css"/> <! href = "~/content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3 <link href = "~/content/assets/global/plugins/jqvmap/jqvmap.css" rel = "stylesheet" type = "text/css"/> <!-end page plugin styles-> <!-style page-> <link href = "~/content/asset/pages/css. type = "text/css"/> <!-أنماط الصفحة النهائية-> <!-ابدأ أنماط السمة-> <link href = "~/content/assets/global/css/components.css" id = "style_components" rel = "stylesheet" type = "text/css"/> <link href = rel = "stylesheet" type = "text/css"/> <link href = "~/content/asset/admin/layout/css/layout.css" rel = "STYLESHEET" type = "text/css"/> <link href = "~/content/admin/layout/css/shipblue. type = "text/css" id = "style_color"/> <link href = "~/content/assets/admin/layout/css/custom.css" rel = "stylesheet" type = "text/css"/> <!-end styles-> <link rel = "icon icon" href = <viv> <!-ابدأ الرأس الداخلي-> <div> <!-ابدأ الشعار-> <viv> <a href = "index.html"> <img src = "~/content/asset/admin/layout/img/logo.png"/> </a> </div> </div> <! HREF = "JavaScript :؛" data-toggle = "collapse" data-target = ". navbar-collapse"> </a> <!-نهايات القائمة المستجيبة-> <!-ابدأ قائمة التنقل العلوي-> <viv> <ul> <!-ابدأ الإخطار المنسدلة-> <! HREF = "JavaScript :؛" data-toggle = "tropown" data-over = "tropown" data-close-close-others = "true"> <i> </i> <span> 7 </af> </a> <ul> <li> <h3> <span> 12 pending </li> </li> </li> </li> </h3> <a href = extra_profile.html " 250px ؛ " COLLOR-COLOR = "#637283"> <li> <a href = "javaScript: ؛"> <span> الآن </span> <span> <span> <i> </i> </span> مستخدم جديد مسجل مستخدم جديد. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 3 دقائق </span> <span> <span> <i> </i> </span> خادم #12. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 3 دقائق </span> <span> <span> <i> </i> </span> خادم #12. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 10 دقائق </span> <span> <span> <i> </i> </span> خادم #2 لا يستجيب. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 14 ساعة </span> <span> <span> <i> </i> </span> خطأ في التطبيق. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 2 أيام </span> <span> <i> </i> </span> تم تحميل قاعدة البيانات 68 ٪. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 3 أيام </span> <span> <i> </i> </span> محظور IP للمستخدم. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 4 أيام </span> <span> <span> <i> </i> </span> خادم التخزين #4 لا يستجيب لـ DFDFDFD. </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> 5 أيام </span> <fan> <i> </i> </span> خطأ في النظام. </span> </a> </li> </li> <li> <a href = "javaScript: ؛"> <span> 9 أيام </span> <span> <span> <i> </i> </span> فشل خادم التخزين. </span> </a> </li> </li> </li></li></li></li></li></li></li></li>< 0 0حبوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفبو 0<وقف 0 0وقف 0 0وقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفوقفبووقفبو 0بو 0))))))))))))))))))))))))))))) وم) مفوقف اسم)))))))) أو))))))))))))))))))))))))))))))))) وم) أو) أوهار واقدعهار)))))))))))))))))))))))))))))))))))))))) وم) أو) أوهد أودعهدهار واقدع مهدف))))))) HREF = "JavaScript :؛" data-toggle = "tropown" data-hover = "sropdown" data-close-others = "true"> <i> </i> <span> 4 </af> </a> <ul> <li> <h3> لديك <span> 7 new </span> الرسائل </h3> <a href = "page_inbox.html" coll-color = "#637283"> <li> <a href = "inbox.html؟ a = view"> <span> <img src = "~/content/admin/layout3/img/avatar2 auctor nibh congue nibh.auctor nibh auctor nibh ... </span> </a> </li> <li> <a href = "inbox.html؟ mins </span> </span> <span> vivamus sed congue nibh autor nibh congue nibh. autor nibh autor nibh ... </span> </a> </li> <li> <li> <a href = "Inbox.html؟ a = view"> <span> <img src = "~/content/assets/admin> 2 hrs </span> </span> <span> vivamus sed nibh autor nibh congue nibh. auto nibh auto nibh ... </span> </a> </li> <li> <li> <a href = "Inbox.html؟ a = view"> <span> <img src = "~/content/assets </span> </span> </span> </span> </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> <!-نهاية الوارد المنسدلة-> <!-ابدأ TODO DROPDOWN-> <!-DOC: تطبيق "فئة من القائمة المنسدلة" بعد "من القائمة المنسدلة". HREF = "JavaScript :؛" data-toggle = "REPDOWN" data-hover = "tropdown" data-close-close-others = "true"> <i> </i> <span> </span> </a> <ul> <li> <h3> لديك <span> 12 pending </li> </li> </li> </li> </li> 275px ؛ " coll-color = "#637283"> <li> <a href = "javaScript: ؛"> <span> إصدار جديد v1.2 </span> <span> 30 ٪ </span> </span> <span> <span> نشر التطبيق </span> </span> <span> <span> <span> <span> aria-valuemin = "0" aria-valueMax = "100"> <span> 65 ٪ كاملة </span> </span> </a> </li> <li> <a href = "javaScript: ؛"> <span> إصدار تطبيق الهاتف المحمول </span> </span> </span> </span> </span> <span> <span> <span> <span> 98 ٪ </span> </span> <span> <span> <span> <span> ترحيل قاعدة البيانات </span> <span> 10 ٪ </span> </span> <span> <span aria-valuenow = "10" aria-valuemin = "0" aria-valuem = "100" </a> </li> <li> <a href = "javaScript: ؛"> <span> <span> ترقية خادم الويب </span> <span> 58 ٪ </span> </span> <span> <span> ترقية خادم الويب </span> </span> 58 ٪ </span> <span> <span> aria-valuemax = "100"> <span> 58 ٪ كاملة </span> </span> </span> </a> </li> <li> <A Href = "javaScript: ؛> <span> <span> تطوير الهاتف المحمول </span> <span> 85 ٪ </span> <span> <span> aria-valuemax = "100"> <span> 85 ٪ كاملة </span> </span> </span> </li> <li> <a href = "javaScript: ؛"> <span> <span> إصدار واجهة مستخدم جديد </span> <span> 38 ٪ </span> <span> <span> <span> Aria-Valuemin = "0" 0 span> aria-valuemax = "100"> <span> 38 ٪ كاملة </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> </li> <!-إنهاء TODODDOWN-> 1! REPDOWN STYTE -> <li> <a href = "javaScript :؛" data-toggle = "tropown" data-hover = "tropdown" data-close-close = "true"> <img src = "~ content/assets/admin/layout/img/avatar3_small.jpg"/> <span> nick </splan> <i> </i> <ul> <li> </a> </li> <li> <a href = "page_calendar.html"> <i> </i> التقويم الخاص بي </a> </li> <li> <a href = "page_calendar.html"> <i> </i> صندوق الوارد الخاص بي <span> 3 </af> </a> </li> <li> <li> <a href = "page_todo.html"> <i> </i> مهاماتي <span> 7 </af> </a> </li> </li> </li> </li> href = "login.html"> <i> </i> قم بتسجيل الخروج </a> </ul> </li> </li> <!-منسد تسجيل الدخول إلى المستخدم النهائي-> <!-ابدأ بتبديل الشريط الجانبي السريع-> <! <i> </i> </a> </li> <!-نهاية تبادل الشريط الجانبي السريع-> </ul> </viv> <!-نهاية قائمة التنقل العلوي-> </div> <!-end head inner-> </div> <!-end header-> </div> البيانات-auto-scroll = "false" لتعطيل الشريط الجانبي من التمرير التلقائي/التركيز-> <!-DOC: قم بتغيير سرعة البيانات-AUTO = "200" لضبط القائمة الفرعية لأعلى/لأسفل السرعة-> <div> <! الحدود)-> <!-DOC: تطبيق "الصفحة sidebar-menu-hover-submenu" مباشرة بعد "page-sidebar-menu" لتمكين تحوم (hover vs وفقًا) وضع القائمة الفرعية-> <! وضع القائمة الفرعية الشريط الجانبي-> <!-DOC: تعيين البيانات-Auto-scroll = "false" لتعطيل الشريط الجانبي من التمرير التلقائي/التركيز-> <!-DOC: تعيين البيانات-الحفاظ على expand = "true" للاحتفاظ بموسعة الأولاد الفرعية-> <!-DOC: تعيين البيانات-AUTO-SPEED = "200" لضبط القائمة الفرعية. data-auto-scroll = "true" sper-speed = "200"> <!-doc: لإزالة تبادل الشريط الجانبي من الشريط الجانبي ، تحتاج فقط إلى إزالة "الشريط الجانبي-توجيلر-ويرابر" من الشريط الجانبي- الشريط الجانبي الذي تحتاجه فقط إلى إزالة العنصر "SideBar-Search-Wrapper" أدناه تمامًا-> <li> <a href = "javaScript: ؛"> <i> </i> <span> قائمة متعددة المستوى </span> </span> </a> <ul> <li> <a href = "javaScript: ؛ <li> <a href = "javaScript: ؛"> <i> </i> رابط عينة 1 <span> </af> </a> <ul> <li> <a href = "#"> <i> </i> sample link 1 </a> </li> <li> href = "#"> <i> </i> رابط عينة 1 </a> </li> <li> <li> <a href = "#"> <i> </i> نماذج الرابط 1 </a> </li> <li> <a href = "#"> <i> <i> 1 </a> </li> <li> <a href = "#"> <i> <i> </i> رابط النموذج 2 </a> </li> <li> <a href = "#"> <i> </i> رابط عينة 3 </a> </a> </li> </li> </li> <i> <li> <a href = "#"> <i> </i> رابط عينة 1 </a> </li> </li> <li> <a href = "#" الرابط 1 </a> </li> </li></li><li>< a href = "#"> <i> </i> البند 3 </a> </li> </li> </li> </li> </li> </li> </li> <!-القائمة الجانبية النهائية-> </li> </li> النموذج المشروط-> <div id = "portlet-config" tabindex = "-1" "‘ ver = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true" يسير نموذج إعدادات Widget هنا </div> <viv> <button type = "button"> احفظ التغييرات </button> <button type = "button" data-dismiss = "modal"> inting </button> </div> </viv> <!-/. <!-ابدأ style customizer-> <viv> <viv> </viv> <viv> </viv> <viv> <viv> <span> لون السمة </span> <ul> <li-style = "default" data-container = "body" data-original-title = "default"> </li> <li data-style = </li> <li-style = "blue" data-container = "body" data-original-title = "blue"> </li> <li-style = "gray" data-container = "body" data-original-title = "gray"> </li> <li-style = "light" data-container = data-style = "light2" data-container = "body" data-html = "true" data-original-title = "light 2"> </li> </ul> </viv> <viv> <span> theme stype </span> <select> <option </"square" seque = "select" <span> تخطيط </span> <select> <option value = "fluid" select = "selected"> fluid </puints> <orpue value = "boxed"> boxed </poys> </select> </viv> <viv> <span> header </span> <sipt> <spue value = "fileded" select = "select" القائمة المنسدلة </span> <select> <option value = "light" select = "select"> light </puint> <orpue value = "dark"> dark </poyse> </select> </viv> <viv> <span> وضع الشريط الجانبي </span> <select> <option> value> </span> <select> <option value = "orcordion" select = "select"> orcordion </puint> <orpue value = "hover"> hover </potion> </select> </viv> <viv> <span> sidebar style </span> <select> <septor> value> "default> value = "default" select ؛ value = "fixed"> ثابت </option> <option value = "default" select = "select"> الافتراضي </option> </select> </viv> </viv> <!-custom end style int HREF = "#"> التصميم </a> </li> </ul> </viv> <h3> تخطيط <small> التقارير والإحصائيات </small> </h3> <!-رأس الصفحة النهائية-> <!-end atts <! href = "javaScript: ؛"> <i> </i> </a> <viv> <viv> <ul> <li> <a href = "#quick_sidebar_tab_1" data-toggle = "tab"> المستخدمين <span> 2 </aa> </li> <li> <span> 7 </span> </a> </li> <li> <a href = "javaScript :؛" data-toggle = "sropdown"> أكثر <i> </i> </a> <ul rom = "menu"> <li> <a href = "#quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> تنبيهات </a> </li> <li> الإخطارات </a> </li> <li> <a href = "#quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> الأنشطة </a> </li> <li> <shref = "#quick_sidebar_tab_3" data-toggle = "tab"> </i> HREF = "#Quick_sideBar_TAB_3" data-toggle = "tab"> <i> </i> الإعدادات </a> </li> </ul> </li></ul> </li> </ul> <liv> <div id = "quick_sidebar_tab_1> <siv-color =" ddd " <H3> الموظفين </h3> <ul> <li> <viv> <span> 8 </span> </viv> <img src = "~/content/admit/admin/layout/img/avatar3. src = "~/content/assets/admin/layout/img/avatar1.jpg"> <fiv> <h4> nick larson </h4> <viv> مدير فني </div> </li> <li> <viv> <span> 3 </span> </viv> <img src =/content/asset/layout hubert </h4> <viv> cto </viv> </li> <li> <img src = "~/asset/admin/layout/img/avatar2.jpg"> <div> <h4> ella wong </h4> <viv> الرئيس التنفيذي </viv> <img src = "~/content/actets/admin/layout/img/avatar6.jpg"> <viv> <h4> lara kunis </h4> <viv> ceo ، loop inc </div> <div> آخر مرة شوهد 03:10 am </div> </li> src = "~/content/assets/admin/layout/img/avatar7.jpg"> <viv> <h4> ernie kyllonen </h4> <viv> مدير المشروع ، <br> smartbizz ptl </vatar> </vatar <H4> LISA Stone </h4> <viv> cto ، Keort Inc </fiv> <viv> آخر مرة شوهد 13:10 PM </viv> </liv> </li> <li> <viv> 7 </span> </div> <img src = "~/content/asset CFO ، H & D Ltd </viv> </li> </li> <li>< img src = "~/asset/admin/layout/img/avatar10.jpg"> <div> <h4> irina savikova </h4> src = "~/المحتوى/الأصول/المسؤول/التخطيط/img/avatar11.jpg"> <viv> <h4> ماريا غوميز </h4> <viv> ، infomatic inc </viv> <viv> آخر مرة 03:10 AM </viv> </iv> </li> <viv> <viv> <viv> <div> href = "javaScript: ؛"> <i> </i> مرة أخرى </a> </iv> <viv> <viv> <img src = "~/content/admit/admin/layout/img/avatar3. أرسل لي التقرير؟ </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar2. سأرسلها قريبًا </span> </viv> </viv> <viv> <img src = "~/content/admits/admin/layout/img/avatar3.jpg"/> <viv> <span> </span> <a href = "javaScript: ؛ شكرًا! :) </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <viv> <span> </span> <a href = "javaScript: ؛ آسف للتأخير. </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar3. ما عليك سوى خذ وقتك :) </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <viv> <span> </span> <a href = "javascript: ؛ أنا فقط أرسلت لك البريد الإلكتروني لك. </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar3. شكرًا. سوف تحقق من ذلك على الفور. </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <viv> <span> </span> <a href = "javaScript: ؛ </span> </viv> </viv> <viv> <img src = "~/content/assets/admin/layout/img/avatar3. سوف أتحقق وأضنبك إذا كان هناك حاجة إلى تصحيح أي شيء. </span> </viv> </viv> </viv> </viv> <viv> <input type = "text" placeholder = "اكتب رسالة هنا ..."> <div> <button type = "button"> <i> </i> </nutron> </siv> </viv> ID = "Quick_sideBar_TAB_2"> <viv> <h3> عام </h3> <ul> <li> <viv> <viv> <viv> <viv> <viv> <viv> <i> </i> </viv> </viv> <viv> لديك 4 4 مهام معلقة. <span> اتخاذ إجراء <i> </i> </span> </viv> </viv> </viv> </viv> </viv> </viv> <viv> <div> فقط الآن </div> </li> <li> <a href = "javaScript: ؛ </viv> </viv> </viv> </viv> </viv> </viv> <viv> <viv> 20 دقيقة </div> </a> </li> <li> <viv> <viv> <viv> <viv> <i> </i> </i> </i div> <viv> <div> لديك 5 p penderips تتطلب مراجعة سريعة. </viv> </viv> </viv> </viv> </viv> <viv> <viv> <fire> 24 دقيقة </div> </li> <li> <liv> <viv> <viv> <viv> <viv> <i> </i> </iv> <//div> ترتيب جديد تم استلامه مع <span> رقم المرجع: DR23923 </iviv> </div> </div> <div> </viv> </viv> </li> <li> <viv> <viv> <viv> <viv> <viv> <i> </i> </viv> </viv> <viv> <div> لديك 5 عضوية تتطلب مراجعة سريعة. </viv> </viv> </viv> </viv> </viv> <viv> <viv> 24 دقيقة </div> </li> <li> <liv> <viv> <viv> <viv> <iv> <i> </i> </iv> </iv> </viv> </viv> <viv> <iv> </i> <iv> <iv> <iv> <span> overdue </span> </viv> </viv> </viv> </viv> </viv> </viv> <viv> <div> 2 ساعة </div> </li> <li> <a href = "javaScript: ؛ </viv> </viv> </viv> </viv> </viv> </viv> <viv> <viv> 20 دقيقة </div> </a> </li> </ul> <h3> النظام </h3> <ul> <li> <liv> <viv> <viv> <viv> <viv> <iv> <iv> </iv> </liv> </li> <li> <span> اتخاذ إجراء <i> </i> </span> </viv> </viv> </viv> <viv> لديك 4 مهام معلقة. <span> اتخاذ إجراء <i> </i> </span> </viv> </viv> </viv> </viv> </viv> <viv> فقط الآن </div> </li> <li> <a href = "javaScript: ؛ </viv> </viv> </viv> </viv> </viv> </viv> <viv> <viv> 20 دقيقة </div> </a> </li> <li> <viv> <viv> <viv> <viv> <viv> <viv> <i> </i> </i div> <viv> </viv> </viv> </viv> </viv> <viv> <viv> 24 دقيقة </div> </li> <li> <viv> <viv> <viv> <viv> <viv> <viv> <i> </i> </iv> </viv> </viv> <div> طلب جديد مع <span> رقم مرجعي: DR23923 </viv> <viv> <viv> 30 دقيقة </div> </li> <li> <viv> <viv> <viv> <viv> <viv> <iv> <i> </i> </viv> </viv> </div> <viv> لديك 5 عضوية معلقة تتطلب مراجعة سريعة. </viv> </viv> </viv> </viv> <viv> <viv> 24 دقيقة </div> </li> <li> <viv> <viv> <viv> <viv> <iv> <i> </i> </viv> </viv> </viv> <viv> <iv> <iv> <iv> </iv> </viv> <viv> <span> overdue </span> </viv> </viv> </viv> </viv> </viv> </viv> <div> 2 ساعة </div> </li> <li> <a href = "javaScript: ؛"> <viv> <viv> <viv> <iv> <iv> <iv> </ivi> <viv> <viv> </viv> </viv> </viv> </viv> </viv> <viv> <viv> 20 دقيقة </div> </a> </li> </ul> </viv> </viv> </viv> </viv> <viv> 20 دقيقة </div> </a> <H3> الإعدادات العامة </h3> <ul> <li> تمكين الإخطارات <input type = "checkbox" checked-size-size = "small" data-on-color = "success" data-on-text = "on" data-color-color = "data-" data-text-text = "eff". data-on-text = "on" data-opt-color = "dative" data-opt-text = "افي"> </li> <li> أخطاء السجل <type type = "checkbox" checked-size-size = "small" data-color = "danger" onto-on-text = "on" data-Offault-sext "data-tex data-size = "small" data-on-color = "تحذير" data-on-text = "on" data-Off-color = "dative" data-Off-text = "Off" </li></ul> <h3> إعدادات النظام </h3> <ul> <li> مستوى الأمان <select> <option value = "1"> normal </portive> <tort /> </li> <li> الإخطار على خطأ النظام <input type = "checkbox" تم تحديد حجم البيانات = "صغير" البيانات-color = "danger" data-on-text = "on" data-Offault = "data-ext-text =" Off Data "> </li> <li> على خطأ smtp <type type =" checked-checked-size = "small". data-on-text = "on" data-off-color = "default" data-opt-text = "افي"> </li> </ul> <viv> <butt> <i> <i> </i> حفظ التغييرات </button> </viv> </div> </div> </div> </div> </viv> </div> </div> </div> </div> </div> <!-ابدأ تذييل-> <viv> <viv> 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; باستخدام النظام ؛ باستخدام 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. ملخص
前端这种东西最考验人的耐心，不信你自己拼接一下
最后效果
المؤلف: ymnets
المصدر: http://ymnets.cnblogs.com/
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.