SRF之页面
页面呈现采用Razor模板
1、母模板说明
_Main.cshtml：基础母模板
_ListLayout.cshtml：列表页面
_EditDialog.cshtml：编辑对话框
_EditLayout.cshtml：编辑页面
_ViewDialog.cshtml：查看对话框
_ViewLayout.cshtml：查看页面
(母版页在Views\Shared目录下，xxxLayout页都是基于_Main.cshtml页)
2、列表页和对话框
列表页：
列表页采用_ListLayout.cshtml作为母版页，可以在列表页编写以下Section
@section header：这部分内容将在包含在<head>,用于编写js和css。
@section toolbar：工具栏，
@section searchbar：搜索栏，
@section list：列表部分
如下图所示：
编辑页：
编辑页采用_ViewDialog.cshtml作为母版页，可以在列表页编写以下Section
@section header：这部分内容将在<head></head>呈现,用于编写js和css
其它部分为页面的body内容。
如下图所示，红框部分为编辑页的页面（在列表页用iframe加载编辑页）
编辑页包含以下js脚本
//点击“保存”按钮会调用到编辑页的函数onDialogClose() function onDialogClose(msg) { $.ajaxSubmit(); } //该函数用ajax提交表单，提交成功后调用onComplete关闭窗口 function onComplete() { $.dialog.close("ok"); //关闭窗口 }
3、 HtmlHelper
除了ASP.net MVC 提供的HtmlHelper外，框架还提供以下HtmlHelper
（在页面上添加@using aSite.UI.Html)
(1)、分页
@Html.PageBar()
(2)、字典下拉框和字典标签
@Html.DictDropDownList()、@Html.DictDropDownListFor()
@Html.DictText()、@Html.DictTextFor()
(3)、枚举型下拉框和标签
@Html.EnumDropDownList()、@Html.EnumDropDownListFor()、
@Html.EnumText()、@Html.EnumTextFor()
(4)、表格
@Html.GridHeader() //表格标题
(5)、复选框
@Html.CheckBox()
(6)、树形结构的json数据
@Html.TreeJsonFor()
(7)、文本显示
@Html.Text() 、@Html.TextFor() 、@Html.BooleanText()
(8)、树形列表选择
@Html.TreeSelectorFor
(9)、选择控件
@Html.SelectorFor
4、js和css
框架在页面用到以下JS
jquery1.7、bootstrap2.3.2
jq插件：
jquery-tipsy：用于显示提示信息
zTree：树形列表
jquery.cookie：cookie读写
.net MVC自带的js：
jquery.unobtrusive-ajax.js、jquery.validate.min.js、jquery.validate.unobtrusive.js
其中的有对jquery.unobtrusive-ajax.js、jquery.validate.unobtrusive.js、bootstrap-modal.js 3个js文件做小部分的修改，具体可参考代码注释，另外新增css文件bootstrap-ext.css覆盖部分bootstrap自身的样式。
框架提供的js库
common.js：提供常用的js函数
dialog.js：对话框相关的js，基于bootstrap-modal.js
5、导航和菜单栏
导航和菜单是基于MvcSiteMap实现
Views/Shared/DisplayTemplates目录下提供导航和菜单显示的模板
用法可参考文章：MvcSiteMap用法
