最近在学习bootstrap因此在网上找了一个bootstrap管理后台模板，不过bootstrap的版本是2.0的版本，先学习学习吧 ：）
PS：本来打算领域驱动模型的，但是我也是处于学习阶段，而且还是还没有入门，所以先打算弄一个简单三层的，然后再重构到领域模型。。积累还不够，努力学习ing
1、URMS.Model.EF我用的是EntityFramework 的基于数据库的CodeFirst模式生成的
2、URMS.UI.Web.Admin是用的MVC5
1、创建根布局页_Layout.cshtml
1 <!DOCTYPE html> 2 3 <!-- 4 5 Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 2.3.1 6 7 Version: 1.3 8 9 Author: KeenThemes 10 11 Website: http://www.keenthemes.com/preview/?theme=metronic 12 13 Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 14 15 --> 16 <!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]--> 17 <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]--> 18 <!--[if !IE]> <html lang="en" class="no-js"> <![endif]--> 19 20 <html> 21 <!-- BEGIN HEAD --> 22 <head> 23 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 24 <meta charset="utf-8" /> 25 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 26 <meta content="Lyra | 天琴通用后台管理系统" name="description" /> 27 <meta content="lyra" name="author" /> 28 <title>@ViewBag.Title - Lyra | 天琴通用后台管理系统</title> 29 <!--BEGIN GLOBAL MANDATORY STYLES 全局样式加载--> 30 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" /> 31 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" /> 32 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/font-awesome.min.css")" rel="stylesheet" type="text/css" /> 33 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style-metro.css")" rel="stylesheet" type="text/css" /> 34 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style.css")" rel="stylesheet" type="text/css" /> 35 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/style-responsive.css")" rel="stylesheet" type="text/css" /> 36 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/default.css")" rel="stylesheet" type="text/css" id="style_color" /> 37 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/uniform.default.css")" rel="stylesheet" type="text/css" /> 38 <!--END GLOBAL MANDATORY STYLES 全局样式加载--> 39 <!-- BEGIN PAGE LEVEL STYLES 页面级样式加载--> 40 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jquery.gritter.css")" rel="stylesheet" type="text/css" /> 41 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/daterangepicker.css")" rel="stylesheet" type="text/css" /> 42 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/fullcalendar.css")" rel="stylesheet" type="text/css" /> 43 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jqvmap.css")" rel="stylesheet" type="text/css" media="screen" /> 44 <link href="@Url.Content("~/Plugins/metronic.bootstrap/css/jquery.easy-pie-chart.css")" rel="stylesheet" type="text/css" media="screen" /> 45 <!-- END PAGE LEVEL STYLES 页面级样式加载--> 46 <link rel="shortcut icon" href="@Url.Content("~/Plugins/metronic.bootstrap/image/favicon.ico")" /> 47 @RenderSection("css", required: false) 48 </head> 49 50 <body class="page-header-fixed"> 51 @RenderBody() 52 <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> 53 <!-- BEGIN CORE PLUGINS --> 54 @*<script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-1.10.1.min.js")" type="text/javascript"></script>*@ 55 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-migrate-1.2.1.min.js")" type="text/javascript"></script> 56 <!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> 57 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-ui-1.10.1.custom.min.js")" type="text/javascript"></script> 58 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/bootstrap.min.js")" type="text/javascript"></script> 59 60 <!--[if lt IE 9]> 61 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/excanvas.min.js")"></script> 62 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/respond.min.js")"></script> 63 <![endif]--> 64 65 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.slimscroll.min.js")" type="text/javascript"></script> 66 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.blockui.min.js")" type="text/javascript"></script> 67 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.cookie.min.js")" type="text/javascript"></script> 68 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.uniform.min.js")" type="text/javascript"></script> 69 <!-- END CORE PLUGINS --> 70 <!-- BEGIN PAGE LEVEL SCRIPTS --> 71 <script src="@Url.Content("~/Plugins/metronic.bootstrap/js/app.js")" type="text/javascript"></script> 72 <!-- END PAGE LEVEL SCRIPTS --> 73 <script type="text/javascript"> 74 jQuery(document).ready(function () { 75 App.init(); // initlayout and core plugins 76 }); 77 </script> 78 @RenderSection("scripts", required: false) 79 </body> 80 </html>
2、创建带布局的视图页_LayoutHeader.cshtml 继承自_Layout.cshtml
1 @{ 2 Layout = "~/Views/Shared/_Layout.cshtml"; 3 } 4 <!-- BEGIN HEADER --> 5 <div class="header navbar navbar-inverse navbar-fixed-top"> 6 <!-- BEGIN TOP NAVIGATION BAR --> 7 <div class="navbar-inner"> 8 <div class="container-fluid"> 9 <!-- BEGIN LOGO --> 10 <a class="brand" href="@Url.Action("Index","Home")"> 11 <img src="@Url.Content("~/Plugins/metronic.bootstrap/image/logo.png")" alt="logo" /> 12 </a> 13 <!-- END LOGO --> 14 <!-- BEGIN RESPONSIVE MENU TOGGLER --> 15 <a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> 16 <img src="@Url.Content("~/Plugins/metronic.bootstrap/image/menu-toggler.png")" alt="" /> 17 </a> 18 <!-- END RESPONSIVE MENU TOGGLER --> 19 <!-- BEGIN TOP NAVIGATION MENU --> 20 <ul class="nav pull-right"> 21 <!-- BEGIN NOTIFICATION DROPDOWN --> 22 <li class="dropdown" id="header_notification_bar"> 23 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 24 <i class="icon-warning-sign"></i> 25 <span class="badge">6</span> 26 </a> 27 <ul class="dropdown-menu extended notification"> 28 <li> 29 <p>你有6条新通知</p> 30 </li> 31 <li> 32 <a href="#"> 33 <span class="label label-success"><i class="icon-plus"></i></span> 34 New user registered. 35 <span class="time">Just now</span> 36 </a> 37 </li> 38 <li> 39 <a href="#"> 40 <span class="label label-important"><i class="icon-bolt"></i></span> 41 Server #12 overloaded. 42 <span class="time">15 mins</span> 43 </a> 44 </li> 45 <li> 46 <a href="#"> 47 <span class="label label-warning"><i class="icon-bell"></i></span> 48 Server #2 not respoding. 49 <span class="time">22 mins</span> 50 </a> 51 </li> 52 <li> 53 <a href="#"> 54 <span class="label label-info"><i class="icon-bullhorn"></i></span> 55 Application error. 56 <span class="time">40 mins</span> 57 </a> 58 </li> 59 <li> 60 <a href="#"> 61 <span class="label label-important"><i class="icon-bolt"></i></span> 62 Database overloaded 68%. 63 <span class="time">2 hrs</span> 64 </a> 65 </li> 66 <li> 67 <a href="#"> 68 <span class="label label-important"><i class="icon-bolt"></i></span> 69 2 user IP blocked. 70 <span class="time">5 hrs</span> 71 </a> 72 </li> 73 <li class="external"> 74 <a href="#">See all notifications <i class="m-icon-swapright"></i></a> 75 </li> 76 </ul> 77 </li> 78 <!-- END NOTIFICATION DROPDOWN --> 79 <!-- BEGIN INBOX DROPDOWN --> 80 <li class="dropdown" id="header_inbox_bar"> 81 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 82 <i class="icon-envelope"></i> 83 <span class="badge">5</span> 84 </a> 85 <ul class="dropdown-menu extended inbox"> 86 <li> 87 <p>你有1条新消息</p> 88 </li> 89 <li> 90 <a href="#"> 91 <span class="photo"><img src="@Url.Content("~/Plugins/metronic.bootstrap/image/avatar2.jpg")" alt="" /></span> 92 <span class="subject"> 93 <span class="from">Lisa Wong</span> 94 <span class="time">Just Now</span> 95 </span> 96 <span class="message"> 97 Vivamus sed auctor nibh congue nibh. auctor nibh 98 auctor nibh... 99 </span> 100 </a> 101 </li> 102 </ul> 103 </li> 104 <!-- END INBOX DROPDOWN --> 105 <!-- BEGIN TODO DROPDOWN --> 106 <li class="dropdown" id="header_task_bar"> 107 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 108 <i class="icon-tasks"></i> 109 <span class="badge">5</span> 110 </a> 111 <ul class="dropdown-menu extended tasks"> 112 <li> 113 <p>你有12个待处理事务</p> 114 </li> 115 <li> 116 <a href="#"> 117 <span class="task"> 118 <span class="desc">New release v1.2</span> 119 <span class="percent">30%</span> 120 </span> 121 <span class="progress progress-success "> 122 <span style="width: 30%;" class="bar"></span> 123 </span> 124 </a> 125 </li> 126 </ul> 127 </li> 128 <!-- END TODO DROPDOWN --> 129 <!-- BEGIN USER LOGIN DROPDOWN --> 130 <li class="dropdown user"> 131 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 132 <img alt="" src="@Url.Content("~/Plugins/metronic.bootstrap/image/avatar1_small.jpg")" /> 133 <span class="username">Bob Nilson</span> 134 <i class="icon-angle-down"></i> 135 </a> 136 <ul class="dropdown-menu"> 137 <li><a href="extra_profile.html"><i class="icon-user"></i> My Profile</a></li> 138 <li><a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li> 139 <li><a href="inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li> 140 <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li> 141 <li class="divider"></li> 142 <li><a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li> 143 <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li> 144 </ul> 145 </li> 146 <!-- END USER LOGIN DROPDOWN --> 147 </ul> 148 <!-- END TOP NAVIGATION MENU --> 149 </div> 150 </div> 151 <!-- END TOP NAVIGATION BAR --> 152 </div> 153 <!-- END HEADER --> 154 @RenderBody()
3、创建布局视图页_LayoutContainer.cshtml 继承自_LayoutHeader.cshtml
1 @{ 2 Layout = "~/Views/Shared/_LayoutHeader.cshtml"; 3 } 4 <!-- BEGIN CONTAINER --> 5 <div class="page-container"> 6 <!-- BEGIN SIDEBAR --> 7 <div class="page-sidebar nav-collapse collapse"> 8 <!-- BEGIN SIDEBAR MENU --> 9 <ul class="page-sidebar-menu"> 10 <li> 11 <!-- BEGIN SIDEBAR TOGGLER BUTTON --> 12 <div class="sidebar-toggler hidden-phone"></div> 13 <!-- END SIDEBAR TOGGLER BUTTON --> 14 </li> 15 <li> 16 <!-- BEGIN RESPONSIVE QUICK SEARCH FORM --> 17 <form class="sidebar-search"> 18 <div class="input-box"> 19 <a href="javascript:;" class="remove"></a> 20 <input type="text" placeholder="搜索..." /> 21 <input type="button" class="submit" value=" " /> 22 </div> 23 </form> 24 <!-- END RESPONSIVE QUICK SEARCH FORM --> 25 </li> 26 <li class="start active "> 27 28 <a href="@Url.Action("Index","Home")"> 29 <i class="icon-home"></i> 30 <span class="title">首页</span> 31 <span class="selected"></span> 32 </a> 33 34 </li> 35 </ul> 36 <!-- END SIDEBAR MENU --> 37 </div> 38 <!-- END SIDEBAR --> 39 <!-- BEGIN PAGE --> 40 <div class="page-content"> 41 @RenderBody() 42 </div> 43 <!-- END PAGE --> 44 </div> 45 <!-- END CONTAINER --> 46 <!-- BEGIN FOOTER --> 47 <div class="footer"> 48 <div class="footer-inner"> 49 2014-@DateTime.Now.Year © Lyra | 天琴通用后台管理系统. 50 </div> 51 <div class="footer-tools"> 52 <span class="go-top"> 53 <i class="icon-angle-up"></i> 54 </span> 55 </div> 56 </div> 57 <!-- END FOOTER -->
4、修改_ViewStart.cshtml的代码为： Layout = "~/Views/Shared/_LayoutContainer.cshtml";
5、到此基本的模板框架就搭建起来了，运行项目效果如下
更新会比较慢，我也是边学边做的，^_^ 欢迎拍砖
