MVC+BootStrap 企业通用型框架搭建 ---（2）框架布局及模板页的创建

模板页面介绍 _Header.cshtml头部页面 ,_Footer.cshtml底部页面 ,Main.cshtml框架主页面, _Theme.cshtml(主题页面),_Menu.cshtml(左侧菜单页面）,_Style.cshtml(通用样式页面）

_Header.cshtml 代码：

@{
ViewBag.Title = "_Header";
}
<script type="text/ecmascript">
$(function () {
$("#exist").click(function () {
$.ajax({
type: "POST",
url: "../Shared/DieSystem?" + Math.random().toString(),
success: function () {
window.location.href = "../User/Login";
}
});
});
});
</script>
<div class="header-inner">
<!-- BEGIN LOGO -->
<a class="navbar-brand" href="index.html" >
<img src="~/Content/assets/img/logo.png" alt="logo" class="img-responsive"/>

</a>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<img src="~/Content/assets/img/menu-toggler.png" />
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav navbar-nav pull-right">
<!-- BEGIN NOTIFICATION DROPDOWN -->
<li class="dropdown" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="fa fa-warning"></i>
<span class="badge">
6
</span>
</a>
<ul class="dropdown-menu extended notification">
<li>
<p>
You have 14 new notifications
</p>
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;">
<li>
<a href="#">
<span class="label label-sm label-icon label-success">
<i class="fa fa-plus"></i>
</span>
New user registered.
<span class="time">
Just now
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-danger">
<i class="fa fa-bolt"></i>
</span>
Server #12 overloaded.
<span class="time">
15 mins
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-warning">
<i class="fa fa-bell-o"></i>
</span>
Server #2 not responding.
<span class="time">
22 mins
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-info">
<i class="fa fa-bullhorn"></i>
</span>
Application error.
<span class="time">
40 mins
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-danger">
<i class="fa fa-bolt"></i>
</span>
Database overloaded 68%.
<span class="time">
2 hrs
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-danger">
<i class="fa fa-bolt"></i>
</span>
2 user IP blocked.
<span class="time">
5 hrs
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-warning">
<i class="fa fa-bell-o"></i>
</span>
Storage Server #4 not responding.
<span class="time">
45 mins
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-info">
<i class="fa fa-bullhorn"></i>
</span>
System Error.
<span class="time">
55 mins
</span>
</a>
</li>
<li>
<a href="#">
<span class="label label-sm label-icon label-danger">
<i class="fa fa-bolt"></i>
</span>
Database overloaded 68%.
<span class="time">
2 hrs
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="#">
See all notifications <i class="m-icon-swapright"></i>
</a>
</li>
</ul>
</li>
<!-- END NOTIFICATION DROPDOWN -->
<!-- BEGIN INBOX DROPDOWN -->
<li class="dropdown" id="header_inbox_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="fa fa-envelope"></i>
<span class="badge">
5
</span>
</a>
<ul class="dropdown-menu extended inbox">
<li>
<p>
You have 12 new messages
</p>
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;">
<li>
<a href="inbox.html-a=view.htm" >
<span class="photo">
<img src="~/Content/assets/img/avatar2.jpg" />
</span>
<span class="subject">
<span class="from">
Lisa Wong
</span>
<span class="time">
Just Now
</span>
</span>
<span class="message">
Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html-a=view.htm" >
<span class="photo">
<img src="~/Content/assets/img/avatar3.jpg" />
</span>
<span class="subject">
<span class="from">
Richard Doe
</span>
<span class="time">
16 mins
</span>
</span>
<span class="message">
Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html-a=view.htm" >
<span class="photo">
<img src="~/Content/assets/img/avatar1.jpg" />
</span>
<span class="subject">
<span class="from">
Bob Nilson
</span>
<span class="time">
2 hrs
</span>
</span>
<span class="message">
Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html-a=view.htm">
<span class="photo">
<img src="~/Content/assets/img/avatar2.jpg" />
</span>
<span class="subject">
<span class="from">
Lisa Wong
</span>
<span class="time">
40 mins
</span>
</span>
<span class="message">
Vivamus sed auctor 40% nibh congue nibh...
</span>
</a>
</li>
<li>
<a href="inbox.html-a=view.htm" >
<span class="photo">
<img src="~/Content/assets/img/avatar3.jpg" />
</span>
<span class="subject">
<span class="from">
Richard Doe
</span>
<span class="time">
46 mins
</span>
</span>
<span class="message">
Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="inbox.html" >
See all messages <i class="m-icon-swapright"></i>
</a>
</li>
</ul>
</li>
<!-- END INBOX DROPDOWN -->
<!-- BEGIN TODO DROPDOWN -->
<li class="dropdown" id="header_task_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="fa fa-tasks"></i>
<span class="badge">
5
</span>
</a>
<ul class="dropdown-menu extended tasks">
<li>
<p>
You have 12 pending tasks
</p>
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;">
<li>
<a href="#">
<span class="task">
<span class="desc">
New release v1.2
</span>
<span class="percent">
30%
</span>
</span>
<span class="progress">
<span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
40% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
Application deployment
</span>
<span class="percent">
65%
</span>
</span>
<span class="progress progress-striped">
<span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
65% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
Mobile app release
</span>
<span class="percent">
98%
</span>
</span>
<span class="progress">
<span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
98% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
Database migration
</span>
<span class="percent">
10%
</span>
</span>
<span class="progress progress-striped">
<span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
10% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
Web server upgrade
</span>
<span class="percent">
58%
</span>
</span>
<span class="progress progress-striped">
<span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
58% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
Mobile development
</span>
<span class="percent">
85%
</span>
</span>
<span class="progress progress-striped">
<span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
85% Complete
</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">
New UI release
</span>
<span class="percent">
18%
</span>
</span>
<span class="progress progress-striped">
<span style="width: 18%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">
18% Complete
</span>
</span>
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="#">
See all tasks <i class="m-icon-swapright"></i>
</a>
</li>
</ul>
</li>
<!-- END TODO DROPDOWN -->
<!-- BEGIN USER LOGIN DROPDOWN -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<img src="~/Content/assets/img/avatar1_small.jpg" />
<span class="username">
Bob Nilson
</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="extra_profile.html" >
<i class="fa fa-user"></i>我的信息
</a>
</li>
<li>
<a href="page_calendar.html" >
<i class="fa fa-calendar"></i> 我的日程
</a>
</li>
<li>
<a href="inbox.html" >
<i class="fa fa-envelope"></i> 我的信箱
<span class="badge badge-danger">
3
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tasks"></i> 我的任务
<span class="badge badge-success">
7
</span>
</a>
</li>
<li class="divider">
</li>
<li>
<a href="javascript:;" id="trigger_fullscreen">
<i class="fa fa-arrows"></i> 宽屏
</a>
</li>
<li>
<a href="extra_lock.html" >
<i class="fa fa-lock"></i> 锁屏
</a>
</li>
<li>
<a href="#" id="exist" >
<i class="fa fa-key"></i> 退出
</a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
<!-- END TOP NAVIGATION MENU -->
</div>

_Footer.cshtml：底部页面代码

@{
ViewBag.Title = "_Footer";
}
<div class="footer">
<div class="footer-inner">
2014 &copy; 通用企业管理综合平台
</div>
<div class="footer-tools">
<span class="go-top">
<i class="fa fa-angle-up"></i>
</span>
</div>
</div>

Main.cshtml：主页面代码

@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->

<link href="~/Content/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="~/Content/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/Content/assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/pages/tasks.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="~/Content/assets/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="~/Content/assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="~/Content/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="~/Content/assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js"type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->

<script src="~/Content/assets/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap-daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/gritter/js/jquery.gritter.js" type="text/javascript"></script>
<!-- IMPORTANT! fullcalendar depends on jquery-ui-1.10.3.custom.min.js for drag & drop support -->
<script src="~/Content/assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="~/Content/assets/scripts/core/app.js" type="text/javascript"></script>
<script src="~/Content/assets/scripts/custom/index.js" " type="text/javascript"></script>
<script src="~/Content/assets/scripts/custom/tasks.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- END JAVASCRIPTS -->
<script type="text/javascript">
//获取字符串长度
String.prototype.getStrlen = function () {
//中文1英文2个长度
var _len = this.length; var _code; var _strlen = 0;
for (var i = 0; i < _len; i++) {
_code = this.charCodeAt(i);
if (_code >= 0 && _code <= 128) _strlen += 1;
else _strlen += 2;
}
return _strlen;
}
//验证字符串是否是QQ
//腾讯QQ号从10000开始
String.prototype.isqq = function () {
var _isqq = /^[1-9][0-9]{4,}$/;
if (this.match(_isqq)) return true;
else return false;
}
//验证字符串是否是邮箱地址
String.prototype.isEmail = function () {
var _isEmail = /^[\w-]+(\.[\w-]+)*@@[\w-]+(\.[A-Za-z-]+)+$/;
if (this.match(_isEmail)) { return true; }
else { return false; }
}
//验证字符串是否是电话号码
//支持130-139 150-159 180-189 13位数的电话号码
String.prototype.isTelPhone = function () {
var _isPhone = /^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
if (_isPhone.exec(this)) { return true; }
else { return false; }
}
//检测是否含中文
String.prototype.isChinese = function () {
var _isChinese = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
if (this.match(_isChinese)) return true;
else return false;
}
//检测全部都是中文
String.prototype.isAllChn = function () {
var reg = /^[\u4E00-\u9FA5]+$/;
if (!reg.test(this)) {
return false;
}
return true;
}
//匹配国内电话号码(0511-4405222 或 021-87888822)
String.prototype.isTel = function () {
//"兼容格式: 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"
return (/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(this));
}
//正整数
function isPInt(str) {
var reg1 = /^\d+$/;
if (reg1.exec(str)) { return true; }
else { return false; }
}
$(function () {
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", ‘igm‘);
var alr = $("#ycf-alert");
var ahtml = alr.html();
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find(‘.ok‘).removeClass(‘btn-success‘).addClass(‘btn-primary‘);
alr.find(‘.cancel‘).hide();
_dialog(options);

return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find(‘.ok‘).click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find(‘.cancel‘).show();
_dialog(options);

return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find(‘.ok‘).click(function () { callback(true) });
alr.find(‘.cancel‘).click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: ‘static‘
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
$.ajax({
type: "POST",
url: "../Shared/GetALLNavbarMenu?" + Math.random().toString(),
data:{navname:""},
success: function (msg) {
$("#nav_menu").empty();
$("#nav_menu").append(msg);
$.ajax({
type: "POST",
url: "../Shared/GetMenu_Operation?" + Math.random().toString(),
success: function (msg) {
if (msg.Menu_id == "" | msg.Menu_id == null | msg.Menu_id == undefined) {
$("#nav_menu>ul>li").eq(2).removeClass("active").addClass("active");
}
$("#nav_menu>ul>li>a").append("<span class=\"selected\"></span>");
$("#nav_menu>ul>li").removeClass("active open");
$("#" + msg.Menu_id).removeClass("active open").addClass("active open");
$("#" + msg.Menu_id).children("ul").css("display", "block");
}
});
App.init();
}
});

});
function ChangeStyle(obj) {
$("#nav_menu>ul>li").removeClass("active");
var title = $(obj).parent().attr("id");
$(obj).parent().removeClass("active").addClass("active");
}
function ChangeliStyle(obj) {
$.ajax({
type: "POST",
url: "../Shared/AddMenu_Operation?" + Math.random().toString(),
data:{menu_id:$(obj).parent().attr("id")},
success: function (msg) {
}
});
}
function confirm(msg,fn1,fn2) {
Modal.confirm(
{
msg: msg
}).on( function (e) {
if (e) {
fn1();
}
else {
fn2();
}
});;
}
function alert(title,msg,fn1) {
Modal.alert(
{
msg: msg,
title: title,
btnok: ‘确定‘,
btncl: ‘取消‘
}).on(function (e) {
if (e) {
fn1();
}
});
}

</script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed" >
<!-- system modal start -->
<div id="ycf-alert" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body ">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>
<!-- system modal end -->
<!-- BEGIN HEADER -->
<div class="header navbar navbar-fixed-top">
<!-- BEGIN TOP NAVIGATION BAR -->
@Html.Partial("_Header")
<!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<!-- add "navbar-no-scroll" class to disable the scrolling of the sidebar menu -->

<!-- BEGIN SIDEBAR MENU -->
@Html.Partial("_Menu")
<!-- END SIDEBAR MENU -->
<input id="nav_menuid" value="0" style="display:none;" />
<input id="parent_menu_id" value="0" style="display:none;" />
</div>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" >
<!-- BEGIN STYLE CUSTOMIZER -->
@Html.Partial("_Theme")
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN PAGE HEADER-->
<!-- END PAGE HEADER-->
<!-- BEGIN DASHBOARD STATS -->
@RenderBody()
</div>

</div>
<!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
@Html.Partial("_Footer")
<!-- END FOOTER -->
</body>
<!-- END BODY -->
</html>

_Theme主题页面代码

@{
ViewBag.Title = "_Theme";
}
<div class="theme-panel hidden-xs hidden-sm">
<div class="toggler">
</div>
<div class="toggler-close">
</div>
<div class="theme-options">
<div class="theme-option theme-colors clearfix">
<span>
模板颜色
</span>
<ul>
<li class="color-black current color-default" data-style="default">
</li>
<li class="color-blue" data-style="blue">
</li>
<li class="color-brown" data-style="brown">
</li>
<li class="color-purple" data-style="purple">
</li>
<li class="color-grey" data-style="grey">
</li>
<li class="color-white color-light" data-style="light">
</li>
</ul>
</div>
<div class="theme-option">
<span>
页面布局
</span>
<select class="layout-option form-control input-small">
<option value="fluid" selected="selected">默认</option>
<option value="boxed">切换窄屏</option>
</select>
</div>
<div class="theme-option">
<span>
头部
</span>
<select class="header-option form-control input-small">
<option value="fixed" selected="selected">固定头部</option>
<option value="default">默认</option>
</select>
</div>
<div class="theme-option">
<span>
侧边栏
</span>
<select class="sidebar-option form-control input-small">
<option value="fixed">固定侧边栏</option>
<option value="default" selected="selected">默认</option>
</select>
</div>
<div class="theme-option">
<span>
侧边栏 位置
</span>
<select class="sidebar-pos-option form-control input-small">
<option value="left" selected="selected">左边</option>
<option value="right">右边</option>
</select>
</div>
<div class="theme-option">
<span>
底部
</span>
<select class="footer-option form-control input-small">
<option value="fixed">固定底部</option>
<option value="default" selected="selected">默认</option>
</select>
</div>
</div>
</div>

_Style 通用样式调用页面

@{
ViewBag.Title = "_Style";
}
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->

<link href="~/Content/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->

<link href="~/Content/assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/assets/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="~/Content/assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->

<!--[if lt IE 9]>
<script src="~/Content/assets/plugins/respond.min.js"></script>
<script src="~/Content/assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="~/Content/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="~/Content/assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="~/Content/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="~/Content/assets/scripts/core/app.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- END JAVASCRIPTS -->
<link href="~/Content/PagedList.css" rel="stylesheet" />
<script type="text/javascript">
//获取字符串长度
String.prototype.getStrlen = function () {
//中文1英文2个长度
var _len = this.length; var _code; var _strlen = 0;
for (var i = 0; i < _len; i++) {
_code = this.charCodeAt(i);
if (_code >= 0 && _code <= 128) _strlen += 1;
else _strlen += 2;
}
return _strlen;
}
//验证字符串是否是QQ
//腾讯QQ号从10000开始
String.prototype.isqq = function () {
var _isqq = /^[1-9][0-9]{4,}$/;
if (this.match(_isqq)) return true;
else return false;
}
//验证字符串是否是邮箱地址
String.prototype.isEmail = function () {
var _isEmail = /^[\w-]+(\.[\w-]+)*@@[\w-]+(\.[A-Za-z-]+)+$/;
if (this.match(_isEmail)) { return true; }
else { return false; }
}
//验证字符串是否是电话号码
//支持130-139 150-159 180-189 13位数的电话号码
String.prototype.isTelPhone = function () {
var _isPhone = /^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
if (_isPhone.exec(this)) { return true; }
else { return false; }
}
//检测是否含中文
String.prototype.isChinese = function () {
var _isChinese = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
if (this.match(_isChinese)) return true;
else return false;
}
//检测全部都是中文
String.prototype.isAllChn = function () {
var reg = /^[\u4E00-\u9FA5]+$/;
if (!reg.test(this)) {
return false;
}
return true;
}
//匹配国内电话号码(0511-4405222 或 021-87888822)
String.prototype.isTel = function () {
//"兼容格式: 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)"
return (/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(this));
}

</script>
</head>

<body>
@RenderBody()
</body>
</html>

 _Menu 左侧菜单页面

ViewBag.Title = "_Menu";
}

<div id="nav_menu"></div>