前の記事を続けて、参照のためにブートストラップメトロニックメニューバーからコンパイルされたメモを共有してください。特定のコンテンツは次のとおりです
1。はじめに
1）.Environment構成
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を_layout.cshtmlに抽出して、変換の準備をします
3.データベースとテーブルを作成します
データベース：AppDataBase
次のデータテーブルを作成し、appdb.edmxを作成します
[appdatabase] go/******オブジェクトを使用：テーブル[dbo]。 ID [Name] [varchar](50) NOT NULL, --Menu Name [ParentID] [varchar](50) NULL, --Super ID [Url] [varchar](200) NULL, --URL [Iconic] [varchar](200) NULL, --Iconic [Sort] [int] NULL, --Sort [Enable] [bit] NOT NULL, --Does [CreateTime] [datetime] NULL, --Create Time [islast] [bit] not null-最後のアイテム制約[pk_sysmodule]プライマリキークラスター（[id] asc）with（pad_index = off、statistics_norecompute = off、nagnore_dup_key = off、aople_page_locks = on [on off] on [off] geset [dbo]。[sysmodule] with nocheck add constraint [fk_sysmodule_sysmodule] reaveryキー（[dbo]）参照[dbo]。[sysmodule]（[id]）ゴールターテーブル[dbo]。
人工データ
[sysmodule]（[id]、[name]、[dantid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）値（ '0'、 'root'、 'root'、 'index、' icon-settings '、null、0、null、0）に挿入します。 （[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '1'、 'プライマリメニュー01'、 '0'、 'index'、 'icon-settings'、null、0、null、0）に[sysmodule]に挿入する（[id]、[name]、[dameId]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '11'、 'プライマリメニュー01-01'、 '1'、 'index'、 'icon-settings'、null、0、null、0）[Sysmodule]に挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '111'、 '3-level Menu01-01-01'、 '11'、 'index'、 'icon-link'、null、1） （[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '112'、 'level 3 Menu Menu 01-01-02'、'11 '、' index、 'icon-settings'、null、null、1） （[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '12'、 'level 2 Menu Menu 01-02'、 '1'、 'index'、 'icon-link'、null、0、null、1）[Sysmodule]への挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '13'、 '2番目のレベル01-03'、 '1'、 'index'、 'icon-link'、null、0、null、1）[sysmodule]に挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '2'、 'プライマリメニュー02'、 '0'、 'index'、 'icon-settings'、null、0、null、0）に[sysmodule]に挿入する（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '21'、 'プライマリメニュー02-01'、 '2'、 'index'、 'icon-settings'、null、0、null、0）[Sysmodule]に挿入（[id]、[name]、[dameId]、[url]、[iconic]、[sort]、[enable]、[createtime]、[islast]）values（ '211'、 'level 3 menu02-01-01'、 '5'、 'index'、 'icon-link'、null、1） （[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createtime]、[islast]）values（ '212'、 'level 3 menu menu 02-01-02'、 '5'、 'index'、 'icon-link'、null、1） （[id]、[name]、[dameId]、[url]、[icononic]、[sort]、[enable]、[createtime]、[islast]）values（ '22'、 'level 2 menu menu'、 '2'、 'index'、 'icon-link'、null、0、null、1）[sysmodule]への挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createtime]、[islast]）values（ '23'、 'second menu02-03'、 '2'、 'index'、 'icon-link'、null、0、null、1）[sysmodule]への挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '3'、 'プライマリメニュー03'、 '0'、 'index'、 'icon-settings'、null、0、null、0）に[sysmodule]に挿入する（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '31'、 'プライマリメニュー03-01'、 '3'、 'index'、 'icon-settings'、null、0、null、0）[Sysmodule]に挿入（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '311'、 'level 3 menu03-01-01'、 '31'、 'index'、 'icon-link'、null、1） （[id]、[name]、[dantid]、[url]、[iconic]、[sort]、[enable]、[createtime]、[islast]）values（ '312'、 'level 3 menu menu 03-01-02'、 '31'、 'index'、 'icon-link'、null、1） （[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '32'、 'level 2 menu menu 03-02'、 '3'、 'index'、 'icon-link'、null、0、null、1）[sysmodule]への挿入（[id]、[name]、[dantid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '33'、 'second menu03-03'、 '3'、 'index'、 'icon-link'、null、0、null、1） （[id]、[name]、[dantid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '4'、 'プライマリメニュー04'、 '0'、 'index'、 'icon-settings'、null、0、null、0）に[sysmodule]に挿入する（[id]、[name]、[dangid]、[url]、[iconic]、[sort]、[enable]、[createTime]、[islast]）values（ '41'、 'プライマリメニュー04-01'、 '4'、 'index'、 'icon-link'、null、0、null、1）[sysmodule]への挿入（[id]、[name]、[dantid]、[url]、[iconic]、[sort]、[enable]、[createtime]、[islast]）values（ '42'、 'second menu04-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-compatible" content = "ie = edge"> <meta content = "width =" width = 1 "name =" viewport " /> <meta content =" name = "description" /> <meta content = " href = "〜/content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel = "styleSheet" type = "text/css"/> <link href = "〜/content/assets/assets/assets/assets/global/plugins/simple-line-icons/simple-line-icons/cimpline-line-cons.min.cs" "stish. <link href = "〜/content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel = "styleSheet" type = "text/css"/> <link href = "〜/content/assets/assets/global/plugins/unigled/cuniled/css.default.cs href = "〜/content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel = "styleSheet" type = "text/css"/> <！ - グローバルな必須スタイル - > <！ href = "〜/content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel = "styleSheet" type = "text/css"/> <link href = "〜/content/content/assets/assets/global/glugins/fullcalendar/fullcalendar.min.cs <link href = "〜/content/assets/global/plugins/jqvmap/jqvmap.css" rel = "styleSheet" type = "text/css"/> <！ - ページレベルプラグインスタイル - > <！ type = "text/css"/> <！ - 終了ページスタイル - > <！ - テーマスタイルを開始 - > <link href = "〜/content/assets/global/css/components.css" style_components "rel =" styleSheet "type =" text/css "/> <link href =" rel = "styleSheet" type = "text/css"/> <link href = "〜/content/assets/assets/admin/layout/css/layout.css" rel = "styleSheet" type = "text/css"/> <link href = "〜/content/assets/admin/layout/css type = "text/css" id = "style_color"/> <link href = "〜/content/assets/assets/admin/layout/css/custom.css" rel = "styleSheet" type = "text/css"/> <！ - endテーマスタイル - > <link rel = "shortcutアイコン" <div> <！ - ヘッダー内側を開始 - > <div> <！ - begin logo-> <div> <a href = "index.html"> <img src = "〜/content/assets/admin/layout/img/logo.png"/> </a> <div> </div> </div> <！ href = "javascript :;" data-toggle = "collapse" data-target = "。navbar-collapse"> </a> <！ - エンドレスポンシブメニュートグラー - > <！ - トップナビゲーションメニューの開始 - > <div> <ul> <！ - 通知ドロップダウンを開始 - > <！ - ドキュメントを適用してください。 href = "javascript :;" data-toggle = "Dropdown" data-hover = "Dropdown" data-close-others = "true"> <i> </i> <span> 7 </span> </a> <li> <h3> <span> 12保留</span>通知250px; " data handle-color = "＃637283"> <li> <a href = "javascript：;"> <span> just now </span> <span> <span> <i> </i> </span>新しいユーザーが登録されています。 </span> </a> </li> <li> <a href = "javascript：;"> <span> 3分</span> <span> <span> <i> </i> </span>サーバー＃12オーバーロード。 </span> </a> </li> <li> <a href = "javascript：;"> <span> 3分</span> <span> <span> <i> </i> </span>サーバー＃12オーバーロード。 </span> </a> </li> <li> <a href = "javascript：;"> <span> 10分</span> <span> <span> <i> </i> </span>サーバー＃2応答しません。 </span> </a> </li> <li> <a href = "javascript：;"> <span> 14時間</span> <span> <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> </i> </span>システムエラー。 </span> </a> </li> </li> <li> <a href = "javascript：;"> <span> 9日</span> <span> <i> </i> </span>ストレージサーバーは失敗しました。 </span> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <！ - end notification dropdown-> <！ - begin inbox Dropdown-> <！ - doc：doctdowd style "> <> href = "javascript :;" data-toggle = "ドロップダウン" data-hover = "dropdown" data-close-others = "true"> <i> </i> <span> 4 </span> </a> <ul> <li> <h3> </h3> <a href = "page_inbox.html" data handle-color = "＃637283"> <li> <a href = "inbox.html？a = view"> <span> <img src = "〜/content/assets/admin/layout3/img/avatar2.jpg"> </span> <スパン> <スパン</span </< vivamus sed auctor nibh congue nibh.auctor nibh auctor nibh ... </span> </a> </li> <li> <a href = "inbox.html？a = view"> <span> </span> <span> 16分</span> </span> <span> vivamus sed congue nibh autor nibh cong 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 </> </>> </> </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> </>>>> </span> <span> vivamus sed auto 40％nibh congue nibh ... </span> </li> <li> <a href = "inbox.html？a = view"〜/content/content/assets/admin/layout3/img/avatar3.jpg " mins </span> </span> <span> vivamus sed congue nibh autotor nibh congue nibh。 Autotor Nibh Autotor Nibh ... </span> </a> </li> </ul> </li> </li> </li> </li> </li> <！ - end Inbox Dropdown-> <！-> <！ - > <！-doc：Doc：dopdown "Dropdown-exted" href = "javascript :;" data-toggle = "Dropdown" data-hover = "Dropdown" data-close-others = "true"> <i> </i> <span> 3 </span> </a> <ul> <li> <h3> </h3> <a href = a href = "page_todo.html"> view </ 275px; " data handle-color = "＃637283"> <li> <a href = "javascript：;"> <span> <span> new release v1.2 </span> <span> 30％</span> </span> <span> <span>アプリケーション展開</span> <スパン> 65％ aria-valuemin = "0" aria-valuemax = "100"> <span> 65％完了</span> </span> </span> </a> </li> <li> <a href = "javascript：;"> <span> <span>モバイルアプリリリース</span> <スパン> 98％ <Span> <Span> <span> 98％</span> </span> <span> <span> <span> <span>データベース移行</span> <span> 10％</span> </span> <span> <span> <span> <span> <"aria-valuemin =" 0 "aria-valuemax =" 100 " </li> <li> <a href = "javascript：;"> <span> <span> webサーバーアップグレード</span> <span> 58％</span> </span> <span> <span> <span> <span> <span> <span> <span> 58％</span> </span> <スパン<スパンAria-valuemax = "100"> <span> 58％complete </span> </span> </span> </a> </li> <li> <a href = "javascript：;"> <span> <span> <span>モバイル開発</span> <span> <span> <span> 85％</span> </span> aria-valuemax = "100"> <span> 85％complete </span> </span> </span> </li> <li> <a href = "javascript：;"> <span> <span> new UIリリース</span> 38％</span> </span> <スパン> <スパン> aria-valuemax = "100"> <span> 38％complete </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-others = "true"> <img src = "〜/content/assets/admin/layout/img/avatar3_small.jpg"/> <span> nick </span> <i> </i> </a> </a> </li> <li> <a href = "page_calendar.html"> <i> </i>私のカレンダー</a> </li> <li> <a href = "page_calendar.html"> <i> </i>私のカレンダー</a> <span> 3 </span> </a> </li> <li> <a href = "page_todo.html"> <i> </i>私のタスク<span> 7 </span> </a> </li> <li> href = "login.html"> <i> </i>ログアウト</a> </ul> </li> </li> <！ - エンドユーザーログインドロップダウン - > <！ - クイックサイドバートグラー - > <！ - doc：doc：dopdown-extendedの後の「ドロップダウンダーク」クラスを適用<i> </i> </a> </li> <！ - クイックサイドバートグラーの終了 - > </ul> </div> <！ - エンドトップナビゲーションメニュー - > </div> <自動スクロール/フォーカスからサイドバーを無効にするためにdata-auto-scroll = "false"を "false" - > <！ - doc：data-auto-speed = "200"を変更して速度を上げ/下の下降スライドアップ/ダウンスピードを調整して速度を上げます。境界） - > <！ - doc：「Page-Sidebar-Menu-Hover-Submenu "クラス「Page-Sidebar-Menu」の直後のクラスを適用して、ホバイル可能（ホバーvsに従って）サブメニューモードを有効にする - > <！ - doc：" Page-Sidebar-Menuclosed」クラスの直後の「Page-Sidebar-Menu」を適用します。サブメニューモード - > <！ - doc：data-auto-scroll = "false"を設定して、自動スクロール/フォーカシングからサイドバーを無効にする - > <！ - doc：set data-keep-expand = "true"を設定して、サブメニューを拡張し続ける - > <！ - doc：set data-auto-speed = "200" data-auto-scroll = "true" data-slide-speed = "200"> <！ - doc：サイドバートグラーをサイドバーから削除するには、以下の「サイドバートグラーワッパー」を完全に削除する必要があります。サイドバーは、以下の「サイドバー - サーチワラッパー」LI要素を完全に削除する必要があります - > <li> <a href = "javascript：;"> <i> <i> </i> <span>マルチレベルメニュー</span> </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> href = "＃"> <i> </i>サンプルリンク1 </a> </li> <li> <a href = "＃"> <i> </i>リンク1 </a> </li> <li> <a href = "＃> <i> </i>サンプルリンク1 </a> 1 </a> </li> <li> <a href = "＃"> <i> </i>サンプルリンク2 </a> </li> <li> <a href = "＃"> <i> </i>サンプルリンク3 </a> <li> <a href = "＃"> <i> </i>サンプルリンク1 </a> </li> </li> <li> <a href = "＃"> <i> <i> </i>サンプルリンク1 </a> </li> <li>リンク1 </a> </li> </li> </li> <li> <a href = "＃"> <i> </i>アイテム3 </a> </li> </li> </li> </li> </li> <モーダルフォーム - > <div id = "portlet-config" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <div> <div> <ボタン= "ボタン" data-dismiss = "modal" aria-hidden = "true"> <h4> <h4> <h4> <h4> <h4>設定フォームはここにあります</div> <div> <ボタンタイプ= "ボタン">変更</button> <ボタンタイプ= "button" data-dismiss = "modal"> close </button> </div> </div> <スタイルカスタマイザー - > <div> <div> </div> <div> </div> <div> <div> <span>テーマ色data-style = "blue" data-container = "body" data-original-title = "blue"> </li> <li data-style = "gray" data-container = "body" data-original-title = "灰色"> </li> < data-container = "body" data-html = "true" data-original-title = "light 2"> </li> </ul> </ul> </div> <div> <span>テーマスタイル</span> <select> <select> <select> "selected =" selected ">正方形の角</option> <オプション値="ラウンド< <select> <option値= "fluid" selected = "selected"> fluid </option> <option value = "boxed"> boxed </select> </select> </div> <span> header </span> <select> <select> <option value = "fixed" selected = "leceed ="選択 "> fixed </option> <option> <option値" <select> <option値= "light" selected = "selected"> light </option> <option value = "dark"> dark </option> </select> </div> <div> <span>サイドバーモード</span> <select> <option値= "> fixed </option> <option値="デフォルト "selected =" <select> <option value = "accordion" selected = "selected"> accordion </option> <option value = "hover"> hover </select> </select> </div> <span>サイドバースタイル</span> <select> <select> <select> <select> <select> <select> <select> <select> <select> < selected = "selected"> default </option> <option> <option値= "light"> light </option> </select> </div> <span <span>サイドバーポジション</span> <select> <select> <select> <option value = "left" selected = "selected"> left </option> <option値= "右" value = "sixed"> sixed </option> <option値= "default" selected = "selected"> option> </select> </div> </div> <！ - end page header-> <！ - > <！ - > <！ href = "＃">レイアウト</a> </li> </ul> </div> <h3> layout <small>レポート＆統計</small> </h3> <！ - ページヘッダーの終了 - > <！ - レイオン統計の開始 - > @renderbody（）<！ - end layone stats-> < href = "javascript：;"> <i> </i> </a> <div> <div> <ul> <ul> <ul> <lif = "＃Quick_sidebar_tab_1" data-toggle = "tab">ユーザー2 </span> </a> </li> <a href = " <span> 7 </span> </a> </li> <li> <a href = "javascript :;" data-toggle = "Dropdown"> more <i> </i> </a> <ul role = "Menu"> <li> <a href = "＃Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i>通知</a> </li> <li> <a href = "＃quick_sidebar_tab_3" data-toggle = "tab"> <i> </i> </a> </li> <li> <a href = " href = "＃Quick_sidebar_tab_3" data-toggle = "tab"> <i> </i>設定</a> </li> </ul> </li> </ul> </li> </ul> <div = "Quick_sidebar_tab_1"> <div data-rail-color = "＃dddd" "＃ddd" data-wrapper-class = "page-quick-sidebar-list"> <h3>スタッフ</h3> <ul> <li> <li> <li> <span> 8 </span> </div> <img src = "〜/content/assets/admin/layout/img/avatar3.jpg"> <div> <h4> bob nilson </h4> fiv> </<> </</</</</</</</</</</</</</< <li> <img src = "〜/content/assets/admin/layout/img/avatar1.jpg"> <div> <h4> nick larson </h4> <div>アートディレクター</div> </li> <li> <h4> deon hubert </h4> <div> cto </div> </li> <li> <img src = "〜/content/assets/assets/admin/layout/img/avatar2.jpg"> <div> <span> 2 </span> </div> <img src = "〜/content/assets/assets/admin/layout/img/avatar6.jpg"> <div> <h4> lara kunis </h4> <div> ceo、loop inc </div> <div> <div>最後の03:10 AM <img src = "〜/content/assets/admin/layout/img/avatar7.jpg"> <div> <h4> ernie kyllonen </h4> <div>プロジェクトマネージャー、<br> smartbizz ptl </div> </div> </li> <li> <img src = "〜content/assets/avatar8/avatar8 <div> <h4> lisa Stone </h4> <div> cto、keort inc </div> <div>最後の13:10 pm </div> </div> </li> <li> <div> <span> 7 </span> </div> <div> cfo、h＆d ltd </div> </li> </li> <li> <img src = "〜/content/assets/admin/layout/img/avatar10.jpg"> <div> <h4> irina savikova </h4> <div> ceo <img src="~/Content/assets/admin/layout/img/avatar11.jpg"> <div> <h4>Maria Gomez</h4> <div> Manager, Infomatic Inc </div> <div> Last seen 03:10 AM </div> </div> </li> </div> <div> <div> <div> <a href = "javascript：;"> <i> </i> back </a> </div> <div> <div> <div> <img src = "〜/contents/assets/admin/layout/img/avatar3.jpg"/> <div> <div> <span> </span> <a href = "javascript：;レポートを送ってくれませんか？ </span> </div> </div> <div> <img src = "〜/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript：;"> ella wong </a> <span </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> </div> </div> <div> <img src = "〜/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript：;"> ella wong </a> <span> <span> <span> <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> </div> </div> <div> <img src = "〜/content/assets/admin/layout/img/avatar2.jpg"/> <div> <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> </div> </div> <div> <img src = "〜/content/assets/admin/layout/img/avatar2.jpg"/> <div> <span> </span> <a href = "javascript：;"> ella wong </a> </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> </div> </div> </div> </div> <div> <入力タイプ= "text" placeholder = "ここでメッセージを入力..."> <div> <ボタン= "button"> <i> </i> </button> </div> </div> </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> <i> </i> </i> </div> </div> <div> <span>アクションを実行する<i> </i> </span> </div> </div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> <div> <div> 20分</div> </a> </li> <li> <div> <div> <div> <div> div> <i> </i> </div> </div> </div> </div> </div> <div> <div> 24分</div> </li> <li> <li> <li> <div> <div> <div> <div> <div> <i> </i> </div> div> div> div> div> div> div> div> div> div> div> div> div> </div> </div> </div> </div> </div> </li> <li> <div> <div> div> <div> <div> <i> </i> </i> </div> div> <div> <div>クイックレビューが必要な5つの保留中のメンバーシップがあります。 </div> </div> </div> </div> </div> <div> <div> 24分</div> </li> <li> <div> <div> <div> <div> <div> <div> <i> </i> </div> </div> <div> <div> <i> </i> <span> span> span> span> </div> </div> </div> </div> </div> </div> <div> <div> 2時間</div> </li> <li> <a href = "javascript：;"> <div> <div> <div> <div> <div> <div> <i> </div> </div> </div> </div> </div> </div> <div> <div> 20分</div> </a> </li> </ul> <h3> system </h3> <ul> <li> <div> div> <div> <div> <div> <div> <i> </i> <span>アクションを実行<i> </i> </span> </div> </div> </div> <div> 4つの保留中のタスクがあります。 <span>アクションを実行する<i> </i> </span> </div> </div> </div> </div> </div> <div> <div>今すぐ</div> </li> <li> <li> <li> <li> <li> <li> <li> <li> <a havascript： </div> </div> </div> </div> </div> </div> <div> <div> 20分</div> </a> </li> <li> <div> <div> <div> <div> div> <id div> </div> </div> </div> </div> <div> div> 24分</div> </li> <li> <div> <div> <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> 30分</div> </li> <li> <div> <div> <div> <div> <id <i> </i> </div> </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> </divgragaged。 <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分 <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 <入力タイプ= "チェックボックス"チェックデータサイズ= "small" data-on-color = "success" data-color = "on" data-color = "defayour" defayour off-text = "off"> </li> </>> <セキュリティレベル<select> <オプション値= "1">通常</option> <option値= "2" selected> medium </option> <option value = "e"> high </option> </select> </li> <li>失敗した電子メール試行<入力値= "5"/> </li> <li>セカンダリSMTPポート<入力値<入力< data-size = "small" data-on-color = "danger" data-on-text = "on" data-off-color = "default" data-off-text = "off"> </li> <li> smtpエラー<入力タイプ= "チェックボックス"チェックボックス "チェックデータサイズ=" small "data-on-color ="警告 "data-on-text =" <div> <button><i></i> Save Changes</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- END QUICK SIDEBAR --> </div> <!-- END CONTAINER --> <!-- BEGIN FOOTER --> <div> <div> 2014 © Metronic by keenthemes. </div> <div> <i></i> </div> </div> <!-- END FOOTER --> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <!--[if lt IE 9]> <script src="~/Content/assets/global/plugins/respond.min.js"></script> <script src="~/Content/assets/global/plugins/excanvas.min.js"></script> <![endif]--> <script src="~/Content/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="~/Content/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <script src="~/Content/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="~/Content/assets/global/scripts/meteronic.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script> <script src="~/Content/assets/admin/layout/scripts/demo.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/index.js" type="text/javascript"></script> <script src="~/Content/assets/admin/pages/scripts/tasks.js" type="text/javascript"></script> <!-- END PAGE LEVEL SCRIPTS --> <script>jQuery(document).ready(function() { Metronic.init(); // init metronic core components Layout.init(); // init layout QuickSidebar.init(); // init quick sidebarDemo.init(); // init demo features Index.init(); Index.init layout display Daterange(); Index.initJQVMAP(); // init index page's custom scripts Index.initCalendar(); // init index page's custom scripts Index.initCharts(); // init index page's custom scripts Index.initChat(); Index.initMiniCharts(); Tasks.init layout display Widget();}); </script> <!-- END JAVASCRIPTS --></body><!-- END BODY --></html>再次提取菜单代码
<li> <a href="javascript:;"> <i></i> <span>Multi Level Menu</span> <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Item 1 <span></span> </a> <ul> <li> <a href="javascript:;"> <i></i> Sample Link 1 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 2</a> </li> <li> <a href="#"><i></i> Sample Link 3</a> </li> </ul> </li> <li> <a href="javascript:;"> <i></i> Item 2 <span></span> </a> <ul> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> <li> <a href="#"><i></i> Sample Link 1</a> </li> </ul> </li> <li> <a href="#"> <i></i> Item 3 </a> </li> </ul> </li>
大约在466行-529行
分析上面html可以看出，li包含ul循环调用。所以我们用递归读取菜单
5.拼接菜单栏
创建Home视图Index.cshtml并应用_Layout.cshtml
Bootstrap Metronic并菜单没有提供Ajax模式，我们只能读取数据拼接HTML
过程：读取数据表数据递归调用
using App.Models;システムの使用。 System.collections.genericを使用しています。 using System.Linq; using System.Web; using System.Web.Mvc; using System.Text;namespace App.Web.Controllers{ public class HomeController: Controller { AppDBContainer db = new AppDBContainer(); public ActionResult Index() { IQueryable<SysModule> menus = db.SysModule.AsQueryable().Where(a=>a.ParentID=="0"); StringBuilder sb = new StringBuilder(); bool firstFlag = true;//The first default expansion GetChildMenus(ref sb, menus, firstFlag);//The second-level menu ViewBag.Menus = sb.ToString(); return View(); } //Recursively call public void GetChildMenus(ref StringBuilder sb, IQueryable<SysModule> menus,bool firstFlag)//The second-level menu { int count = 0; if(!firstFlag) sb.Append("<ul class='sub-menu'>"); foreach (var m in menus) { IQueryable<SysModule> menusChild = db.SysModule.AsQueryable().Where(a => a.ParentID == m.ID); count = menusChild.Count(); sb.AppendFormat("<li class='{0}'>",firstFlag?"start actove open":""); sb.AppendFormat("<a href='{0}'><i class='{1}'></i><span class='title'>{2}</span>{3}</a>", count > 0 ? "javascript:;" : m.Url, m.Iconic, m.Name, count > 0 ? "<span class='arrow '></span>" : ""); firstFlag = false; if (count > 0) GetChildMenus(ref sb, menusChild,firstFlag); sb.Append("</li>"); } if (!firstFlag) sb.Append("</ul>"); }}}去掉提取的li替换成@Html.Raw(ViewBag.Menus)
6。概要
前端这种东西最考验人的耐心，不信你自己拼接一下
最終効果
著者：ymnets
出典：http：//ymnets.cnblogs.com/
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。