天天看点

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

<a href="http://www.cnblogs.com/ymnets/p/3424309.html">系列目录</a>

设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步。

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

开始之前先说说表的结构。

其实表Flow_Form与Flow_FormContent设计是有一个缺陷的。我总共是设置最高26个字段从A~Z如果超过26个字段的表单是属于硬编码的。但是我认为26个字段已经足够

因为这里我是单表模式比起表关联无限字段理论上性能会更加快,特别是当数据库申请带到千万级数据的时候(你自己可以设计更加灵活的表单管理)

Flow_Form的A~Z对应的是Flow_FlowAttr表中的数据,

Flow_FormContent表中的数据就是用户对表单的申请内容。同样从A~Z对应。这个表设计也有缺陷,我把内容全部设置为varchar(2048)字段太大,可以根据自己的扩展来确定内容是最佳的方式,比如A-F是大字段,G-L设置的是中级长度的字段,M-O是数字的字段等等

准备开始

1.新建控制器FormController(用代码生成器即可)

新建视图Create.cshtml,这里我设计了一个手风琴,设计表单的同时设计字段

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

把代码生成器生成的Form表单的的Create代码放到

第一步:设计表单里面

第二步添加字段,添加字段是一个DropDownList+easyui-combogrid来组成。

 具体代码实现如下

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

Create.cshtml

FormController核心代码

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

获取字段列表

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

代码分析:

主要难点在切换类表需要重新加载combogrid,然后根据选择的字段组成表单。

利用前端技术控制,进行字段类表的筛选获得字段。再添加字段的ID到隐藏的DIV,最后序列化整张表单保存。

整个工作流中,前端的技术代码量远超后台代码。所以关注点都在前端代码中