我们以简单的网格展示界面进行说明，界面包括个区域：

• 查询条件区域：显示网格界面的查询条件，查询条件可能是文本框，也可能是下拉框或者日期框。
• 功能按钮区域：显示界面中的操作按钮，一个功能按钮可以认为执行一个js函数。
• 数据网格：以网格形式显示数据，上面的例子说明了数据网格的结构，包括若干列，每列有标题，相关字段名等等。

页面模型如下：

using jiagoushi.cn.MVCUI.models.Common;
using System.Collections.Generic;

namespace jiagoushi.cn.MVCUI.models.GridPage
{
    public class GridPageModel
    {
        public string PageTitle { get; set; }

        public string ApiUrl { get; set; }

        public List<SearchFilter> FilterControls { get; set; }

        public List<FunctionButton> Buttons { get; set; }

        public List<GridColumn> Columns { get; set; }

        public GridPageModel()
        {
            FilterControls = new List<SearchFilter>();

            Buttons = new List<FunctionButton>();

            Columns = new List<GridColumn>();
        }
    }
}

这是个简化的页面模型，包括页面的标题、获取数据的Url,以及上面所提到的三个区域。

查询控件的模型如下：

using System.Collections.Generic;

namespace jiagoushi.cn.MVCUI.models.Common
{
    public class SearchFilter
    {
        /// <summary>
        /// 
        /// </summary>
        public string LableText { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public string Key { get; set; }

        /// <summary>
        /// 查询控件类型
        /// </summary>
        public string ControlType { get; set; }

        /// <summary>
        /// 是否区间查询
        /// </summary>
        public bool IsRange { get; set; }

        /// <summary>
        /// 查询条件不能为空
        /// </summary>
        public bool NotNull { get; set; }

        /// <summary>
        /// 级联控件的下级控件的Key值
        /// </summary>
        public List<string> SubControls { get; set; }

        /// <summary>
        /// 级联控件的上级控件
        /// </summary>
        public string CasUpControl { get; set; }
    }
}

上面是简化的查询条件控件，没有包括级联等的定义，也没有包括获取下拉框数据的Url等的定义。

功能按钮的定义：

namespace jiagoushi.cn.MVCUI.models.Common
{
public class FunctionButton
{
/// <summary>
/// 功能按钮得名称
/// </summary>
public string ButtonName { get; set; }

    /// <summary>
    /// 显示文本
    /// </summary>
    public string DisplayText { get; set; }

    /// <summary>
    /// 功能按钮得执行类型，比如打开页面，执行导出，执行存储过程等等
    /// </summary>
    public string CommandType { get; set; }

    /// <summary>
    /// 参数(字典语句)
    /// </summary>
    public string DicString { get; set; }
}

}

网格列的定义：

using System.Collections.Generic;

namespace jiagoushi.cn.MVCUI.models.GridPage
{
    public class GridColumn
    {
        public GridColumn()
        {
            SubColumns = new List<GridColumn>();
        }
        /// <summary>
        /// 列显示文本
        /// </summary>
        public string ColumnDisplayText { get; set; }
        /// <summary>
        /// 列关键字
        /// </summary>
        public string ColumnKey { get; set; }
        /// <summary>
        /// 列宽
        /// </summary>
        public string ColumnWidth { get; set; }
        /// <summary>
        /// 是否固定列
        /// </summary>
        public bool IsFixed { get; set; }

        /// <summary>
        /// 是否合计
        /// </summary>
        public bool IsSum { get; set; }
        /// <summary>
        /// 是否排序
        /// </summary>
        public bool IsOrderField { get; set; }
        /// <summary>
        /// 用于多级表头
        /// </summary>
        public List<GridColumn> SubColumns { get; set; }

        /// <summary>
        /// 是否合并
        /// </summary>
        public bool IsMerged { get; set; }

        /// <summary>
        /// 相关的合并列
        /// </summary>
        public string MergedColumns { get; set; }

        /// <summary>
        /// 多级表头父列
        /// </summary>
        public string ParentColumnKey { get; set; }

        /// <summary>
        /// 网格是否可编辑
        /// </summary>
        public bool IsEditable { get; set; }

        /// <summary>
        /// 控件类型
        /// </summary>
        public string ControlType { get; set; }

        /// <summary>
        /// 数据类型
        /// </summary>
        public int DataType { get; set; }

        /// <summary>
        /// 不能为空
        /// </summary>
        public bool NotNull { get; set; }
    }
}

到此，我们完成了页面的基本模型的定义，下一步，可以将模型转换为页面。