• SRF之页面


    页面呈现采用Razor模板
     
    1、母模板说明
    _Main.cshtml:基础母模板
    _ListLayout.cshtml:列表页面
    _EditDialog.cshtml:编辑对话框
    _EditLayout.cshtml:编辑页面
    _ViewDialog.cshtml:查看对话框
    _ViewLayout.cshtml:查看页面
    (母版页在ViewsShared目录下,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用法
  • 相关阅读:
    C语言学习笔记之 程序流程结构
    C语言学习笔记之 类型转换
    C语言学习笔记之 标准输入输出函数
    C语言学习笔记之 运算符
    bzoj 4322 东西分配问题
    bzoj 3240 矩阵乘法+十进制快速幂
    bzoj 4017 子序列和的异或以及异或的和
    bzoj 1934 最小割
    bzoj 3275 最小割
    bzoj 3931 最短路+最大流
  • 原文地址:https://www.cnblogs.com/zengyy/p/3362089.html
Copyright © 2020-2023  润新知