后台采用.net MVC框架，前端采用requirejs。整个系统页面布局基本不变，每个页面只改变Main_Content部分。
模板页cshtml：
<!DOCTYPE html>
<!--公用的模版页面_layout.cshtml-->
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon">
<!--引入公共样式，需要在BundleConfig.cs 文件里定义样式集-->
@Styles.Render("~/css/common")
<!--子页面中@section cssImport部分（<link>标签内容）将要显示的位置-->
@RenderSection("cssImport", required: false)
<!-- 同步引入requirejs -->
<script src="~/js/require.js"> </script>
<script src="~/js/json2.js"></script>
</head>
<body>
<!--—子页面内容中除去@section name部分后将要显示的区域-->
<div class="main_content">@RenderBody()</div>
<!-- 公用部分js，单独封装成一个app模块，在子页面的js依赖中引入 -->
<script type="text/javascript">
//...
</script>
<!--子页面中@section jsImport部分（<script>标签内容）将要显示的位置，尽量在文档结尾处-->
@RenderSection("jsImport", required: false)
</body>
</html>
子页面cshtml：
@{
ViewBag.Title = "子页面标题";
}
<!--当前子页面用到的样式，会并到模版页面@RenderSection('cssImport')注解处-->
@section CssImport{
<link href="~/css/vender/jquery.jscrollpane.css" rel="stylesheet" />
<link href="~/css/main/subPage.css" rel="stylesheet" />
}
<!-- 子页面html标签部分 -->
<form name="CONDITION_FORM" id="js-form" action="" method="post" style="display:none">
<input type="text" name="queryStr" id="queryStr" />
</form>
<div class="selectModel">...</div>
<!-- 当前子页面js逻辑，会并到模版页面@RenderSection('jsImport')注解处 -->
@section jsImport{
<script>
require('~/js/config',function(){
require(['currentPage'], function (module) {
module.init();
});
})
</script>
}子页面js：
//子页面业务模块，app为公用部分模块
define(['app','components/jtable/jtable'], function (app, jtable) {
'use strict';
var module = {
options: {},
init: function (options) {
// 合并参数
var self = this;
_.map(options, function (item, key) { self.options[key] = item; });
//业务逻辑
this.bindEvents();
},
bindEvents: function () {
//...
}
};
return module;
});