自定义表单的三种方式实现

最新推荐文章于 2026-05-16 07:15:27 发布

原创最新推荐文章于 2026-05-16 07:15:27 发布 · 5.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#asp #server #html #webparts #dreamweaver

本文介绍了三种实现自定义表单的方法：HTML模板、XML+XSL以及WebParts。HTML模板借助Frontpage或Dreamweaver编辑，仅限于特定考核场景。XML+XSL通过XML描述数据和XSLT定义显示格式，实现数据校验和计算。WebParts则在项目中用于用户自定义布局和编辑模板。

目前在项目中碰到要实现自定义表单,我从网上或请教了高手实现的方法,总结有三种的实现方式,现大概讲解

下,

一种是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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebParts.aspx.cs" Inherits="WebParts" %>

<%@ 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">

body{

font-family:"宋体";

font-size:14px;

}

</style>

</head>

<body>

<div>

<asp:WebPartManager ID="WebPartManager1" runat="server" OnDisplayModeChanged="WebPartManager1_DisplayModeChanged">

</asp:WebPartManager>

<tr>

<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>

</td>

</tr>

</table>

<tr>

<tr>

</td>

<asp:WebPartZone ID="WebPartZone1" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana"

Padding="6" Width="100%" MenuLabelText="">

<asp:Label ID="Label3" runat="server" title="华融员工试卷考试一...........1"></asp:Label>

</ZoneTemplate>

<MenuVerbHoverStyle BackColor="#EFF3FB" BorderColor="#CCCCCC" BorderStyle="Solid"

BorderWidth="1px" ForeColor="#333333" />

<MenuPopupStyle BackColor="#507CD1" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

Font-Size="0.6em" />

</asp:WebPartZone>

</td>

</td>

</tr>

<tr>

<asp:WebPartZone ID="WebPartZone2" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">

<asp:Label ID="Label4" runat="server" title="被评选人" Text=''></asp:Label>

</ZoneTemplate>

<MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"

BorderWidth="1px" ForeColor="#333333" />

<MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

Font-Size="0.6em" />

</asp:WebPartZone>

</td>

</td>

<asp:WebPartZone ID="WebPartZone3" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">

<asp:Label ID="Label5" runat="server" title="评选人" Text=""></asp:Label>

</ZoneTemplate>

<MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"

BorderWidth="1px" ForeColor="#333333" />

<MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

Font-Size="0.6em" />

</asp:WebPartZone>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<asp:GridView Width="100%" ID="GridView1" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">

</asp:GridView>

</td>

</tr>

<tr>

<asp:WebPartZone ID="WebPartZone4" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" Padding="6" Width="100%">

<uc2:WebUserControl ID="WebUserControl1" runat="server" title="a"/>

</ZoneTemplate>

<MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" BorderStyle="Solid"

BorderWidth="1px" ForeColor="#333333" />

<MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana"

Font-Size="0.6em" />

</asp:WebPartZone>

</td>

</tr>

</table>

</div>

<asp:EditorZone ID="EditorZone1" runat="server">

<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />

<asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />

</ZoneTemplate>

</asp:EditorZone>

<asp:CatalogZone ID="CatalogZone1" runat="server">

<asp:PageCatalogPart Runat="server" ID="PageCatalogPart1" BackColor="#eeeeee" />

</ZoneTemplate>

</asp:CatalogZone>

<asp:ConnectionsZone ID="ConnectionsZone1" runat="server">

</asp:ConnectionsZone>

</form>

</body>

</html>

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class WebParts : System.Web.UI.Page

{

属性字段

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.Label4.Text = "被评选人：" + isAdv.ToString();

this.Label5.Text = "评选人：" + Adv.ToString();

Bind_Data();

}

void Page_Init(object sender, EventArgs e)

{

Page.InitComplete += new EventHandler(InitComplete);

}

void InitComplete(object sender, System.EventArgs e)

{

}

public void Bind_Data()

{

SqlConnection Sqlcn = new SqlConnection(UDSConnectionString);

Sqlcn.Open();

SqlCommand Sqlcm = new SqlCommand(StrSql,Sqlcn);

SqlDataReader Sqldr;

Sqldr = Sqlcm.ExecuteReader();

this.GridView1.DataSource = Sqldr;

this.GridView1.DataBind();

Sqlcn.Close();

}

protected void LinkButton1_Click(object sender, EventArgs e)

{

if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

else

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

}

protected void LinkButton2_Click(object sender, EventArgs e)

{

if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

else

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

}

protected void LinkButton3_Click(object sender, EventArgs e)

{

if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)

WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;

else

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

}

protected void WebPartManager1_DisplayModeChanged(object sender, WebPartDisplayModeEventArgs e)

{

if (WebPartManager1.DisplayMode == WebPartManager.BrowseDisplayMode)

{

LinkButton1.Visible = true;

LinkButton1.Text = "Edit page layout";

Label1.Visible = true;

LinkButton2.Visible = true;

LinkButton2.Text = "Edit Web Part properties";

Label2.Visible = true;

LinkButton3.Visible = false;

LinkButton3.Text = "Edit connections";

}

else if (WebPartManager1.DisplayMode == WebPartManager.CatalogDisplayMode)

{

LinkButton1.Visible = true;

LinkButton1.Text = "End layout editing";

Label1.Visible = false;

LinkButton2.Visible = false;

Label2.Visible = false;

LinkButton3.Visible = false;

}

else if (WebPartManager1.DisplayMode == WebPartManager.EditDisplayMode)

{

LinkButton1.Visible = false;

Label1.Visible = false;

LinkButton2.Visible = true;

LinkButton2.Text = "End property editing";

Label2.Visible = false;

LinkButton3.Visible = false;

}

else if (WebPartManager1.DisplayMode == WebPartManager.ConnectDisplayMode)

{

LinkButton1.Visible = false;

Label1.Visible = false;

LinkButton2.Visible = false;

Label2.Visible = false;

LinkButton3.Visible = false;

LinkButton3.Text = "End connections editing";

}