目前在項目中碰到要實作自定義表單,我從網上或請教了高手實作的方法,總結有三種的實作方式,現大概講解
下,
一種是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" >
< 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 ="" >
< ZoneTemplate >
< asp:Label ID ="Label3" runat ="server" title ="華融員工試卷考試一...........1" ></ asp:Label >
</ ZoneTemplate >
< PartChromeStyle BackColor ="#EFF3FB" BorderColor ="#D1DDF1" Font-Names ="Verdana" ForeColor ="#333333" />
< MenuLabelHoverStyle ForeColor ="#D1DDF1" />
< EmptyZoneTextStyle Font-Size ="0.8em" />
< MenuLabelStyle ForeColor ="White" />
< MenuVerbHoverStyle BackColor ="#EFF3FB" BorderColor ="#CCCCCC" BorderStyle ="Solid"
BorderWidth ="1px" ForeColor ="#333333" />
< HeaderStyle Font-Size ="0.7em" ForeColor ="#CCCCCC" HorizontalAlign ="Center" />
< MenuVerbStyle BorderColor ="#507CD1" BorderStyle ="Solid" BorderWidth ="1px" ForeColor ="White" />
< PartStyle Font-Size ="0.8em" ForeColor ="#333333" />
< TitleBarVerbStyle Font-Size ="0.6em" Font-Underline ="False" ForeColor ="White" />
< MenuPopupStyle BackColor ="#507CD1" BorderColor ="#CCCCCC" BorderWidth ="1px" Font-Names ="Verdana"
Font-Size ="0.6em" />
< PartTitleStyle BackColor ="#507CD1" Font-Bold ="True" Font-Size ="0.8em" ForeColor ="White" />
</ asp:WebPartZone >
</ td >
< td style ="width:20%" >
</ td >
</ tr >
< tr >
< td style ="width:20%" align ="left" >
< asp:WebPartZone ID ="WebPartZone2" runat ="server" BorderColor ="#CCCCCC" Font-Names ="Verdana" Padding ="6" Width ="100%" >
< ZoneTemplate >
< asp:Label ID ="Label4" runat ="server" title ="被評選人" Text ='' ></ asp:Label >
</ ZoneTemplate >
< PartChromeStyle BackColor ="#F7F6F3" BorderColor ="#E2DED6" Font-Names ="Verdana" ForeColor ="White" />
< MenuLabelHoverStyle ForeColor ="#E2DED6" />
< EmptyZoneTextStyle Font-Size ="0.8em" />
< MenuLabelStyle ForeColor ="White" />
< MenuVerbHoverStyle BackColor ="#F7F6F3" BorderColor ="#CCCCCC" BorderStyle ="Solid"
BorderWidth ="1px" ForeColor ="#333333" />
< HeaderStyle Font-Size ="0.7em" ForeColor ="#CCCCCC" HorizontalAlign ="Center" />
< MenuVerbStyle BorderColor ="#5D7B9D" BorderStyle ="Solid" BorderWidth ="1px" ForeColor ="White" />
< PartStyle Font-Size ="0.8em" ForeColor ="#333333" />
< TitleBarVerbStyle Font-Size ="0.6em" Font-Underline ="False" ForeColor ="White" />
< MenuPopupStyle BackColor ="#5D7B9D" BorderColor ="#CCCCCC" BorderWidth ="1px" Font-Names ="Verdana"
Font-Size ="0.6em" />
< PartTitleStyle BackColor ="#5D7B9D" Font-Bold ="True" Font-Size ="0.8em" ForeColor ="White" />
</ asp:WebPartZone >
</ td >
< td style ="width:20%" >
</ td >
< td style ="width:20%" align ="right" >
< asp:WebPartZone ID ="WebPartZone3" runat ="server" BorderColor ="#CCCCCC" Font-Names ="Verdana" Padding ="6" Width ="100%" >
< ZoneTemplate >
< asp:Label ID ="Label5" runat ="server" title ="評選人" Text ="" ></ asp:Label >
</ ZoneTemplate >
< PartChromeStyle BackColor ="#F7F6F3" BorderColor ="#E2DED6" Font-Names ="Verdana" ForeColor ="White" />
< MenuLabelHoverStyle ForeColor ="#E2DED6" />
< EmptyZoneTextStyle Font-Size ="0.8em" />
< MenuLabelStyle ForeColor ="White" />
< MenuVerbHoverStyle BackColor ="#F7F6F3" BorderColor ="#CCCCCC" BorderStyle ="Solid"
BorderWidth ="1px" ForeColor ="#333333" />
< HeaderStyle Font-Size ="0.7em" ForeColor ="#CCCCCC" HorizontalAlign ="Center" />
< MenuVerbStyle BorderColor ="#5D7B9D" BorderStyle ="Solid" BorderWidth ="1px" ForeColor ="White" />
< PartStyle Font-Size ="0.8em" ForeColor ="#333333" />
< TitleBarVerbStyle Font-Size ="0.6em" Font-Underline ="False" ForeColor ="White" />
< MenuPopupStyle BackColor ="#5D7B9D" BorderColor ="#CCCCCC" BorderWidth ="1px" Font-Names ="Verdana"
Font-Size ="0.6em" />
< PartTitleStyle BackColor ="#5D7B9D" Font-Bold ="True" Font-Size ="0.8em" ForeColor ="White" />
</ asp:WebPartZone >
</ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td colspan ="5" >
< asp:GridView Width ="100%" ID ="GridView1" runat ="server" BackColor ="White" BorderColor ="#CCCCCC" BorderStyle ="None" BorderWidth ="1px" CellPadding ="3" >
< FooterStyle BackColor ="White" ForeColor ="#000066" />
< RowStyle ForeColor ="#000066" />
< SelectedRowStyle BackColor ="#669999" Font-Bold ="True" ForeColor ="White" />
< PagerStyle BackColor ="White" ForeColor ="#000066" HorizontalAlign ="Left" />
< HeaderStyle BackColor ="#006699" Font-Bold ="True" ForeColor ="White" />
</ asp:GridView >
</ td >
</ tr >
< tr >
< td colspan ="5" align ="center" >
< asp:WebPartZone ID ="WebPartZone4" runat ="server" BorderColor ="#CCCCCC" Font-Names ="Verdana" Padding ="6" Width ="100%" >
< ZoneTemplate >
< uc2:WebUserControl ID ="WebUserControl1" runat ="server" title ="a" />
</ ZoneTemplate >
< PartChromeStyle BackColor ="#F7F6F3" BorderColor ="#E2DED6" Font-Names ="Verdana" ForeColor ="White" />
< MenuLabelHoverStyle ForeColor ="#E2DED6" />
< EmptyZoneTextStyle Font-Size ="0.8em" />
< MenuLabelStyle ForeColor ="White" />
< MenuVerbHoverStyle BackColor ="#F7F6F3" BorderColor ="#CCCCCC" BorderStyle ="Solid"
BorderWidth ="1px" ForeColor ="#333333" />
< HeaderStyle Font-Size ="0.7em" ForeColor ="#CCCCCC" HorizontalAlign ="Center" />
< MenuVerbStyle BorderColor ="#5D7B9D" BorderStyle ="Solid" BorderWidth ="1px" ForeColor ="White" />
< PartStyle Font-Size ="0.8em" ForeColor ="#333333" />
< TitleBarVerbStyle Font-Size ="0.6em" Font-Underline ="False" ForeColor ="White" />
< MenuPopupStyle BackColor ="#5D7B9D" BorderColor ="#CCCCCC" BorderWidth ="1px" Font-Names ="Verdana"
Font-Size ="0.6em" />
< PartTitleStyle BackColor ="#5D7B9D" Font-Bold ="True" Font-Size ="0.8em" ForeColor ="White" />
</ asp:WebPartZone >
</ td >
</ tr >
</ table >
</ div >
< asp:EditorZone ID ="EditorZone1" runat ="server" >
< ZoneTemplate >
< asp:AppearanceEditorPart ID ="AppearanceEditorPart1" runat ="server" />
< asp:BehaviorEditorPart ID ="BehaviorEditorPart1" runat ="server" />
</ ZoneTemplate >
</ asp:EditorZone >
< asp:CatalogZone ID ="CatalogZone1" runat ="server" >
< PartTitleStyle BackColor ="#2254B1" ForeColor ="White" ></ PartTitleStyle >
< ZoneTemplate >
< asp:PageCatalogPart Runat ="server" ID ="PageCatalogPart1" BackColor ="#eeeeee" />
</ ZoneTemplate >
< PartStyle BorderColor ="#81AAF2" BorderStyle ="Solid" BorderWidth ="1px" ></ PartStyle >
</ asp:CatalogZone >
< asp:ConnectionsZone ID ="ConnectionsZone1" runat ="server" >
</ asp:ConnectionsZone >
</ form >
</ body >
</ html >
CS
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
... {
屬性字段#region 屬性字段
DataSet ds = new DataSet();
public string isAdv = "李明";
public string Adv = "孫總";
private static string UDSConnectionString = System.Configuration.ConfigurationManager.AppSettings["UDSConnectionString"].ToString();
private string StrSql = "select top 7 FileID, MailID, FileName, FileSize, FileAttribute, FileVisualPath from TabMailAttachFiles";
#endregion
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";
}
}
}