Продолжайте с предыдущей статьей, поделитесь примечаниями, скомпилированными из Bootstrap Metronic Menu Bar с вами для вашей ссылки. Конкретный контент заключается в следующем
1. Введение
1). Конфигурация окружающей среды
2). Исключите страницу
3). Динамически генерировать меню (неограниченное дерево уровня)
2. Конфигурация системной среды
Проект требует поддержки данных программы, здесь выбран MVC5.0+EF6.0 [SQLServer] (не интерпретация архитектуры MVC и SQLServer)
Работая среда: VS2013+MVC5.0+EF6.1+SQLSERVER2012
Имя решения: Имя проекта Appsolution: app.web (ui -уровень) и app.models (уровень доступа данных) - режим прямого доступа
Извлеките все файлы по теме в контент MVC, извлеките index.html and admin в _layout.cshtml, чтобы подготовиться к преобразованию
3. Создание баз данных и таблиц
База данных: AppDatabase
Создайте следующую таблицу данных и создайте appdb.edmx
Используйте [appdatabase] go/****** Объект: Таблица [DBO]. идентификатор ключа [name] [varchar] (50) не нулевой, -меню имя [parentId] [varchar] (50) NULL, -SUPER ID [url] [VARCHAR] (200) NULL, -URL [ICONIC] [VARCHAR] (200) NULL, -ИКОНИЧЕ [ISlast] [bit] не null -IS последнее ограничение элемента [pk_sysmodule] кластеризованная первичная ключа ([id] asc) с (pad_index = off, statistics_norecompute = off, ignore_dup_key = off, allow_row_locks = on, allow_page_locks = on) на [первичный]) [dbo].
Искусственные данные
Вставьте в [sysmodule] ([id], [name], [parentId], [url], [iConic], [sort], [inable], [createTime], [Islast]) значения ('0', 'root', 'root', 'index', 'установки икона', null, 0, null, 0), введенный в [sysmodupting ', null, 0, null, 0). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('1', «Первичное меню 01 ',' 0 ',' index ',' sticon-leting ', null, 0, null, 0) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('11', «Первичное меню 01-01 ',' 1 ',' index ',' sticons ', null, 0, null, 0) Insert in Insert in to [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('111', «Трехровневое меню 01-01-01 ',' 11 ',' index ',' icon-link ', null, 0, null, 1) ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('112', «Меню уровня 3 01-01-02 ',' 11 ',' index ',' seettings stects ', null, 0, null, 1). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('12', «Меню уровня 2 01-02 ',' 1 ',' index ',' icon-link ', null, 0, null, 1) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('13', «второй уровень 01-03 ',' 1 ',' index ',' icon-link ', null, 0, null, 1) вставьте в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('2', «Первичное меню 02 ',' 0 ',' index ',' sticon-letting ', null, 0, null, 0) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('21', «Первичное меню 02-01 ',' 2 ',' index ',' stecttings ', null, 0, null, 0) Insert в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('211', 'Menu 3-й уровне 02-01-01', '5', 'index', 'Icon-Link', Null, 0, Null, 1). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('212', «Меню уровня 3 02-01-02 ',' 5 ',' index ',' Icon ', Null, 0, Null, 1). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('22', «Меню уровня 2 02-02 ',' 2 ',' index ',' icon-link ', null, 0, null, 1) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('23', «Меню второго уровня 02-03», '2', 'index', 'icon-link', null, 0, null, 1) Insert в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('3', «Первичное меню 03 ',' 0 ',' index ',' letings ', null, 0, null, 0) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('31', «Первичное меню 03-01 ',' 3 ',' index ',' letingtings ', null, 0, null, 0). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('311', 'Menu 3-03-01-01', '31', 'index', 'Icon', Null, 0, Null, 1). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('312', «меню уровня 3 03-01-02 ',' 31 ',' index ',' Icon ', Null, 0, Null, 1). ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('32', «Меню уровня 2 03-02 ',' 3 ',' index ',' icon-link ', null, 0, null, 1) Insert в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [iSlast]) значения ('33', «Меню второго уровня 03-03 ',' 3 ',' index ',' icon-link ', null, 0, null, 1) Insert in Insert в [sysmodule] ([Id], [name], [parentId], [url], [iConic], [sort], [enable], [createTime], [iSlast]) значения ('4', «Первичное меню 04 ',' 0 ',' index ',' sticon-letting ', null, 0, null, 0) внедрение в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('41', «Первичное меню 04-01 ',' 4 ',' index ',' icon-link ', null, 0, null, 1) Insert в [sysmodule] ([Id], [name], [parentId], [url], [Iconic], [sort], [enable], [createTime], [Islast]) значения ('42', «Меню второго уровня 04-02 ',' 4 ',' index ',' 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-совместимый" content = "ie = edge"> <meta content = "width = width device, начальная шкала = 1" name = "viewport" /> <meta content = "" name = "description" /> <meta content = "" name = " /> <link =" name = " /> <meta =" "name =" /> < href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href = "~/content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "stylesselepe" type = "text/css"/> <link href = "~/content/assets/global/plugins/uniform/css/uniform.default.csss" rel = "lelsheet"/css/css/css/css/css/css. href = "~/content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel = "stylesheet" type = "text/css"/> <!-end Global Alloary Styles-> <!-Начало плагины на уровне страниц-> <ссылка href = "~/content/arsets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/arsets/global/plugins/fullcalendar/fullcalendar.min.csss" rel = "lelsheet"/cysse-exet "/cysse-exet"/cysseet "/clendar. href = "~/content/arsets/global/plugins/jqvmap/jqvmap.css" rel = "stylesheet" type = "text/css"/> <!-Стили плагинов уровня конечной страницы-> <!-Stage Stage-> <link href = "~/content/admin/page/css/css/tass. type = "text/css"/> <!-Стили конечной страницы-> <!-Начните стили темы-> <link href = "~/content/assets/global/css/components.css" id = "style_components" rel = "stylesshipe" type = "text/css"/> <link href = "~/content/content/arsetss/csss. rel = "styleSheet" type = "text/css"/> <link href = "~/content/arsets/admin/layout/css/layout.css" rel = "stylesheet" type = "text/css"/> <link href = "~/content/ardess/admontout/css/theas/remplue.css" rel "rel" relesheet "css/css/remplue.css" relesheet "csss/css/rempl type = "text/css" id = "style_color"/> <link href = "~/content/arsets/admin/mayout/css/custom.css" rel = "stylesheet" type = "text/css"/> <!-End Theme Styles-> <link rel = "Shortcut Icon" href = "favicon. <div> <!-Begin Header Inner-> <div> <!-начинать логотип-> <div> <a href = "index.html"> <img src = "~/content/arsets/admin/mayout/img/logo.png"/> </a> <div> </div> </div> <! href = "javascript:;" data-toggle = "collapsse" data-target = ".. Navbar-Collapse"> </a> <!-Конечное ответное меню Toggler-> <!-Begin Top Top Navigation Menu-> <div> <ul>-Начало Уведомление о выпадении-> <!-Док. <a href = "javascript:;" data-toggle = "выпадающий" hover = "выпадение" close-hothers = "true"> <i> </i> <pan> 7 </span> </a> <ul> <li> <h3> <pan> 12 ожидания </span> уведомлений </h3> <a href = "extra_profile.html"> way </h3 </li href = "extra_profile.html" 250px; " data-handle-color = "#637283"> <li> <a href = "javascript :;"> <pan> только сейчас </span> <pran> <pan> <i> </i> </span> новый пользователь зарегистрирован. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 мин </span> <pran> <pan> <i> </i> </span> Сервер #12 перегружено. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 мин </span> <pran> <pan> <i> </i> </span> Сервер #12 перегружено. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 10 минут </span> <pran> <pan> <i> </i> </span> Сервер #2 не отвечает. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 14 часов </span> <pan> <pan> <i> </i> </span> Ошибка приложения. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 2 дня </span> <pan> <pan> <i> </i> </span> база данных перегружена 68%. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 3 дня </span> <pan> <pan> <i> </i> </span> Пользовательский IP заблокирован. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 4 дня </span> <pan> <pan> <i> </i> </span> Сервер хранения № 4 не отвечает на DFDFDFD. </span> </a> </li> <li> <a href = "javascript :;"> <pan> 5 дней </span> <pan> <i> </i> </span> системная ошибка. </span> </a> </li> </li> <li> <a href = "javascript :;"> <pan> 9 дней </span> <pan> <pan> <i> </i> </span> Сервер хранения не удалось. </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <!-Конечное уведомление о выпадении-> <!-Начало раскрывающийся в ящик-> <!-DOC: Apply ‘Lopdown-Dark после« HOUDDOWNED-exted », чтобы изменить раскрывающееся стиль-> <liT head_IN_IN. href = "javascript:;" data-toggle = "upplowd data-hover =" выпадение "data-close-others =" true "> <i> </i> <pan> 4 </span> </a> <ul> <li> <h3> У вас есть <pan> 7 Новых сообщений </span> </h3> <a href =" page_inbox.html "> Просмотр всех </a> </li> <li> <liste =" data-handle-color = "#637283"> <li> <a href = "inbox.html? a = view"> <pan> <img src = "~/content/arsets/admin/layout3/img/avatar2.jpg"> </span> <pan> <pan> <pran> <span> <pran> <pran> <pran> <span> <span> <pran> <span> <span> <pan> <pan> <pran> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pan> <pran> <pran> <pran>. sed auctor nibh congue nibh.auctor nibh auctor nibh... </span> </a> </li> <li> <a href="inbox.html?a=view"> <span> <img src="~/Content/assets/admin/layout3/img/avatar3.jpg"> </span> <span> <span> Richard Doe </span> <pran> 16 минут </span> </span> <pran> vivamus sed консультант 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> <span> Bob Nilson </span> <span> 2 hrs </span> </span> <pran> 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> <pan> vivamus sed Auto 40% Nibh Congue nibh ... </span> </li> <li> <a href = "inbox.html? a = view"> <pan> <img src = "~/content/arders/admin/layout3/img/avatar3.jpg"> </span> <pan> <pran> richard doe doee doee doee doee doee doee doee doea span> <pran> <pan> <pran> </span> </span> </span> </span> </span> <span> </span> <pran> </span>. </span> </span> <pan> vivamus sed консультант nibh autotor nibh congue nibh. Autotor nibh autotor nibh ... </span> </a> </li> </ul> </li> </li> </li> </li> </li> <!-Конец распада в ящике-> <!-Начало выпадает-> <!-Док. href = "javascript:;" data-toggle = "Выпадение" Data-hover = "выпадение" data-close-others = "true"> <i> </i> <pan> 3 </span> </a> <ul> <li> <h3> у вас есть <pan> 12 ожидающих </span> walls </h3> <a href = "page_todo.html" 275px; " data-handle-color = "#637283"> <li> <a href = "javascript :;"> <pan> <pan> Новый выпуск v1.2 </span> <pan> 30%</span> <pan> <pan> <pran> <pran>. aria-valuemin="0" aria-valuemax="100"><span>65% Complete</span></span> </span> </a> </li> <li> <a href="javascript:;"> <span> <span>Mobile app release</span> <span>98%</span> </span> <span> <span> <span>98%</span> </span> <span> <pran> <pan> <pan> 98%</span> </span> <pan> <pan> <pan> <pan> миграция базы данных </span> <pan> 10%</span> </span> <pan> <span aria-valuenow = "10" Aria-Valuemin = "0" aria-valuemax = "100"> <pran> 10%. </li> <li> <a href = "javaScript :;"> <pan> <pan> Обновление веб-сервера </span> <pan> 58%</span> </span> <pan> <pan> <pan> обновление веб-сервера </span> <pran> 58%</span> </span> <pan> <span> <span> "58%</span> </span> <pan> <pan> <pania-valuenow =" aria-valuemax = "100"> <pan> 58% завершен </span> </span> </span> </a> </li> <li> <a href = "javascript :;"> <pan> <pan> <pan> Мобильное развитие </span> <pran> 85% </span> </span> <pran> <span> aria-valuenow = "85%". aria-valuemax = "100"> <pan> 85% завершен </span> </span> </span> </li> <li> <a href = "javascript :;"> <pan> <pan> new ui-выпуск </span> <pran> 38% </span> </span> <pan> <pan> aria-valuemin = "0" ARIA-ValueMax = "100"> <pan> 38% Complete </span> </span> </span> </a> </li> </ul> </li> </li> </li> </li> </li> </li> </li> <!-End Todo Dumpdown-> <!-Begin Login Dropdown-> <!-DOC: DOC: DOC: DOC: DOC: DOC: DOC: DAPDARD ". выпадающий список -> <li> <a href = "javascript:;" data-toggle = "Выпадающий" HOVER = "HOPDAWD DATA-CLOSE-Others =" true "> <img src =" ~/content/arsets/admin/mayout/img/avatar3_small.jpg "/> <pan> nick </span> </i> </a> <ul> <li> <a href =" extra_profile.html. </a> </li> <li> <a href = "page_calendar.html"> <i> </i> мой календарь </a> </li> <li> <a href = "page_calendar.html"> </i> my calendar </a> </li> <li> Мой ящик <pran> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i> мои задачи <pan> 7 </span> </a> </li> <li> </li> <li> <a href = "extra_lock.html" href = "login.html"> <i> </i> rouge out </a> </ul> </li> </li> <!-Выпадающий вход в систему пользователя-> <!-Начните быстрый тоглер боковой панели-> <!-DOC: Apply "Dropdown-Dark" после ниже "Dropdowd-oxted", чтобы изменить стиль Dropdown-> <lif> <href href = "; <i> </i> </a> </li> <!-Конец быстрой боковой панели Toggler-> </ul> </div> <!-End Top Top Navigation Menu-> </div> <!-End Header Inner-> </div> <!-Конец заголовка-> <div> </div> <!-Begin Container-> <div> <! Data-auto-scroll = "false", чтобы отключить боковую панель от автоматической прокрутки/фокусировки-> <!-Док: изменить Data-auto-speed = "200", чтобы настроить подложку вверх/скорость вверх/вниз-> <div> <!-Начните меню боковой панели-> <!-Doc: Apple "Page-sidebar-menu-light-ligt Границы)-> <!-Док: Применить «страница-сторона-меню-господин-субмену» сразу после того, как «Страница-сидебар-меню» для включения невозможного (париос против) режим подзых меню-> <!-Док: применить «Страница-сторона-мену-сознание» сразу после «Страница», к тому, что он может быть в обращении, на основе «Страница» («Страница» («Страница» с участием «Способность к болю». sidebar sub menu mode --> <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing --> <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded --> <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed --> <ul data-keep-expanded="false" data-auto-scroll = "true" data-slide-speed = "200"> <!-Док: чтобы удалить боковую панель с боковой панели, вам просто нужно полностью удалить приведенную ниже "боковой панель-тоглер-wrapper" li element-> <li> <!-Начните кнопку Toggler-> <Div> </div> <! Боковая панель вам просто нужно полностью удалить приведенную ниже «боковая панель-проужая» «Li Element-> <li> <a href =» javascript :; »> <i> </i> <pan> Многоуровневое меню </span> <pran> </span> </a> <ul> <li> <a href =" javascript :; "<i> </i> item 1 <pran> </span> </span> </span> </span> </span> <pran> </span>. <li> <a href = "javascript :;"> <i> </i> Пример ссылки 1 <pan> </span> </a> <ul> <li> <a href = "#"> <i> </i> Пример ссылки 1 </a> </li> <li> <a href = "#" href = "#"> <i> </i> Пример ссылки 1 </a> </li> <li> <a href = "#"> <i> </i> Пример ссылки 1 </a> </li> <li> <a href = "#"> <i> </i> Образец 1 </a> </li> </li> </li> <ai> <ari> </href = "/li> </li> </li> 1 </a> </li> <li> <a href = "#"> <i> </i> Пример ссылки 2 </a> </li> <li> <a href = "#"> <i> </i> Пример ссылки 3 </a> </li> </li> </li> <li> <a href = "#"> <i> </i>. <li> <a href = "#"> <i> </i> Пример ссылки 1 </a> </li> </li> <li> <a href = "#"> <i> </i> Пример ссылки 1 </a> </li> <li> <a href = "#" Ссылка 1 </a> </li> </li> </li> <li> <a href = "#"> <i> </i> item 3 </a> </li> </li> </li> </li> </li> </li> <!-Контент-контент-контент-> </div> </div> <!-End Sidebar-> <! MODAL FORM--> <div id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>Modal title</h4> </div> <div> <div> Форма настроек виджета идет здесь </div> <div> <button Type = "button"> Сохранить изменения </button> <button Type = "button" data-dismiss = "modal"> Close </button> </div> </div> <!-/.modal-content-> </div> <!-/.modal-dialog-> </div> <!-/. Модал-> <! <!-Настройка Style Style-> <div> <div> </div> <div> </div> <div> <div> <pan> Цвет темы </span> <ul> <li data-style = "data-container =" body "Data-Original-title =" cobode "> </li> <li data-style =" Darkblue "container =" cobode "> </li> <li data-style =" Darkblue "=" cobode "> </li> <li data-style =" 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" container = "body" body-to-original-title-title-title-title-title-title-title-title-title-title-title-title-title-title-title-container = " 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 value="fixed" selected="selected">Fixed</option> <option value="default">Default</option> </select> </div> <div> <span> Top Menu Dropdown </span> <select> <option value="light" selected="selected">Light</option> <option value="dark">Dark</option> </select> </div> <div> <span> Sidebar Mode </span> <select> <option value="fixed">Fixed</option> <option value="default" selected="selected">Default</option> </select> </div> <div> <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 value = "default" selected = "selected"> default </option> <опция> <option value = "light"> Light </option> </select> </div> <div> <pan> sidebar position </span> <select> vorive value = aleftected = selected "> aleft aptain> <vitre arrate virst virth alfore = right right right"/arle " </div> <div> <pan> cooler </span> <select> <option value = "fixed"> fixed </option> <value = "default" selected = "selected"> default </option> </select> </div> </div> <!-End Style Camfize href = "index.html"> home </a> <i> </i> </li> <li> <a href = "#"> Layout </a> </li> </ul> </div> <h3> Layout <mall> отчеты и статистические данные </small> </h3> <!-end page-> <!-Статистика Layone-> @renderdy @renderdy @) @) @) <) <) <!- <div> </div> </div> </div> <!-End Content-> <!-начать быструю боковую панель-> <a href = "javascript :;"> <i> </i> </a> <div> <div> <ul> <li> <a href = "#Quick_sidebar_tab_1" data-toggle = "> usters> 2 </wick_sidebar_tab_1" <a href = "#Quick_sidebar_tab_2" data-toggle = "tab"> оповещения <pran> 7 </span> </a> </li> <li> <a href = "javascript:;" data-toggle = "Выпадение"> больше <i> </i> </a> <ul rol = "menu"> <li> <a href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> оповещения </a> </li> <li> <a href = "#Quick_sidebar_tab_3" </li> <li> <a href = "#Quick_sidebar_tab_3" </li> <li> <a href = "#Quick_sidebar_tab_3"> Уведомления </a> </li> <li> <a href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> active </a> </li> <li> <a href = "#Quick_sidebar_tab_3" Data-toggle = "> </i> </i> </i> <ti> <ti> <a/li> <ti> <a/li> <ti> <a/li> <ti> href = "#Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> Настройки </a> </li> </ul> </li> </ul> </li> </ul> <div> <div id = "Quick_sidebar_tab_1"> <div Data-color = "#ddd" data-wrapper-class-class-class-class-class-class-class Quare-squas <h3> Персонал </h3> <ul> <li> <div> <pan> 8 </span> </div> <img src = "~/content/arsets/admin/mayout/img/avatar3 src = "~/content/arsets/admin/mayout/img/avatar1.jpg"> <div> <h4> Ник Ларсон </h4> <div> арт -директор </div> </li> <li> <div> <pran> 3 </span> </div> <img src = "~/content/assets/add/add/img/avatar4. <img src =" ~/content/assets/add/admon/amg/avatar4. Hubert </h4> <div> CTO </div> </li> <li> <img src = "~/content/arsets/admin/mayout/img/avatar2.jpg"> <div> <h4> ella wong </h4> <ul> </div> </li> </ul> <h3> </h4> <lip> <li> <lip> <lip> <lip> <lip> <lip> <lip> <lip> <lip> <lip> <lip> <lip> <li> <lip> <lip> <lip> <li> <li> <lip> <li> <lip> <lip> <li> <li> <lip> <li> <lip> <li> <li> <li> <li> <lipg> <lip>. </div> <img src = "~/content/assets/admin/mayout/img/avatar6.jpg"> <div> <h4> lara kunis </h4> <div> Ceo, Loop Inc </div> <div> src = "~/content/arsets/admin/layout/img/avatar7.jpg"> <div> <h4> ernie kyllonen </h4> <div> Manager, <br> smartbizz ptl </div> </div> </li> <li> <img src = "~/assets/add/add/mayout/img/img/img/img/img/img/img/img/img/img/img/img/img/img/img/img/img/img/img> <li> <img src =" <h4> Лиза Стоун </h4> <div> CTO, Keort inc </div> <div> Последний раз виден 13:10 pm </div> </div> </li> <li> <div> <pan> 7 </span> </div> <img src = "~/Содержание/Assets/Admin/Mayout/img/avatar9.jpg"> <d Div> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> <h4> deon. CFO, H & D Ltd </div> </li> </li> <li> <img src = "~/content/arsets/admin/mayout/img/avatar10.jpg"> <div> <h4> Irina savikova </h4> <div> Ceo, tizda Motors Inc </div> </li> <li> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </diver> <irina savikova </h4> src = "~/content/assets/admin/mayout/img/avatar11.jpg"> <div> <h4> maria gomez </h4> <div> Manager, Infomatic Inc </div> <div> Последний раз виден 03:10 </div> </div> </li> </div> <div> href = "javascript :;"> <i> </i> назад </a> </div> <div> <div> <img src = "~/content/assets/admin/mayout/img/avatar3 Пришлите мне отчет? </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar2.jpg"/> <div> <pan> </span> <a href = "javascript :;"> ella wong </a> <pan> 20:15 </span> <pran> Я отправлю его в ближайшее время </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar3.jpg"/> <div> <pan> </span> <a href = "Javascript :;"> Bob Nilson </a> <pran> 20:15 </span> <prop>. Спасибо! :) </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar2.jpg"/> <div> <pan> </span> <a href = "javascript :;"> ella wong </a> <pan> 20:16 </span> <pran>, вы можете быть наиболее добро пожаловать. Извините за задержку. </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar3.jpg"/> <div> <pan> </span> <a href = "javascript :;"> Bob Nilson </a> <pan> 20:17 </span> <pran> no. Просто не торопитесь :) </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar2.jpg"/> <div> <pan> </span> <a href = "javaScript :;"> ella wong </a> <pran> 20:40 </span> <pran> alright. Я только что написал вам по электронной почте. </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar3.jpg"/> <div> <pan> </span> <a href = "javascript :;"> Боб Нилсон </a> <pan> 20:17 </span> <pran> Спасибо. Проверим это сразу. </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar2.jpg"/> <div> <pan> </span> <a href = "Javascript :;"> Ella Wong </a> <pan> 20:40 </span> <pran> Пожалуйста, дайте мне знать, если у вас будет какой -то комментарий. </span> </div> </div> <div> <img src = "~/content/arsets/admin/mayout/img/avatar3.jpg"/> <div> <pan> </span> <a href = "javascript :;"> Bob Nilson </a> <pan> 20:17 </span> <pran>. Я проверю и побудим вас, если что -то нужно исправить. </span> </div> </div> </div> </div> <div> <input type = "text" Placeholder = "type a сообщение здесь ..."> <div> <button Type = "button"> <i> </i> </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> id = "Quick_sidebar_tab_2"> <div> <h3> general </h3> <ul> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> у вас есть 4 ожидания задачи. <pran> Принять действие <i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> только сейчас </div> </li> <li> <a href = "Javascript :;"> <div> <div> <div> <div> </i> </i> </div> <div> <div> </i> </div> <div> <div> </i> </div> <div> <div> </i> </div> <div> <div> </i> </div> <div> <div> </i> </div> <div> <div> </i> </div> <div>. </div> </div> </div> </div> </div> </div> <div> <div> 20 минут </div> </a> </li> <li> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> У вас есть 5 ожидающих членства, которые требуют быстрого обзора. </div> </div> </div> </div> </div> <div> <div> 24 mins </div> </li> <li> <div> <div> <div> <div> <div> <i></i> </div> </div> <div> New order received with <span> Reference Number: DR23923 </span> </div> </div> </div> </div> <div> <div> 30 mins </div> </div> </li> <li> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> У вас 5 ожидающих членства, требующих быстрого рассмотрения. </div> </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> 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> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> <div> <d div> </i> </div> </div> <div> <div> <div> <d div> <pran> Принять действие <i> </i> </span> </div> </div> </div> <div> У вас есть 4 ожидания задачи. <span> Take action <i></i> </span> </div> </div> </div> </div> </div> <div> <div> Just now </div> </li> <li> <a href="javascript:;"> <div> <div> <div> <div> <div> <div> <i></i> </div> </div> <div> Finance Report for year 2013 has been released. </div> </div> </div> </div> </div> </div> <div> <div> 20 мин </div> </a> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> У вас есть 5, которое требует быстрого обзора. </div> </div> </div> </div> <div> <div> 24 мин </div> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> Новый порядок, полученный <pran> №: dr23923 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> </div> <div> <dip> <dip> </div> <div> <par> <pran> </i> </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> <div> <div> <div> <div> <div> <i> </i> </div> </div> </div> <div> <div> <i> </i> </div> </div> <div> </div> <div> <i> </i> </div> </div> <div> </div> <span> Overdue </span> </div> </div> </div> </div> </div> </div> <div> 2 hours </div> </li> <li> <a href="javascript:;"> <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> 20 минут </div> </a> </li> </ul> </div> </div> </div> </div> <div> <div> 20 минут </div> </a> </ul> </div> </div> </div> <div = " <h3>General Settings</h3> <ul> <li> Enable Notifications <input type="checkbox" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> <li> Allow Tracking <input type="checkbox" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> <li> Log Errors <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> Auto Sumbit Issues <input type="checkbox" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> <li> Enable SMS Alerts <input type="checkbox" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li> </ul> <h3>System Settings</h3> <ul> <li> Security Уровень <SELECT> <vition value = "1"> normal </option> <vitue value = "2" selected> medium </option> <value = "e"> High </option> </select> </li> <li> Неудачные попытки электронной почты <input value = "5"/> </li> <li> secondy smotp port <value value = "3560"/> </> <li>. 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> <tutry> <i> </i> Сохранить изменения </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-конец быстрой боковой базы-> </div> <!-конечный контейнер-> <!-Begin Pooler-> <div> <div> 2014 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 больше.