ดำเนินการต่อกับบทความก่อนหน้าแบ่งปันบันทึกที่รวบรวมจากแถบเมนู bootstrap metronic กับคุณสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. บทนำ
1). การกำหนดค่าสภาพแวดล้อม
2). Extract the Page
3). สร้างเมนูแบบไดนามิก (ต้นไม้ระดับไม่ จำกัด )
2. การกำหนดค่าสภาพแวดล้อมของระบบ
โครงการต้องการการสนับสนุนข้อมูลโปรแกรมที่นี่ MVC5.0+EF6.0 [SQLServer] ถูกเลือก (ไม่มีการตีความสถาปัตยกรรม MVC และ SQLServer)
สภาพแวดล้อมที่รัน: VS2013+MVC5.0+EF6.1+SQLServer2012
ชื่อโซลูชัน: AppSolution Project Name: App.web (UI Layer) และ App.models (Layer Access Data) - โหมดการเข้าถึงโดยตรง
แยกไฟล์ทั้งหมดภายใต้ธีมไปยังเนื้อหา MVC, แยก index.html ของผู้ดูแลระบบเป็น _layout.cshtml เพื่อเตรียมการแปลง
3. สร้างฐานข้อมูลและตาราง
ฐานข้อมูล: AppDatabase
สร้างตารางข้อมูลต่อไปนี้และสร้าง appdb.edmx
ใช้ [AppDatabase] GO/****** วัตถุ: ตาราง [DBO]. [sysmodule] สคริปต์วันที่: 2015/9/15 21:03:39 *******/ตั้งค่า ansi_nulls ongoset quoted_identifier ongoset ansi_padding ongocreate table [dbo] [ชื่อ] [varchar] (50) ไม่ใช่ null, -เมนูชื่อ [parentid] [varchar] (50) null, -super id [url] [varchar] (200) null, -url [iconic] [varchar] (200) null, -iconic [sort] [iSlast] [bit] ไม่ใช่ null -เป็นข้อ จำกัด รายการสุดท้าย [pk_sysmodule] คีย์หลักที่จัดกลุ่ม ([id] asc) กับ (pad_index = ปิด, statistics_norecompute = ปิด, enterore_dup_key = ปิด, ally_row_locks = on, alle_page_locks = on) บน) [dbo]. [sysmodule] ด้วย noCheck เพิ่มข้อ จำกัด [fk_sysmodule_sysmodule] คีย์ต่างประเทศ ([parentid]) การอ้างอิง [DBO]. [sysmodule] ([ID]) ตารางผู้รักษาประตู [DBO]
ข้อมูลเทียม
แทรกลงใน [sysmodule] ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [เรียงลำดับ], [enable], [createTime], [islast]) ค่า ('0', 'root', 'root', 'index', 'icon-settings', null, 0, 0) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('1', 'เมนูหลัก 01', '0', 'ดัชนี', 'ไอคอนตั้งค่า', null, 0, 0) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('11', 'เมนูหลัก 01-01', '1', 'ดัชนี', 'ไอคอนตั้งค่า' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('111', 'สามเมนูสามระดับ 01-01-01', '11', 'ดัชนี', 'ไอคอน-ลิงค์ ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('112', 'ระดับ 3 เมนู 01-01-02', '11', 'ดัชนี' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('12', 'ระดับ 2 เมนู 01-02', '1', 'ดัชนี', 'icon-link' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('13', 'ระดับที่สอง 01-03', '1', 'ดัชนี', 'Icon-link' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('2', 'เมนูหลัก 02', '0', 'ดัชนี', 'ไอคอนตั้งค่า', null, 0, 0) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('21', 'เมนูหลัก 02-01', '2', 'ดัชนี', ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('211', 'ระดับ 3 เมนู 3 เมนู 02-01-01', '5', 'ดัชนี', 'ไอคอน-ลิงค์ ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('212', 'ระดับ 3 เมนูระดับ 02-01-02', '5', 'ดัชนี', 'ไอคอน-ลิงค์ ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [islast]) ค่า ('22', 'ระดับ 2 เมนู 02-02', '2', 'ดัชนี', 'icon-link' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('23', 'ระดับที่สองเมนู 02-03', '2', 'ดัชนี', 'icon-link' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('3', 'เมนูหลัก 03', '0', 'ดัชนี', 'ไอคอนตั้งค่า', null, 0, 0) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [islast]) ค่า ('31', 'เมนูหลัก 03-01', '3', 'ดัชนี', 'ไอคอนตั้งค่า' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('311', 'ระดับ 3 เมนู 3 เมนู 03-01-01', '31', 'ดัชนี', 'ไอคอน-ลิงค์ ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('312', 'ระดับ 3 เมนู 03-01-02', '31', 'ดัชนี', 'ไอคอน-ลิงค์ ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('32', 'ระดับ 2 เมนู 03-02', '3', 'ดัชนี', 'icon-link', null, 0, null, 1) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('33', 'menual ระดับที่สอง 03-03', '3', 'ดัชนี', 'icon-link', null, 0, null, 1) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [islast]) ค่า ('4', 'เมนูหลัก 04', '0', 'ดัชนี', 'ไอคอนตั้งค่า', null, 0, 0) ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('41', 'เมนูหลัก 04-01', '4', 'ดัชนี', 'icon-link' ([id], [ชื่อ], [parentid], [url], [สัญลักษณ์], [sort], [enable], [createTime], [iSlast]) ค่า ('42', 'เมนูระดับที่สอง 04-02', '4', 'ดัชนี', 'Icon-link'4. แยกเค้าโครงหน้าสำคัญ
เราเป็นระบบแบ็กเอนด์ดังนั้นเราจึงเก็บไว้ด้านบน เมนูซ้ายและเท้า 3 ส่วน
ฉันแยกมันมาโปรดคัดลอกมาแล้ว
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <title> metronic | การแสดงเค้าโครง </title> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1" name = "viewport" /> <meta content = "" name = "คำอธิบาย" /> href = "~/เนื้อหา/ทรัพย์สิน/ส่วนกลาง/ปลั๊กอิน/font-awesome/css/font-awesome.min.css" rel = "stylesheet" type = "text/css"/> <link href = "~/เนื้อหา/assets/global/plugins/simple-line-icons/simple-icons <link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "stylesheet" type = "text/css"/> <link href = "~/เนื้อหา/assets/global/plugins href = "~/เนื้อหา/สินทรัพย์/ส่วนกลาง/ปลั๊กอิน/bootstrap-switch/css/bootstrap-switch.min.css" rel = "stylesheet" type = "text/css"/> <! href = "~/เนื้อหา/ทรัพย์สิน/ส่วนกลาง/ปลั๊กอิน/bootstrap-daterangepicker/daterangepicker-bs3.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/assets <link href = "~/content/assets/global/plugins/jqvmap/jqvmap.css" rel = "Stylesheet" type = "text/css"/> <! type = "text/css"/> <!-สไตล์หน้าจบ-> <!-เริ่มต้นสไตล์ธีม-> <link href = "~/เนื้อหา/ทรัพย์สิน/global/css/components.css" id = "style_components" rel = "stylesheet" type = "text/css"/> rel = "stylesheet" type = "text/css"/> <link href = "~/content/assets/admin/layout/css/layout.css" rel = "stylesheet" type = "text/css"/> <link href = "/เนื้อหา/เนื้อหา type = "text/css" id = "style_color"/> <link href = "~/content/assets/admin/layout/css/custom.css" rel = "stylesheet" type = "text/css"/> <! <div> <!-เริ่มต้นส่วนหัวภายใน-> <div> <!-เริ่มต้นโลโก้-> <div> <a href = "index.html"> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/logy/img/logo.png"/> </a> href = "JavaScript:;" data-toggle = "ล่มสลาย" data-target = ". navbar-collapse"> </a> <!-จบเมนูตอบกลับ-> <!-เริ่มต้นเมนูการนำทางด้านบน-> <div> <ul> <! href = "JavaScript:;" data-toggle = "dropdown" data-hover = "dropdown" data-close-mothers = "true"> <i> </i> <span> 7 </span> </a> <ul> <li> <h3> <span> 12 ที่รอการแจ้งเตือน </h3> <a href = "extra_profile.html" 250px; " data-handle-color = "#637283"> <li> <a href = "JavaScript:;"> <pan> ตอนนี้ </span> <span> <pan> <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> </pan> เซิร์ฟเวอร์ #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> <span> <i> </i> </span> ฐานข้อมูลโอเวอร์โหลด 68% </span> </a> </li> <li> <a href = "JavaScript:;"> <span> 3 วัน </span> <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> <span> <i> </i> </span> ข้อผิดพลาดของระบบ </span> </a> </li> </li> <li> <a href = "JavaScript:;"> <span> 9 วัน </span> <span> <span> <i> </i> </i> </span> เซิร์ฟเวอร์หน่วยเก็บข้อมูลล้มเหลว </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <! href = "JavaScript:;" data-toggle = "dropdown" data-hover = "dropdown" data-close-mothers = "true"> <i> </i> <span> 4 </span> </a> <ul> <li> <h3> คุณมี <span> 7 </span> ข้อความ </h3> <a href = "page_inbox.html" data-handle-color = "#637283"> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/เนื้อหา/assets/admin/layout3/img/avatar2.jpg"> </span> Vivamus sed auctor nibh congue nibh.auctor nibh auctor nibh ... </span> </a> </li> <li> <a href = "inbox.html? </span> <span> 16 นาที </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 = "~/เนื้อหา/assets/admin/layout3/img/avatar1.jpg" <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 = "~/เนื้อหา/assets/admin/layout3/img/avatar2.jpg"> </ </span> <span> Vivamus sed auto 40% nibh congue nibh ... </span> </li> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/เนื้อหา/assets/admin/layout3/img/avatar3.jpg นาที </span> </span> <span> Vivamus sed congue nibh autotor nibh congue nibh autotor nibh autotor nibh ... </span> </a> </li></ul> </li> </li> </li> </li> </li> <! href = "JavaScript:;" data-toggle = "dropdown" data-hover = "dropdown" data-close-mothers = "true"> <i> </i> <span> 3 </span> </a> <ul> <li> <h3> คุณมี <spaning> all </span> </h3> <a href = "page_todo.html" 275px; " data-handle-color = "#637283"> <li> <a href = "JavaScript:;"> <span> <span> รีลีสใหม่ v1.2 </span> <span> 30%</span> </span> <span> <span> <span> aria-valuemin = "0" aria-valuemax = "100"> <span> 65%เสร็จสมบูรณ์ </span> </span> </span> </a> </li> <li> <a href = "span> <span> <pan> <span> <span> <span> <span> 98%</span> </span> <span> <span> <span> <span> การย้ายฐานข้อมูล </span> <span> 10%</span> </span> <span> </a> </li> <li> <a href = "JavaScript:;"> <span> <span> การอัพเกรดเว็บเซิร์ฟเวอร์ </span> <span> 58%</span> </span> <span> <span> <span> การอัพเกรดเว็บเซิร์ฟเวอร์ aria-valuemin = "0" aria-valuemax = "100"> <span> 58% เสร็จสมบูรณ์ </span> </span> </span> </a> </li> <li> <a href = "JavaScript:;"> <pan> <pan> aria-valuemin = "0" aria-valuemax = "100"> <span> 85% เสร็จสมบูรณ์ </span> </span> </pan> </li> <li> <a href = "JavaScript:;"> <pan> <pan> ui ใหม่ aria-valuemax = "100"> <span> 38% เสร็จสมบูรณ์ </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> สไตล์ดรอปดาวน์ -> <li> <a href = "JavaScript:;" data-toggle = "dropdown" data-hover = "dropdown" data-close-mothers = "true"> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/layout/img/avatar3_small.jpg"/> <pan> nick </span> <i> </i> </a> </li> <li> <a href = "page_calendar.html"> <i> </i> ปฏิทินของฉัน </a> </li> <li> <a href = "page_calendar.html"> <i> </i> กล่องจดหมายของฉัน <span> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i> งานของฉัน <pan> 7 </pan> </a> </li> <li> </li> <li> href = "login.html"> <i> </i> ออกจากระบบ </a> </ul> </li> </li> <!-การเข้าสู่ระบบของผู้ใช้แบบเลื่อนลง-> <!-เริ่มต้น Toggler Sidebar SideBar-> <!-Doc: Apply "Dropdown-Dark" <i> </i> </a> </li> <!-จบ Toggler แถบด้านข้างด่วน-> </ul> </div> <!-จบเมนูการนำทางด้านบน-> </div> <! data-auto-scroll = "false" เพื่อปิดการใช้งานแถบด้านข้างจากการเลื่อนอัตโนมัติ/โฟกัส-> <!-DOC: เปลี่ยน data-auto-speed = "200" เพื่อปรับเมนูย่อยสไลด์ความเร็วขึ้น/ลง-> <div> <! Borders)-> <!-DOC: ใช้ "หน้า" หน้า--เมนู-ฮอร์-ฮอร์-ฮอร์-ฮอร์-ซูนูเมนู "หลังจาก" หน้า-เมนูหน้า "เพื่อเปิดใช้งานโหมดเมนูย่อย (โฮเวอร์เทียบกับตาม) โหมดเมนูย่อย-> <! โหมดเมนูย่อย-> <!-DOC: ตั้งค่า data-auto-scroll = "false" เพื่อปิดการใช้งานแถบด้านข้างจากการเลื่อน/โฟกัสอัตโนมัติ-> <!-เอกสาร: ตั้งค่าข้อมูล-expand = "จริง" เพื่อให้ submenues ขยายตัว-> <! data-auto-scroll = "true" data-slide-speed = "200"> <!-doc: ในการลบ toggler แถบด้านข้างออกจากแถบด้านข้างคุณเพียงแค่ต้องลบส่วนล่าง "Bobkar-end to-boutb! จากแถบด้านข้างคุณเพียงแค่ลบองค์ประกอบด้านล่าง "Sidebar-Search-Wrapper" li-> <li> <a href = "JavaScript:;"> <i> </i> <span> เมนูหลายระดับ </span> <pan> </span> </a> <ul> <li> <a href = "Javascript:; <li> <a href = "JavaScript:;"> <i> </i> ตัวอย่างลิงก์ 1 <span> </span> </a> <ul> <li> <a href = "#"> <i> </i> ลิงก์ตัวอย่าง 1 </a> </li> <li> href = "#"> <i> </i> ตัวอย่างลิงก์ 1 </a> </li> <li> <a href = "#"> <i> </i> ตัวอย่างลิงก์ 1 </a> </li> <li> <a href = "#"> <i> </i> 1 </a> </li> <li> <a href = "#"> <i> </i> ลิงก์ตัวอย่าง 2 </a> </li> <li> <a href = "#"> <i> </i> ตัวอย่างลิงค์ 3 </a> </li> </li> </li> <li> <li> <a href = "#"> <i> </i> ตัวอย่างลิงก์ 1 </a> </li> </li> <li> <a href = "#"> <i> </i> ตัวอย่างลิงค์ 1 </a> </li> <li> <a href = "#"> <i> ลิงก์ 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> รายการ 3 </a> </li> </li> </li> </li> </li> </li> <! แบบฟอร์มโมดอล-> <div id = "พอร์ตเล็ต-คอนฟิก" tabindex = "-1" บทบาท = "กล่องโต้ตอบ" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <div> <div> <button type = "data-dismiss =" modal แบบฟอร์มการตั้งค่าไปที่นี่ </div> <div> <button type = "ปุ่ม"> บันทึกการเปลี่ยนแปลง </button> <button type = "ปุ่ม" data-dismiss = "modal"> ปิด </button> </div> </div> <!-/.modal-content-> </div> <! สไตล์การปรับแต่ง-> <div> <div> </div> <div> </div> <div> <div> <span> สีธีม </span> <ul> <li data-style = "data-data-container =" body "data-original-title =" default "> </li> data-style = "blue" data-container = "body" data-original-title = "blue"> </li> <li data-style = "grey" data-container = "body" data-original-title = "Grey"> </li> data-container = "body" data-html = "true" data-original-title = "Light 2"> </li> </ul> </div> <div> <span> สไตล์ธีม </span> <select> <optup> <square "spelected =" Selected " <Select> <opption value = "fluid" selected = "selected"> fluid </opovie> <ตัวเลือกค่า = "boxed"> boxed </optup> </select> </div> <pan> <pan> header </span> <elect> <select> <ตัวเลือก = "แก้ไข" เลือก <Select> <ตัวเลือกค่า = "แสง" เลือก = "เลือก"> แสง </ตัวเลือก> <ตัวเลือกค่า = "มืด"> มืด </ตัวเลือก> </เลือก> </div> <div> <span> โหมดแถบด้านข้าง </span> <elect> <ตัวเลือกค่า = "คงที่" <Select> <opption value = "หีบเพลง" เลือก = "เลือก"> หีบเพลง </ตัวเลือก> <ตัวเลือกค่า = "โฮเวอร์"> โฮเวอร์ </ตัวเลือก> </เลือก> </div> <par> <span> สไตล์แถบด้านข้าง </span> <elect> <ตัวเลือกค่าเริ่มต้นที่เลือก เลือก = "เลือก"> ค่าเริ่มต้น </opovie> <pontion> <ตัวเลือกค่า = "Light"> Light </optup> </select> </div> <div> <span> ตำแหน่งแถบด้านข้าง </span> <elect> <ตัวเลือกค่า = "left" selected = "selected" value = "แก้ไข"> แก้ไข </optup> <optup value = "default" เลือก = "เลือก"> ค่าเริ่มต้น </optup> </select> </div> </div> <! href = "#"> เลย์เอาต์ </a> </li> </ul> </viv> <h3> เลย์เอาต์ <small> รายงานและสถิติ </small> </h3> <!-ส่วนหัวของหน้าสุดท้าย-> <!-เริ่มต้นสถิติ layone-> @renderbody () <! href = "javascript:;"> <i> </i> </a> <div> <div> <ul> <li> <a href = "#quick_sidebar_tab_1" data-toggle = "tab"> tab_ span> 2 </span> </a> </li> <li> <span> 7 </span> </a> </li> <li> <a href = "JavaScript:;" data-toggle = "dropdown"> more <i> </i> </a> <ul role = "เมนู"> <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> <a href = "#quick_sidebar_tab_3 href = "#quick_sidebar_tab_3" data-toggle = "แท็บ"> <i> </i> การตั้งค่า </a> </li></ul> </li></ul> </li> data-wrapper-class = "Page-Quick-SideBar-List"> <H3> พนักงาน </h3> <ul> <li> <li> <div> <span> 8 </span> </div> <img src = "~/เนื้อหา/assets/admin/layout/img/avatar3.jpg" <li> <img src = "~/content/assets/admin/layout/img/avatar1.jpg"> <div> <h4> nick larson </h4> <div> ผู้อำนวยการศิลปะ </div> </li> <li> <li> <H4> Deon Hubert </h4> <div> CTO </div> </li> <li> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/layout/img/avatar2.jpg"> <div> <h4> ella wong </h4> <div> <span> 2 </span> </div> <img src = "~/เนื้อหา/ทรัพย์สิน/admin/layout/img/avatar6.jpg"> <div> <h4> lara kunis </h4> <div> ceo </div> </div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar7.jpg"> <div> <h4> ernie kyllonen </h4> <div> ตัวจัดการโครงการ <br> smartbizz ptl </div> </div> </li> <div> <h4> Lisa Stone </h4> <div> CTO, Keort Inc </div> <div> เห็นครั้งล่าสุด 13:10 PM </div> </div> </li> <li> <li> <pan> 7 </span> </div> <img Src = "/เนื้อหา/เนื้อหา <div> cfo, h & d ltd </div> </li> </li> <li> <img src = "~/เนื้อหา/ทรัพย์สิน/admin/layout/img/avatar10.jpg"> <div> <h4> irina savikova </h4> <div> <img src = "~/content/assets/admin/layout/img/avatar11.jpg"> <div> <h4> Maria Gomez </h4> <div> ผู้จัดการ Infomatic Inc </div> <div> ล่าสุดพบ 03:10 am </div> href = "javascript:;"> <i> </i> ย้อนกลับ </a> </div> <div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar3.jpg"/> <v> <span> ส่งรายงานมาให้ฉัน? </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar2.jpg"/> <div> <pan> </pan> <a href = "JavaScript:; ฉันจะส่งมันในไม่ช้า </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar3.jpg"/> <div> <pan> </span> <a href = "JavaScript:;"> Bob Nilson ขอบคุณ! :) </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar2.jpg"/> <div> <pan> </span> <a href = "JavaScript:;"> ella Wong </a> ขออภัยในความล่าช้า </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar3.jpg"/> <div> <pan> </span> <a href = "Javascript:;"> Bob Nilson </a> เพียงแค่ใช้เวลาของคุณ :) </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar2.jpg"/> <div> <pan> </span> <a href = "JavaScript:;"> ella Wong < ฉันเพิ่งส่งอีเมลถึงคุณ </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar3.jpg"/> <div> <pan> </span> <a href = "javascript:;"> bob nilson </a> <pan> 20:17 ขอบคุณ. จะตรวจสอบทันที </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript:; </span> </div> </div> <div> <img src = "~/เนื้อหา/ทรัพย์สิน/ผู้ดูแลระบบ/เลย์เอาต์/img/avatar3.jpg"/> <div> <pan> </span> <a href = "Javascript:;"> Bob Nilson </a> ฉันจะตรวจสอบและส่งเสียงพึมพำคุณหากมีสิ่งใดที่จำเป็นต้องได้รับการแก้ไข </span> </div> </div> </div> </div> </div> <อินพุตประเภท = "text" placeholder = "พิมพ์ข้อความที่นี่ ... "> <div> <button type = "ปุ่ม"> <i> </i> </button> </div> </div> id = "quick_sidebar_tab_2"> <div> <h3> ทั่วไป </h3> <ul> <li> <li> <div> <div> <div> <div> <div> <ive> <i> </i> </div> </div> <div> <div> <span> ดำเนินการ <i> </i> </span> </div> </div> </div> </div> </div> </div> </div> <div> ตอนนี้ </div> </li> <li> <a href = "Javascript:; </div> </div> </div> </div> </div> </div> <div> <div> 20 นาที </div> </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </div> </div> </div> </div> </div> </div> <div> 24 นาที </div> </li> <li> <li> <li> <div> <div> <div> <div> <ive> </div> </div> </div> </div> </div> </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> คุณมีสมาชิก 5 คนที่รอการตรวจสอบอย่างรวดเร็ว </div> </div> </div> </div> </div> <div> <div> 24 นาที </div> </li> <li> <li> <div> <div> <div> <div> <ive> <i> </i> </div> </div> <span> overdue </span> </div> </div> </div> </div> </div> </div> <div> <div> 2 ชั่วโมง </div> </li> <li> <a href = "JavaScript:;"> <div> </div> </div> </div> </div> </div> </div> <div> <div> 20 นาที </div> </a> </li> </ul> <h3> ระบบ </h3> <ul> <li> <li> <div> <div> <span> ดำเนินการ <i> </i> </span> </div> </div> </div> <div> คุณมีงานที่รอดำเนินการ 4 <span> ดำเนินการ <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> ตอนนี้ </div> </li> <li> <a href = "JavaScript:;"> <div> <div> </div> </div> </div> </div> </div> </div> <div> <div> 20 นาที </div> </a> </li> <li> <li> <li> <li> <li> <div> <div> <div> <div> <div> <ive> <i> </i> </div> </div> </div> </div> <div> <div> 24 นาที </div> </li> <li> <li> <div> <div> <div> <div> <ive> </iD> </div> </div> </div> </div> </div> <div> <div> 30 นาที </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> คุณมีสมาชิก 5 คนที่รอการตรวจสอบอย่างรวดเร็ว </div> </div> </div> </div> <div> <div> 24 นาที </div> </li> <li> <li> <div> <div> <div> <div> <ive> <i> </i> </div> </div> </div> <span> overdue </span> </div> </div> </div> </div> </div> </div> <div> 2 ชั่วโมง </div> </li> <li> <a href = "JavaScript:;"> <div> <div> <div> <i> </i> </i> </div> </div> </div> </div> </div> </div> <div> 20 นาที </div> </a> </li> </ul> </div> </div> </div> </div> <div> <div> </div> </a> </ul> <h3> การตั้งค่าทั่วไป </h3> <ul> <li> เปิดใช้งานการแจ้งเตือน <อินพุตประเภท = "ช่องทำเครื่องหมาย" data-size = "ขนาดเล็ก" data-on-color = "ความสำเร็จ" data-on-text = "on" data-off-color = "data-text-text-text =" Off " data-on-text = "บน" data-off-color = "default" data-off-text = "OFF"> </li> <li> บันทึกข้อผิดพลาด <อินพุตประเภท = "ช่องทำเครื่องหมาย" ตรวจสอบ data-size = "ขนาดเล็ก" data-on-color = "Danger" Data-on-text = "Data-Off-Color = data-on-color = "คำเตือน" data-on-text = "on" data-off-color = "default" data-off-text = "Off"> </li> <li> เปิดใช้งานการแจ้งเตือน SMS <อินพุตประเภท = "ช่องทำเครื่องหมาย" data-size = "data-on-color =" Success "Data-OlD <h3> การตั้งค่าระบบ </h3> <ul> <li> ระดับความปลอดภัย <elect> <ตัวเลือกค่า = "1"> ปกติ </ตัวเลือก> <ตัวเลือกค่า = "2" เลือก> สื่อ </ตัวเลือก> <ตัวเลือกค่า = "e"> สูง </optial> </select> </li> <li> <li> แจ้งข้อผิดพลาดของระบบ <อินพุต type = "ช่องทำเครื่องหมาย" data-size = "เล็ก" data-on-color = "danger" data-on-text = "บน" data-off-color = "default" data-off-text = "ปิด"> </li> <li> data-off-color = "default" data-off-text = "ปิด"> </li> </ul> <div> <button> <i> </i> บันทึกการเปลี่ยนแปลง </button> </div> </div> </div> </div> </div> </div> </div> <div> 2014 © Metronic โดย Keenthemes </div> <div> <i></i> </div> </div> <!-- END FOOTER --> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <!--[if lt IE 9]> <script src="~/Content/assets/global/plugins/respond.min.js"></script> <script src="~/Content/assets/global/plugins/excanvas.min.js"></script> <![endif]--> <script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="~/Content/assets/global/scripts/meteronic.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/tasks.js" type="text/javascript"></script> <!-- END PAGE LEVEL SCRIPTS --> <script>jQuery(document).ready(function() { Metronic.init(); // init metronic core components Layout.init(); // init layout QuickSidebar.init(); // init quick sidebarDemo.init(); // init demo features Index.init(); Index.init layout display Daterange(); Index.initJQVMAP(); // init index page's custom scripts Index.initCalendar(); // init index page's custom scripts Index.initCharts(); // init index page's custom scripts Index.initChat(); Index.initMiniCharts(); Tasks.init layout display Widget();}); </script> <!-- END JAVASCRIPTS --></body><!-- END BODY --></html>再次提取菜单代码
<li> <a href="javascript:;"> <i></i> <span>Multi Level Menu</span> <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Item 1 <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Sample Link 1 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 2</a> </li> <li> <a href="#"><i></i> Sample Link 3</a> </li> </ul> </li> <li> <a href="javascript:;"> <i></i> Item 2 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"> <i></i> Item 3 </a> </li> </ul> </li>
大约在466行-529行
分析上面html可以看出，li包含ul循环调用。所以我们用递归读取菜单
5.拼接菜单栏
创建Home视图Index.cshtml并应用_Layout.cshtml
Bootstrap Metronic并菜单没有提供Ajax模式，我们只能读取数据拼接HTML
过程：读取数据表数据递归调用
using App.Models; using System; ใช้ 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 มากขึ้น