# WebFormDesigner

**Repository Path**: caplla/WebFormDesigner

## Basic Information

- **Project Name**: WebFormDesigner
- **Description**: 基于BootStrap、jQuery的表单设计工具。以前做的产品中的插件。现将他独立出来，希望以后能够用到。核心是前台界面设计，属性设置及事件配置，后端的增删改查功能是为了程序能够运行临时做的，并非主要功能。
- **Primary Language**: C#
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 29
- **Created**: 2021-02-03
- **Last Updated**: 2021-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebFormDesigner

#### 项目介绍
基于BootStrap、jQuery的表单设计器。以前做的产品中的插件。用户可以根据临床科研方案设计eCRF功能。
现将设计其独立出来，作为一个通用工具，希望以后能够用到其他场景中。
项目核心是前台界面设计，属性设置及事件配置，后端的增删改查功能是为了程序能够运行临时做的，了解即可。目前用的后台是ASP.NET MVC3，因为VS开发项目效率高，对HTML,JS的支持强。本质上，WebFormDesigner就是个前台，可以与任何语言对接。数据格式使用标准的 http+json

#### 软件架构
BootStrap 响应式页面
jQuery Drageable, Resizeable ,jQueryUI,实现拖拽设计功能
后台使用ASP.NET MVC3
Access数据库保存数据


#### 安装教程

1. 安装.netframework4.5 (如果只看前台功能，不装这个也行，放在IIS或Tomcat下即可)
2. IIS中新建应用，指向根目录
3. 浏览器中打开网址

#### 使用说明

1. 设计很简单，相信程序员都能看懂，不做说明。
2、事件配置需要一些内置函数，说来话长，后面补充。

#### 界面展示

1、新建表单
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171309_d5308d01_1173113.png "新建表单.png")

2、打开表单
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171354_9c0c605b_1173113.png "打开表单.png")

3、设计表单
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171436_3fbb4ece_1173113.png "表单设计.png")

4、对齐方式及其他工具
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171518_1daccb3f_1173113.png "对其方式及其他工具.png")

5、定义事件
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171550_5ce8778a_1173113.png "事件.png")
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171559_59466998_1173113.png "事件1.png")

6、保存及运行效果
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171647_552a00c9_1173113.png "保存.png")
![输入图片说明](https://images.gitee.com/uploads/images/2018/0831/171657_5b53a947_1173113.png "运行测试.png")