FoxOne---一个快速高效的BS框架

FoxOne---一个快速高效的BS框架--(1)

FoxOne---一个快速高效的BS框架--(2)

FoxOne---一个快速高效的BS框架--(3)

FoxOne---一个快速高效的BS框架--(4)

FoxOne---一个快速高效的BS框架--WEB控件属性编辑器

最近一段时间内，我都在花时间开发一个快速的BS开发框架，我将她命名为FoxOne，她基于ASP.NET MVC，支持SQL SERVER,MY SQL,ORACLE等主流数据库；

具有数据访问，日志记录，环境变量，基于角色的访问控制（页面，控件，数据，支持分级授权），众多的控件（Table,Form,Tree,Tab,Panel,ToolTip.....），等一般的BS开发框架常见的功能，除此之外，我还开发了一套可以在线设计页面的设计器，这是FOXONE最强大的地方，下面我将演示如何在最短时间内快速通过在线设计的方式配置出一个树型列表页面。

首先在页面设计中新建一个页面，其中页面地址是以后将会用于URL访问的地址（如下列的页面将来的地址为/Page/TastPage），标题为页面的title

保存后我们就新建好了一个页面。

接下来我们进入页面的设计界面

进来后，默认已经出现了我们选择的布局类型，其中有”添加组件“的按钮的地方，就是可以在里面添加控件的区域，如下图如示：

我们先要在左边添加一个树型控件，注意在组件列表中，我已经为FOXONE默认添加了十几个我们在做这种企业管理系统常用到的控件，而且支持扩展，只要实现PageControlBase基类，所有扩展的控件也会在这里出现：

保存后，右边的树型控件的属性设置区域，会进一步出现其它复杂属性的设置，例如：数据源。在FOXONE中，所有的数据源都分为三类，一类是可以为树型控件填充数据源的ICascadeDataSource，一类为下拉框，单选框，多选框提供数据源的IKeyValueDataSource，最后一类是为列表提供数据源的IListDataSource，所有实现这三类接口的数据源，在设计器中都会在相应的控件要用到的地方出现以供选择。在下面的示例中我们直接使用数据表数据源。

然后描述一下在对应树型控件的id,name,pId的字段分别是什么。最后保存就行了

这时候我们来看一下页面的效果

其实，对于数据源，我还设计了N个默认的过滤器，对数据源可以进行一些简单的数据过滤，在此先不演示。

继续在右边添加表格控件，如下图，我们先使用”自动生成列“（意思是直接显示数据源返回的所有列，这有点像ASP.NET WEBFORM的GridView的AutoGenerateColumn）

保存后，为表格选择一种数据源，继续用数据表，如下图

选择好后，直接保存，这时候页面的效果就出来了，如下图

上图的效果中，表格还有几个问题：

1.有N多列是不想显示的

2.列头要重命名

3.某些列的值要转换后再显示（如ParentId列，应该显示父级名称，不是父级ID）

4.某些列的显示要格式化

下面我们一一来修改这些问题，首先，我们要把”自动生成列“改为”否“

然后切换到”表格列“选项卡，点”从数据源获取列“， 这时候会自动从指定好的数据源中把每一列取回来，这时候我们可以对这些列进行增删配置，

我们先删掉一列不需要的列，剩下的列如下图：

这时候我们来看看页面的效果：

好，已经显示了指定的列了，现在对列名进行修改：

列名重命名为”组织名称“，然后顺便演示一下输出格式的玩法，这个是参照ASP.NET WEBFORM的GridView的列格式化了

顺便把”最后更新时间“的格式和列名也改一下，

这时候再来看看效果：注意 组织名称 那一列已经都多了个hello world了，最后更新时间也按照指定的格式显示了。

下面来修改下一个问题，我们要对ParentId列进行转换，把父级ID 转为 父级名称，点开列编辑，切换到”列转换器“那一栏，FOXONE默认已经集成了几个常用的列转换，如：用户名称，组织名称，角色名称，数据字典，枚举等等。

设置好转换器后，再来看一下效果，这时候父级列已经是显示名称了。

上面的图中还有Status列是编码，这一列的值来自系统中的枚举，所以进它进行枚举转换，如下图

绑定好转换器后，列值也发生了变化，如下图

最后要让左边的树的点击引起右边表格控件的联动变化，这时候需要出来页面的基础信息里添加一小段JS，指定树型控件的nodeClick事件响应，在里面对table进行条件干涉，然后让table重新刷新（其实就是把参数拼起来，通过POST的方式提交到后台，让TABLE的数据源重新绑定一次），顺便提一句，这里的所有控件都是局部刷新的，但肯定不是像ASP.NET WEBFORM的那种局部刷新实现得这么烂。。。

同时也要给表格控件的数据源添加一个过滤器，这个过滤器是FOXONE默认有的，会自动根据当前FORM和URL参数中的值对数据源的某些列进行字段一一匹配过滤，当前这些过滤器，数据源，转换器等等都是实现某一接口的，可以非常方便进行扩展。

最后看一下点击树控件的效果。。。

这只是FOXONE冰山一角的内容，如果觉得这个框架有存在的意义，就顶起来吧，我会写多点文章，这个框架目前在公司使用8个月，同时也是支持原来的MVC开发的，而且很多配置好的页面和控件都可以局部引用到自己开发的页面中去使用。。

如果有兴趣的可以加入群里来交流一下，群号：581523872