2000万优秀解决方案库，覆盖所有编程及软件开发类，极速查询
今日已更新 2293 篇代码解决方案
2024-08-01 19:29:51 218人阅读
最近在学习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: KeenThemes10 11 Website: http://www.keenthemes.com/preview/?theme=metronic12 13 Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/402146914 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=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />31 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />32 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />33 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/style-metro.css")" rel="stylesheet" type="text/css" />34 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/style.css")" rel="stylesheet" type="text/css" />35 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/style-responsive.css")" rel="stylesheet" type="text/css" />36 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/default.css")" rel="stylesheet" type="text/css" id="style_color" />37 <link href=http://www.mamicode.com/"@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=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/jquery.gritter.css")" rel="stylesheet" type="text/css" />41 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/daterangepicker.css")" rel="stylesheet" type="text/css" />42 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/fullcalendar.css")" rel="stylesheet" type="text/css" />43 <link href=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/css/jqvmap.css")" rel="stylesheet" type="text/css" media="screen" />44 <link href=http://www.mamicode.com/"@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=http://www.mamicode.com/"@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=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>53 <!-- BEGIN CORE PLUGINS -->54 @*<script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-1.10.1.min.js")" type="text/javascript"></script>*@55 <script src=http://www.mamicode.com/"@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=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/jquery-ui-1.10.1.custom.min.js")" type="text/javascript"></script>58 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>59 60 <!--[if lt IE 9]>61 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/excanvas.min.js")"></script>62 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/respond.min.js")"></script>63 <![endif]-->64 65 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.slimscroll.min.js")" type="text/javascript"></script>66 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.blockui.min.js")" type="text/javascript"></script>67 <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/js/jquery.cookie.min.js")" type="text/javascript"></script>68 <script src=http://www.mamicode.com/"@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=http://www.mamicode.com/"@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 plugins76 });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=http://www.mamicode.com/"@Url.Action("Index","Home")"> 11 <img src=http://www.mamicode.com/"@Url.Content("~/Plugins/metronic.bootstrap/image/logo.png")" alt="logo" /> 12 </a> 13 <!-- END LOGO --> 14 <!-- BEGIN RESPONSIVE MENU TOGGLER --> 15 <a href=http://www.mamicode.com/"javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> 16 <img src=http://www.mamicode.com/"@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=http://www.mamicode.com/"#" 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#"> 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=http://www.mamicode.com/"#">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=http://www.mamicode.com/"#" 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=http://www.mamicode.com/"#"> 91 <span class="photo"><img src=http://www.mamicode.com/"@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=http://www.mamicode.com/"#" 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=http://www.mamicode.com/"#">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=http://www.mamicode.com/"#" class="dropdown-toggle" data-toggle="dropdown">132 <img alt="" src=http://www.mamicode.com/"@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=http://www.mamicode.com/"extra_profile.html"><i class="icon-user"></i> My Profile</a></li>138 <li><a href=http://www.mamicode.com/"page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>139 <li><a href=http://www.mamicode.com/"inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li>140 <li><a href=http://www.mamicode.com/"#"><i class="icon-tasks"></i> My Tasks</a></li>141 <li class="divider"></li>142 <li><a href=http://www.mamicode.com/"extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li>143 <li><a href=http://www.mamicode.com/"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=http://www.mamicode.com/"javascript:;" class="remove"></a>20 <input type="text" placeholder="搜索..." />21 <input type="button" class="submit" value=http://www.mamicode.com/" " />22 </div>23 </form>24 <!-- END RESPONSIVE QUICK SEARCH FORM -->25 </li>26 <li class="start active ">27 28 <a href=http://www.mamicode.com/"@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、到此基本的模板框架就搭建起来了，运行项目效果如下
更新会比较慢，我也是边学边做的，^_^ 欢迎拍砖
轻量级权限管理系统——后台模板
https://www.u72.net/daima/nzv6k.html
联系 我们
回到 顶部
