이전 기사를 계속하고 Bootstrap Metronic 메뉴 표시 줄에서 편집 한 메모를 참조 할 수 있도록 공유하십시오. 특정 내용은 다음과 같습니다
1. 소개
1). 환경 구성
2). 페이지를 추출하십시오
3). 동적으로 메뉴를 생성 (무제한 레벨 트리)
2. 시스템 환경 구성
이 프로젝트에는 프로그램 데이터 지원이 필요합니다. 여기서 MVC5.0+EF6.0 [SQLSERVER]이 선택되었습니다 (MVC 아키텍처 및 SQLServer의 해석 없음)
실행 환경 : VS2013+MVC5.0+EF6.1+SQLSERVER2012
솔루션 이름 : AppSolution 프로젝트 이름 : App.Web (UI Layer) 및 App.Models (데이터 액세스 계층) - 직접 액세스 모드
테마 아래의 모든 파일을 MVC 컨텐츠로 추출하고 index.html of adml을 _layout.cshtml로 추출하여 변환 준비를 준비합니다.
3. 데이터베이스 및 테이블을 만듭니다
데이터베이스 : AppDatabase
다음 데이터 테이블을 작성하고 appdb.edmx를 만듭니다
[AppDatabase] go/****** 객체 : 테이블 [dbo]. 키 ID [이름] [varchar] (50) null, -menu name [parentid] [varchar] (50) null, -super id [url] [varchar] (200) null, -url [varchar] (200) null, --iconic [sort] [int] null, -sort [enable] [bit] [bit] [datetime] [Islast] [Bit] NOT NULL- 마지막 항목 제약 조건 [PK_SYSMODULE] 1 차 키 클러스터 ([id] ASC)가 (pad_index = Off, Statistics_noreCompute = Off, ingore_dup_key = Off, allow_row_locks = on, alling_page_locks = on) on [1 차] onsi_padding ansi_padding ansi_padding [DBO].
인공 데이터
[sysmodule] ([id], [name], [parentid], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '0', 'root', 'root', 'index', 'icon-settings', null, 0, null, 0) [Sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '1', '1 차 메뉴 01', '0', 'Index', 'Icon-settings', null, 0, null, 0) 삽입 [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '11', '1 차 메뉴 01-01', '1', 'index', 'icon-settings', null, 0, null, 0) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '111', '3 레벨 메뉴 01-01-01', '11', 'INDEX', 'ICON-LINK', NULL, 0, NULL, 1) [SYSMODULE] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '112', '레벨 3 메뉴 01-01-02', '11', 'index', 'icon-settings', null, 0, null, 1) [SysModule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '12', '레벨 2 메뉴 01-02', '1', '색인', 'Icon-link', null, 0, null, 1) [sysmodul] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '13', '2 단계 01-03', '1', 'index', 'icon-link', null, 0, null, 1) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '2', '1 차 메뉴 02', '0', '색인', 'Icon-settings', null, 0, null, 0) insert inter [sysmodul] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '21', '1 차 메뉴 02-01', '2', 'index', 'icon-settings', null, 0, null, 0) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '211', '레벨 3 메뉴 02-01-01', '5', 'index', 'icon-link', null, 0, null, 1) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '212', '레벨 3 메뉴 02-01-02', '5', 'index', 'icon-link', null, 0, null, 1) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '22', '레벨 2 메뉴 02-02', '2', 'index', 'icon-link', null, 0, null, 1) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '23', '2 단계 메뉴 02-03', '2', 'INDEX', 'ICON-LINK', NULL, 0, NULL, 1) [sysmodul] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '3', '1 차 메뉴 03', '0', 'index', 'icon-settings', null, 0, null, 0) 삽입 [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '31', '1 차 메뉴 03-01', '3', '인덱스', 'Icon-settings', null, 0, null, 0) [sysmodul] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '311', '레벨 3 메뉴 03-01-01', '31', 'INDEX', 'ICON-LINK', NULL, 0, NULL, 1) [SYSMODULE] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '312', '레벨 3 메뉴 03-01-02', '31', 'index', 'icon-link', null, 0, null, 1) [Sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '32', '레벨 2 메뉴 03-02', '3', 'INDEX', 'ICON-LINK', NULL, 0, NULL, 1) [SYSMODUL] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '33', '2 단계 메뉴 03-03', '3', 'INDEX', 'ICON-LINK', NULL, 0, NULL, 1) [SYSMODUL] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '4', '1 차 메뉴 04', '0', 'Index', 'Icon-settings', null, 0, null, 0) insert inter [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [islast]) 값 ( '41', '1 차 메뉴 04-01', '4', 'index', 'icon-link', null, 0, null, 1) [sysmodule] ([id], [name], [url], [iconic], [sort], [enable], [createTime], [Islast]) 값 ( '42', '2 단계 메뉴 04-02', '4', '인덱스', 'Icon-Link', NULL, 0, NULL, 1) (22 줄에 영향을 받음)
4. 중요한 페이지 레이아웃을 추출하십시오
우리는 백엔드 시스템이므로 상단을 유지합니다. 왼쪽 메뉴와 발 3 부분
추출했는데 복사하십시오
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <title> metronic | 레이아웃 디스플레이 < /title> <meta http-equiv = "x-ua-catsible"content = "ie = edge"> <meta content = "width = device-width, initial-scale = 1"name = "viewport" /<meta content = ""name = "descrip" /> <meta content = ""author " /> <link href = "~/content/assets/global/plugins/font-awesome/css/font-awemen.min.css"rel = "Stylesheet"type = "text/css"/> <link href = "~/content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css"stylesheet ""/css " <link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min.css"rel = "Stylesheet"type = "text/css"/> <link href = "~/content/assets/global/uniform/css/uniform.default.css"rel = "type" "type" "" href = "~/컨텐츠/자산/글로벌/플러그인/bootstrap-switch/css/bootstrap-switch.min.css"rel = "stylesheet"type = "text/css"/> <!-엔드 글로벌 필수 스타일-> <!-페이지 레벨 플러그인 스타트-> <링크 href = "~/content/assets/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css"rel = "Stylesheet"type = "text/css"/<link href = "~/content/assets/global/plugins/fullcalendar/fullcalendar.min.css"stylesheet ""type ""typ "" "type" "" href = "~/content/assets/global/plugins/jqvmap/jqvmap.css"rel = "stylesheet"type = "text/css"/> <!-엔드 페이지 레벨 플러그인 스타일-> <!-페이지 스타일 시작-> <link href = "~/content/acsets/admin/css/css/taskss.cs"rel = "" "" ""rel = "" " 유형 = "text/css"/> <!-엔드 페이지 스타일-> <!-테마 스타일 시작-> <link href = "~/content/assets/assets/assets/csss.css"id = "style_components"rel = "stylesheet"type = "text/css"/> <link href = "~/content/acsets/css/css. Rel = "Stylesheet"type = "text/css"/> <link href = "~/content/assets/admin/layout/css/layout.css"rel = "stylesheet"type = "text/css"/> <link href = "~/content/assets/admin/layout/css/css/teses/darkblue.css"stylesheet ". 유형 = "text/css"id = "style_color"/> <link href = "~/content/assets/admin/layout/css/custom.css"rel = "stylesheet"type = "text/css"/> <!-종료 테마 스타일-> 링크 rel = "shortcut icon"href = "favicon. -> <div> <!-헤더 내부 시작-> <div> <!-시작 로고 시작-> <div> <a href = "index.html"> <img src = "~/content/assets/admin/layout/img/logo. href = "JavaScript :;" Data-Toggle = "Collapse"Data-Target = ". Navbar-Collapse"> </a> <!-End Responsive Menu Toggler-> <!-시작 최고의 탐색 메뉴-> <div> ul> <!-알림 DROPDOWN-> <!-DOC : "DropDown-Dark"클래스 "Dropdown-Extended"-> <li id = "id ="id = "id ="head extended "> <a href = "JavaScript :;" data-toggle = "dropdown"data-hover = "dropdown"data-close-fothers = "true"> <i> </i> <span> 7 </a> <ul> <li> <h3> <span> 12 보류 </span> 알림 </h3> <a href = "extra_profile.html"> </li>> <li>>>> <li>>> <li>> <li>> <li> <li> <li> <li>> 250px; " data-handle-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 HRS </span> <span> <span> <i> </i> </span> 응용 프로그램 오류. </span> </a> </li> <li> <a href = "javaScript :;"> <span> 2 일 </span> <span> <span> </i> </span> 데이터베이스에 68%가 과부하되었습니다. </span> </a> </li> <li> <a href = "javaScript :;"> <span 3 일 </span> <span> <span> </i> </span> 사용자 IP가 차단되었습니다. </span> </a> </li> <li> <a href = "javaScript :;"> <span> 4 일 </span> <span> <span> </i> </span> 스토리지 서버 #4 DFDFDFD에 응답하지 않습니다. </span> </a> </li> <li> <a href = "javaScript :;"> <span> 5 일 </span> <span> </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> <!-- END NOTIFICATION DROPDOWN --> <!-- BEGIN INBOX DROPDOWN --> <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --> <li id="header_inbox_bar"> <a href = "JavaScript :;" data-toggle = "dropdown"data-hover = "dropdown"data-close-fothers = "true"> <i> </i> <span> 4 </a> <ul> <li> <h3> 당신은 <ul> <li> <h3> 당신은 <span> 7 new </span> 메시지 </h3> <a href = "page_inbox.html"> </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </li> </li>. data-handle-color = "#637283"> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/content/assets/admin/layout3/img/avatar2.jpg"> </span> <span> ww wong> <span> </span> </span> </span> </span> auctor nibh congue nibh.auctor nibh auctor nibh ... </span> </a> </a> <li> <in inbox.html? a = view "> <span> <img src ="~/content/assets/admin/layout3/img/avatar3.jpg "> <span> <span> <span> <span> <span> 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> <span> bob nilson </span> </span> </span> </span> </span> </span> <span> vivamus sed nibh autor nibh congue nibh. Auto NIBH Auto Nibh ... </span> </a> </li> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/content/assets/admin/layout3/img/avatar2.jpg"> </span> </span span> lisa </span> 40 span> <Span> vivamus sed auto 40% nibh conge nibh ... </span> </li> <li> <a href = "inbox.html? a = view"> <span> <img src = "~/content/assets/admin/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> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <! <! <!-doc : doc : "dropdown-dark"클래스 아래 "Dropdown-dark"클래스 "dropdown-extended"-<li id = "header _ a a a ader extastended". href = "JavaScript :;" data-toggle = "dropdown"data-hover = "dropdown"data-close-fothers = "true"> <i> </i> <span 3 </span> </a> <ul> <li> <h3> 당신은 <span> 12 pending </h3> <a href = "page_todo.html"> <li> <li>>>>> <li>>> <li>> <li> <li> <li> <li> <li stye </h3> </h3>가 있습니다. 275px; " data-handle-color = "#637283"> <li> <a href = "javaScript :;"> <span> <span> 새로운 릴리스 v1.2 </span> <span 30%</span> <span> <span> <span> <span> 응용 프로그램 배치 </span> <cpan> 65%</span> <span> <span> <aria-valuenow " aria-valuemin = "0"aria-valuemax = "100"> <span> 65%완료 </span> </span> </span> </a> </li> <li> <a href = "javaScript :;"> <span> <pan> <pan> <pan span> <span> <span> <span> <span> <span> <span> <span> < <pan> <span> <span> <span> 98%</span> </span> <span> <span> <span> <span> 데이터베이스 마이그레이션 </span> <span> 10%</span> </span> <span> <span aria-valuenow = "10"aria-valuemin = "0"aria-valuemax = "100"> 10%완료> </span> <10%완료> </span>. </a> </li> <li> <a href = "javaScript :;"> <span> <span> 웹 서버 업그레이드 </span> <span> 58%</span> </span> <span> <span> 웹 서버 업그레이드 </span> <span> 58%</span> </span> <span> <span aria-valuenow = "58"ARIA-VALI aria-valuemax = "100"> <span> 58% 완료 </span> </span> </span> </a> <li> <a href = "javaScript :;"> <span> <span> <span> 모바일 개발 </span> <span> 85% </span> </span> <span aria-valuenow = "85" "" "Aria-valuem aria-valuemax = "100"> <span> 85% 완료 </span> </span> </li> <li> <a href = "javaScript :;"> <span> <span> 새로운 UI 릴리스 </span> <span> 38% </span> </span> <span> <span> span> aria-valuemin = "0. aria-valuemax = "100"> <span> 38% 완료 </span> </span> </span> </a >> </li> </ul> </li> </li> </li> </li> </li> </li> <! <!-- hogin tho gogin dropdown-> <!-DOC는 "Dropdown-than on"ton-down-the "on" 드롭 다운 스티트 -> <li> <a href = "javaScript :;" data-toggle = "dropdown"data-hover = "dropdown"data-close-fothers = "true"> <img src = "~/content/assets/admin/layout/img/avatar3_small.jpg"/> <span> nick </span> <i> </i> </a> <ul> <li> <a href = "extrapile.html.html. </a> </li> <li> <a href = "page_calendar.html"> <i> </i> 내 캘린더 </a> </li> <li> <a href = "page_calendar.html"> <i> </i> 내 Calendar </a> <li> <a href = "inbox. 내받은 편지함 <span> 3 </span> </a> </a> <li> <a href = "page_todo.html"> <i> </i> 내 작업 <span> 7 </span> </a> <li> </li> <li> <a href = "extra_lock.html"> </i> </i> </i> </i> href = "login.html"> <i> </i> 로그 아웃 </a> </ul> </li> </li> <!-최종 사용자 로그인 드롭 다운-> <!-빠른 사이드 바 토글-> <!-doc : "Dropdown-Dark"클래스를 아래에서 "Dropdown-Extended"다음에 적용하여 Dropdown Styte를 변경하기 위해 "dropdown-dark"클래스를 적용하십시오. <i> </i >> </a> <!-종료 퀵 사이드 바 토글-> </ul> </div> <!-종료 상단 탐색 메뉴-> </div> <!-엔드 헤더 내부-> </div> <!-엔드 헤더-> <div> </div> <!-divbar-> <! <! <! 자동 스크롤/포커싱에서 사이드 바를 비활성화하려면 Data-Auto-Scroll = "False"-> <!-doc : data-auto-speed = "200"하위 메뉴를 조정하려면 하위 메뉴 슬라이드 업/다운 속도-> <div> <!-<!-doc : "Page-Menu-Light"클래스 (Page-Sidebar-Menu)에 적용하십시오. <!-doc : "Page-SideBar-Menu-Hover-Submenu"클래스 "Page-SideBar-Menu"직후에 "Page-SideBar-Menu"를 사용하여 Hoverable (Hover vs a Sub a Sub Menu) 모드-> <!-Doc : "Page-SideBar-Menu-Closed"클래스 "를 적용한"Page-SideBar-Menu "클래스"에 붕괴에 적용됩니다. <!-doc : set data-auto-scroll = "dals Data-Slide-Speed = "200"> <!-Doc : 사이드 바에서 사이드 바 토글러를 제거하려면 아래의 "Sidebar-Toggler-Wrapper"Li Element-> <li> <!-시작 Sidebar 토글 버튼 시작을 완전히 제거해야합니다.> <div> </div> <!-종료 사이드 바 토글 버튼-> <!-- 아래에서 검색 상자를 완전히 제거해야합니다. "Sidebar-Search-Wrapper"Li element-> <li> <a href = "javaScript :;"> <i> </i> <span> 멀티 레벨 메뉴 </span> <span> </span> </a> <ul> <li> <a href = "javascript :;"> <i> </i> </i> </<li> <ul>> href = "javaScript :;"> <i> </i> 샘플 링크 1 <Span> </span> </a> <ul> <li> <a href = "#"> <i> </i> 샘플 링크 1 </a> <li> <a 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> 샘플 링크 1 </a> </li> </li> <li> <a href = "#"> <> <#"> 1 </a> </li> <li> <a href = "#"#"> <i> </i> 샘플 링크 2 </a> </li> <li> <a href ="#"> <i> </i> 샘플 링크 3 </li> </li> </li> <li> <a href ="#">> </li> </li> </li> </li> </li> </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> </i> 샘플 링크 1 </a> <a href =#">> <a href = <#"> <li> 링크 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> 항목 3 </a> </li> </li> </li> </li> </li> <!-종료 사이드 바 메뉴-> </div> </div> <!-END SMALIE->-<div> <! 모달 양식-> <div id = "portlet-config"tabindex = "-1"role = "대화 상자"aria-labelledby = "mymodallabel"aria-hidden = "true"> <div> <div> <div> <버튼 = "button"data-dismiss = "modal"aria-hidden = "true"> <h4> <h4> title <h4> 위젯 설정 양식이 여기로 이동 </div> <div> <버튼 유형 = "버튼"> 변경 저장 </button> <버튼 유형 = "버튼"버튼 "data-dismiss ="modal "> close </button> </div> </div> <!-/.modal-fontent-> </div> <!-/.modal-dialog --> <!-/. <!-시작 스타일 커스터마이저-> <div> <div> </div> <div> </div> <div> <div> <div> <div> <div> <span> 테마 색상 </span> <ul> <li data-style = "default"data-container = "body"data-original-title = "default"> </li> <li data-style = "darkblue"> body-riginal-tite "" "DARKBLUE"> </li> <li data-style = "blue"data-container = "body"data-original-title = "blue"> </li> <li data-style = "grey"data-container = "body"data-original-title = "Grey"> </li> <li data-style = "light"data-container = "body-original-tittle = </li> </li> </li. data-style = "light2"data-container = "body"data-html = "true"data-original-title = "light 2"> </li> </ul> </div> <div> <span> 테마 스타일 </li> <span> <옵션 값 = "square"selected = "selected"> square corners </옵션> <옵션 value = "옵션 </select> </select> </select> <Span> Layout </span> <select> <옵션 값 = "fluid"selected = "selected"> fluid </옵션> <옵션 값 = "boxed"> boxed </옵션> </select> </div> <div> <span header </span> <select> <선택 값 = "selected ="selected "</select> <default"> default "> default"> 옵션 "> <Span> 상단 메뉴 드롭 다운 </span> <select> <옵션 값 = "light"selected = "selected"> light </옵션> <옵션 value = "dark"> dark </옵션> </select> </div> <div> <span> 사이드 바 모드 </span> <select> <옵션 value = "고정"> 옵션> <옵션 value ""selefault ""selected ""default </select> <Span> 사이드 바 메뉴 </span> <select> <옵션 값 = "Accorion"selected = "selection"> Accordion </옵션> <옵션 값 = "호버"> 호버 </옵션> </select> </div> <div> <span sidebar style </span> <옵션 값 = "default"selected = "selected"> <옵션> <옵션> <옵션> <옵션> selected = "selected"> default </옵션> <옵션> <옵션 값 = "기본"selected = "selected"> default </옵션> <옵션> <옵션 값 = "light"> light "> light"> light "> light </옵션> </div> <div> <span> 사이드 바 위치 </span> <select> <옵션 value ="select </옵션 "> 옵션> <옵션> </div> <div> <span> 바닥 글 </span> <select> <옵션 값 = "고정"> 고정 "> 고정 </옵션> <옵션 값 ="default "selected ="select "> default </옵션> </select> </div> </div> <!-엔드 스타일 사용자 정의-> <!-시작 페이지-> <div> <ul> <li> </i> <a> <a> href = "index.html"> home </a> </a> </a> </a> </i> </li> <li> <a href = "#"> 레이아웃 </a> </li> </ul> </div> <h3> 레이아웃 <small> 보고서 및 통계 </small> </h3> <!-끝 페이지 헤드러->-end sats--> @rende stats (> @rende stats). <div> </div> </div> </div> <!-엔드 컨텐츠-> <!-Quick Sidebar-> <a href = "javaScript :"> <i> </i >> <div> <ul> <li> <a href = "#Quick_bar_Tab_1"Data-Toggle = "abs"> 2 </span> 2 span> 2 </<li>> <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 역할 = "menu"> <li> <a href = "#quick_sidebar_tab_3"data-toggle = "tab"> <i> </i> 알림 </a> </li> <li> <a href = "#quick_bar_tab_3"toggle = ">--toggle ="#Quick_sideBar_tab_3 "toggle. 알림 </a> </li> <li> <a href = "#Quick_sideBar_Tab_3"data-toggle = "tab"> </i> 활동 </a> </li> <li> <a href = "#Quick_sideBar_Tab_3"data-toggle = "tab"> <i> </li> <li>> <li>> <li>> <li>> href = "#quick_sidebar_tab_3"data-toggle = "tab"> <i> </i> 설정 </a> </li> </li> </li> </li> </ul> </li> </ul> <div> <div id = "Quick_sideBar_Tab_1"> <div data-rail-color = "#ddd"#quick side "page-wrapperclass ="#ddd " <h3> 직원 </h3> <ul> <li> <li> <li> <div> <span> 8 </span> </div> <img src = "~/content/assets/admin/admin/layout/img/avatar3.jpg"> <div> <h4> bob nilson </h4> <div> 프로젝트 관리자 </div> <li> <li> <li> <li> <li> 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/acsets/admin/infg/amg/avatar4.jpg. Hubert </h4> <div> cto </div> </li> <li> <li> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"> <div> <h4> Ella wong </h4> <div> ceo </div> </li> <h3> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </div> <img src = "~/content/assets/admin/admin/layout/img/avatar6.jpg"> <div> <h4> Lara Kunis </h4> <div> CEO, Loop Inc </div> <div> <div> 마지막으로 03:10 am </div> </li> <li> <im> </div> </li div> <div> src = "~/content/assets/admin/layout/img/avatar7.jpg"> <div> <h4> Ernie Kyllonen </h4> <div> 프로젝트 관리자, <br> smartbizz ptl </div> </div> </li> <li> <li> <img src = "~/content/action/admin/layout/avatar8.jp" <H4> Lisa Stone </h4> <div> CTO, Keort Inc </div> <div> 마지막으로 본 13:10 pm </div> </div> </li> <li> <liv> <span> 7 </div> <img src = "~/content/Assets/admin/layout/img/avatar9.jpg"> <div> <h4> deon -deon -deon -poralatin 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 </li> <div> 4 </span> 4> src = "~/content/assets/admin/layout/img/avatar11.jpg"> <div> <h4> Maria Gomez </h4> <div> Manager, Infomatic Inc </div> <div> 마지막으로 본 03:10 am </div> </div> </li> </div> <div> <div> <A href = "javaScript :;"> <i> </i> b 저에게 보고서를 보내시겠습니까? </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript :;"> Ella wong </a> <span> 20:15 </span> <span> 거의 완료되었습니다. 곧 </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/amg/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> 20:15 </span> <span> <a href = " 감사해요! :) </span> </div> </div> <div> <IMG SRC = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript :;"> ela wong </a> <span> 20:16 </span> <span>. 지연 죄송합니다. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:17 </span> no prob. 시간을내어 :) </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript :;"> ela wong </a> <span> 20:40 </span> <span> 알겠습니다. 방금 이메일을 보냈습니다. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:17 </span> great! 감사해요. 바로 확인합니다. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javaScript :;"> ella wong </a> 20:40 </span> <span> 당신이 의견을 알려주십시오. </span> </div> </div> <div> <img src = "~/content/assets/admin/layout/img/avatar3.jpg"/> <div> <span> </span> <a href = "javascript :;"> bob nilson </a> <span> 20:17 </span> span> 확실합니다. 무엇이든 수정 해야하는 경우 확인하고 윙윙 거릴 것입니다. </span> </div> </div> </div> </div> <div> <입력 유형 = "text"placeholder = "여기에 유형 A 메시지 ..."> <div> <버튼 유형 = "button"> <i> </i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> id = "Quick_sideBar_Tab_2"> <div> <h3> 일반 </h3> <ul> <li> <li> <li> <div> <div> <div> <div> <div> <i> </i> </div> <div> <div> 4 보류 작업이 있습니다. <Span> 테이크 action <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> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div> 20 분 </div> </a> </li> <li> <li> <div> <div> <div> <i> </i> </div> </div> <div> <div> 빠른 검토가 필요한 5 보류 회원이 있습니다. </div> </div> </div> </div> </div> <div> <div> <div> <div> 24 분 </div> </li> <li> <li> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> 빠른 검토가 필요한 5 명의 보류중인 회원이 있습니다. </div> </div> </div> </div> </div> <div> <div> <div> 24 분 </div> </li> <li> <li> <div> <div> <div> <div> <i> </i> </div> </div> <div> <i> </i> </div> </div> <biv> 웹 서버 hardware가 업그레이드되어야합니다. <span> Overdue </span> </div> </div> </div> </div> </div> </div> <div> <div> 2 hours </div> </li> <li> <a href="javascript:;"> <div> <div> <div> <div> <div> <i></i> </div> </div> <div> <div> IPO Report for year 2013 has been released. </div> </div> </div> </div> </div> </div> <div> <div> 20 분 </div> </a> </li> </ul> <h3> 시스템 </h3> <ul> <li> <li> <div> <div> <div> <div> <i> </i> </div> </div> </div> </div> </div> <span> 테이크 action <i> </i> </span> </div> </div> </div> <div> 4 번의 보류 작업이 있습니다. <span> take action <i> </i> </span> </div> </div> </div> </div> </div> <div> <div> 지금 </div> </li> <li> <a href = "javaScript :;"> <div> <div> <div> <div> <div> </i> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div> 20 분 </div> </a> </li> <li> <li> <div> <div> <div> <div> <i> </i> </div> </div> <div> </i> </div> </div> </i>는 빠른 검토가 필요한 5 보류 회원이 있습니다. </div> </div> </div> </div> <div> <div> 24 분 </div> </li> <li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <span> 참조 번호로받은 새로운 순서 : dr23923 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div> 30 분 </div> </li> <li> <li> <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> <i> </i> </div> </div> <div> <div> <i> </i> </div> <div> 웹 서버가 업그레이드되어야합니다. <span> 기한 </span> </div> </div> </div> </div> </div> </div> <div> 2 시간 </div> </li> <li> <a href = "javaScript :;"> <div> <div> <div> <div> <div> <div> <div> <div> <div> IPO 보고서가 발표되었습니다. </div> </div> </div> </div> </div> </div> <div> </div> 20 분 </div> </a >> </li> </ul> </div> </div> </div> <div> <div> 20 분 </div> </a> </aD> </ul> </div> </div> <Quick_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar_bar. <h3> 일반 설정 </h3> <ul> <li> 알림 활성화 <입력 유형 = "확인란"확인 된 데이터 크기 = "Small"Data-on-Color = "Small"Data-on-Text = "on Data-Off-Color ="Data-Off-On-on-Text = ""Data-Off-Color = "Default"Data-Off-Text = "Off"> </li> <li> 추적 <입력 유형 = "check-recize"Small "Data-On Data-On"Info " data-on-text = "on"on "data-off-color ="default "data-off-text ="off "> </li> <li> 로그 오류 <input type ="input type = "checkbox"checked data-size = "small"data-on-color = "danger"data-on-text = "on"data-off-color = "default"data-off-text = "off"> <li> data-size = "small"data-on-color = "경고"data-on-text = "on"data-off-color = "default"data-off-text = "off"> </li> <li> sms 알림 활성화 <입력 유형 = "checkbox"checked data-size = "small"data-on-color = "success"data-on-text = "on" ""data-off-color = ""data-off-let "> </ul> <h3> 시스템 설정 </h3> <ul> <li> 보안 수준 <select> <옵션 값 = "1"> 정상 </옵션> <옵션 값 = "2"selected> medium </옵션> <옵션 value = "e"> high </옵션> </li> <li> 실패한 이메일 <input value = "5"/Li> /> </li> <li> 시스템 오류 <입력 유형 = "checkbox"checked data-size = "small"data-on-color = "danger"data-on-text = "on"data-off-color = "default"data-off-text = "off"> </li> <li> smtp 오류 <input type = "checked data-kize ="small ""weent " data-off-color = "default"data-off-text = "off"> </li> </ul> <div> <button> <i> </i> 변경 사항 저장 </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-end quick streadbar-> </div artoner-> <! <div> <div> 2014 © Keenthemes의 Metronic. </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을 더 지원하기를 바랍니다.