目前在项目中碰到要实现自定义表单,我从网上或请教了高手实现的方法,总结有三种的实现方式,现大概讲解
下,
一种是HTML模版的方式:
表单灵活定义的实现方式是通过利用Frontpage或Dreamweaver等对问卷HTML文件进行编辑,灵活定义的问卷表单仅限于针对单个被考核人的年度考核和任职考核。其主要过程是:
• 系统根据问卷内容生成HTML文件,HTML文件中包括要输入的HTML元素控件及其页面布局展现(隐藏的HTML元素和客户端脚本程序不包括在HTML文件中);
• 考核管理小组成员下载问卷HTML文件到本地,通过Frontpage或Dreamweaver等HTML编辑工具(不要使用Word工具编辑,因为Word编辑HTML文件会产生许多office标识的HTML元素)对HTML文件进行编辑,只能对布局、展现、或增加额外的文字说明,不能对HTML输入元素控件进行删除或增加;
• 考核管理小组成员上传已经编辑完成的HTML文件,系统对上传的HTML文件进行校验,判断HTML输入元素控件是否被删除;
• 在启动某一考核类别后,系统根据上传的HTML文件和系统自动生成的隐藏的HTML元素、客户端脚本程序一起生成考核人所用的问卷进行考评打分。
二种是通过XML +XSL实现:
采用XML描述表单外观、采用关系型数据库保存表单数据,能够方便的把关系型数据库中的信息展现到表单或保存到一个新建的数据表中。每个表单可以对应多个数据实例,能够通过一张表单提交多个数据实例;每个数据实例都独立于表单外观,能够被应用程序灵活的操作。内置强大的数据校验、数据计算机制,不需要编程即可满足常规的业务需求;可以针对表单控件和数据模型进行脚本编写,实现复杂的业务逻辑
概述:采用XML描述数据,XSLT定义XML数据显示格式。通过XSLT来控制数据的显示;查询数据库返回XML格式数据,将XML保存到临时文件,通过XSLT来解析XML数据文件生成HTML代码,最终将HTML代码显示到前台页面中
三种方式也就是目录我的项目中用到的通过WebParts实现:
下面是我做的一个小样图:
通常显示的样子:
可以自定义调整布局:
可以用户自定义的编辑模版的标题,添加模块
代码如下:
HTML:
<% ... @ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc2" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
< style type ="text/css" > ...
body{...}{
font-family:"宋体";
font-size:14px;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:WebPartManager ID ="WebPartManager1" runat ="server" OnDisplayModeChanged ="WebPartManager1_DisplayModeChanged" >
</ asp:WebPartManager >
< table width ="100%" cellspacing ="0" cellpadding ="0" border ="0" >
< tr >
< td align ="left" style ="height: 1px" >
< asp:LinkButton ID ="LinkButton1" runat ="server" OnClick ="LinkButton1_Click" > Edit page layout </ asp:LinkButton >
< asp:Label ID ="Label1" runat ="server" > | </ asp:Label >
< asp:LinkButton ID ="LinkButton2" runat ="server" OnClick ="LinkButton2_Click" > Edit Web Part properties </ asp:LinkButton >
< asp:Label ID ="Label2" runat ="server" > | </ asp:Label >
< asp:LinkButton ID ="LinkButton3" runat ="server" OnClick ="LinkButton3_Click" Visible ="False" > Edit connections </ asp:LinkButton >
</ td >
</ tr >
< tr height ="6" >
< td style ="height: 6px" >
</ td >
</ tr >
</ table >
< table cellpadding ="0px" cellspacing ="0px" >
< tr >
< td colspan ="5" >
< table width ="100%" >
< tr >
< td style ="width: 100px" >
</ td >
< td style ="width: 60%" align ="center" >
< asp:WebPartZone ID ="WebPartZone1" runat ="server" BorderColor ="#CCCCCC" Font-Names ="Verdana"
Padding ="6" Width ="100%" MenuLabelText