我們通過網頁來動態創建表和字段時，一次性需要添加多個字段，而字段還有其屬性。那么可以通過創建一個用戶控件，里面包含多個文本控件或者其他控件來存放一個字段的名稱和其多個屬性值。然后，在網頁中，根據需要創建字段個數的需要，來多次動態加載相等數量的用戶控件。

既然能動態加載用戶控件，那么加載結束后如果發現某個或幾個字段多余,那就需要刪除多余的用戶控件.在刪除時，應該給出提示是否刪除。

那么具體操作是：點擊"增加"按鈕,頁面增加一個用戶控件，再次點擊"增加"按鈕又增加一個控件用戶。每個用戶控件上有一個刪除按鈕，點擊任何用戶控件上的“刪除”按鈕就刪除掉該用戶控件而不影響其他已存在的用戶控件。

我們先提到四個基本概念，他們在動態加載用戶控件中需要用到的知識。

什么是用戶控件？用戶控件就是已經被轉換為包含一個或者多個控件的ASP.NET頁面. 使用用戶控件可以很方便的在多個ASP.NET頁面中使用相同的內容和編程邏輯。[1]

什么是PlaceHolder控件？通常不將控件直接添加到頁面的Controls集合中。因為我們希望將控件添加到頁面的指定的位置。ASP.NET框架中就包含PlaceHolder控件，它用來作為其他控件的容器，我們將控件添加其中，這樣我們只需要對PlaceHolder控件定位就可以實現對其他控件的定位。

什么是ViewState？ViewState是.Net中提出的狀態保存的一種新途徑，它是服務器控件狀態保存的基礎。通俗的說，就是點擊頁面的按鈕(WebControls.Button類型)提交頁面后，頁面會被重新加載，那么我們需要保存提交前頁面中變量的值，在頁面被重新加載后可以使用這些被保存變量的值。在本例中，當我們刪除一個控件時，頁面會被重新加載，而我們需要刪除前用戶在其他控件輸入的值仍然存在，那么我們就需要ViewState來保存這些值。如果不保存這些值，頁面會被重新加載后其他控件輸入的值就會被清除，不符合我們的需要。

isPostBack是什么意思？判斷頁面是否首次被加載，是返回 false, 不是true。通過 isPostBack和ViewState一起就可以在Page_Load中完成頁面狀態的保存。

完成這個例子的步驟：
(1) 新建一個ASP.NET的項目，(有點廢話，但是沒有項目是無法完成這個例子的)。創建一個后綴名為aspx的頁面，我們需要在它里面來動態添加和刪除用戶控件(假設該頁面的名稱為TableDataField.aspx)。創建一個后綴名為ascx的用戶控件，(假設該用戶控件的名稱為WebUserControlCls.ascx),我們需要在它里面添加我們需要的多個服務端控件。呵呵，準備工作完成。

(2) 創建一個字段時，在頁面TableDataField.aspx和用戶控件WebUserControlCls.ascx包含的內容

<1> 頁面TableDataField.aspx包含的內容為：

<2>用戶控件WebUserControlCls.ascx包含的內容為：

(3)在頁面TableDataField.aspx中，說四個要點。
<1>動態增加用戶控件

1、獲得用戶控件

WebUserControlCls webUserCtrl = (WebUserControlCls)Page.LoadControl("WebUserControlCls.ascx");

2、將用戶控件增加到PlaceHolder中

this.plhDataFields.Controls.Add(webUserCtrl);

3、對用戶控件的按鈕注冊動態事件，這里使用事件和代理。關于事件和代理，請參見<<在C#的事件、多播中使用委托>>一文:http://blog.csdn.net/scucj/archive/2006/07/13/915482.aspx

webUserCtrl.btnDelRow.Attributes.Add("onclick", "return confirm('確定要刪除該字段嗎?');");
webUserCtrl.btnDelRow.Click +=new EventHandler(btnDelRow_Click);

4、對PlaceHolder中的所有用戶控件來設置ID屬性,將用戶控件的ID和被它包含的按鈕的ID相同，目的是為了點擊用戶控件中的"刪除"按鈕可以通過"刪除"按鈕ID來獲得用戶控件ID，然后可以刪除該用戶控件

setControlsID();

<2>動態刪除用戶控件

1、創建一個用戶控件的實例

WebUserControlCls webUserCtrl = new WebUserControlCls();

2、通過“刪除”按鈕的ID來獲得用戶控件的ID

webUserCtrl.ID = btnDel.ID;

3、通過用戶控件的ID來刪除用戶控件

this.plhDataFields.Controls.Remove(this.plhDataFields.FindControl(webUserCtrl.ID));

4、對PlaceHolder中的剩下所有用戶控件來重新設置ID屬性

setControlsID();

<3>保持用戶控件的狀態

IsPostBack表示頁面是否首次加載，如果是，則用戶控件狀態個數為0；如果不是，則要加載用戶控件。

if ( ! IsPostBack)
... {
// 跟蹤用戶控件狀態個數
ViewState[ " DataFieldCount " ] = 0 ;
}
else
... {
for ( int counter = 0 ;counter < ( int )ViewState[ " DataFieldCount " ];counter ++ )
... {
// 加載用戶控件
AddDataField(counter.ToString());
}
}

<4> 用戶控件添加成功后，我們提交這個頁面。本例通過點擊“獲得屬性”按鈕來獲得用戶控件中輸入的值的。
在這其中，我們通過一個foreach來找到所有的webUserCtrl，然后通過webUserCtrl中提供的屬性來獲得各個控件輸入的值。

if (ViewState[ " DataFieldCount " ] != null )
... {
foreach (WebUserControlClswebUserCtrl in this .plhDataFields.Controls)
... {
Response.Write(webUserCtrl.DataFieldName);
Response.Write(webUserCtrl.LogicName);
Response.Write(webUserCtrl.DataFieldType);
Response.Write(webUserCtrl.TypeLength);
Response.Write( " <br> " );
}
}

(4)在用戶控件WebUserControlCls.ascx中，說三個要點。
<1> 應該在其WebUserControlCls.ascx.cs把“刪除”按鈕的范圍從protected改為public，因為我們需要在 頁面TableDataField.aspx中對“刪除”按鈕添加屬性和事件。
這樣：
protected System.Web.UI.WebControls.Button btnDelRow
應該變為：public System.Web.UI.WebControls.Button btnDelRow
注意，在用戶控件WebUserControlCls.ascx移動某個控件時，“刪除”按鈕的范圍會從已經修改的public變回為protected。那么就需要再次將protected改為public。

<2> 在用戶控件WebUserControlCls.ascx中為各個控件定義屬性，以便頁面TableDataField.aspx中可以方便獲取控件中輸入的值。

比如：

物理名稱,只讀屬性

public string DataFieldName
... {
get
... {
return txtDataFieldName.Text.Trim();
}
}

邏輯名稱,只讀屬性

public string LogicName
... {
get
... {
return txtLogicName.Text.Trim();
}
}

呵呵，整個思路就是這樣。由于CSDN的blog不能上傳文件，我下面給出 TableDataField.aspx 和 WebUserControlCls.ascx 兩個文件的四個部分的源代碼。或者給我發郵件： scucj@126.com 。

<1> TableDataField.aspx

<% ... @Pagelanguage = " c# " Codebehind = " TableDataField.aspx.cs " AutoEventWireup = " false " Inherits = " ScuHR.TableSet.TableDataField " %>
<! DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN" >
< HTML >
< HEAD >
< title > TableDataFiled </ title >
< meta name ="GENERATOR" Content ="MicrosoftVisualStudio.NET7.1" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< form id ="Form1" method ="post" runat ="server" >
< TABLE id ="Table1" style ="Z-INDEX:101;LEFT:56px;WIDTH:680px;POSITION:absolute;TOP:32px;HEIGHT:75px"
cellSpacing ="1" cellPadding ="1" width ="680" border ="1" >
< TR >
< TD style ="WIDTH:21px" >< FONT face ="宋體" ></ FONT ></ TD >
< TD style ="WIDTH:621px" ></ TD >
< TD ></ TD >
</ TR >
< TR >
< TD style ="WIDTH:21px" ></ TD >
< TD style ="WIDTH:621px" >
< asp:PlaceHolder id ="plhDataFields" runat ="server" ></ asp:PlaceHolder ></ TD >
< TD ></ TD >
</ TR >
< TR >
< TD style ="WIDTH:21px" ></ TD >
< TD style ="WIDTH:621px" ></ TD >
< TD ></ TD >
</ TR >
< TR >
< TD style ="WIDTH:21px" ></ TD >
< TD style ="WIDTH:621px" >
< asp:Button id ="btnAadd" runat ="server" Text ="增加" ></ asp:Button ></ TD >
< TD ></ TD >
</ TR >
< TR >
< TD style ="WIDTH:21px" ></ TD >
< TD style ="WIDTH:621px" >< FONT face ="宋體" >
< asp:Button id ="btnGetValue" runat ="server" Text ="獲得屬性值" ></ asp:Button ></ FONT ></ TD >
< TD ></ TD >
</ TR >
</ TABLE >
</ form >
</ body >
</ HTML >

<2>TableDataField.aspx .cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace ScuHR.TableSet
... {
/**/ /// <summary>
/// TableDataFiled的摘要說明。
/// </summary>
///

public class TableDataField:System.Web.UI.Page
... {
protected System.Web.UI.WebControls.ButtonbtnAadd;
protected System.Web.UI.WebControls.PlaceHolderplhDataFields;
protected System.Web.UI.WebControls.ButtonbtnGetValue;

private void Page_Load( object sender,System.EventArgse)
... {
if ( ! IsPostBack)
... {
// 跟蹤用戶控件狀態值
ViewState[ " DataFieldCount " ] = 0 ;
}
else
... {
for ( int counter = 0 ;counter < ( int )ViewState[ " DataFieldCount " ];counter ++ )
... {
AddDataField(counter.ToString());
}
}
}

Web窗體設計器生成的代碼 #region Web窗體設計器生成的代碼
override protected void OnInit(EventArgse)
... {
//
// CODEGEN:該調用是ASP.NETWeb窗體設計器所必需的。
//
InitializeComponent();
base .OnInit(e);
}

/**/ /// <summary>
/// 設計器支持所需的方法-不要使用代碼編輯器修改
/// 此方法的內容。
/// </summary>
private void InitializeComponent()
... {
this .btnAadd.Click += new System.EventHandler( this .btnAadd_Click);
this .btnGetValue.Click += new System.EventHandler( this .btnGetValue_Click);
this .Load += new System.EventHandler( this .Page_Load);

}
#endregion

private void btnAadd_Click( object sender,System.EventArgse)
... {
ViewState[ " DataFieldCount " ] = ( int )ViewState[ " DataFieldCount " ] + 1 ;
AddDataField(ViewState[ " DataFieldCount " ].ToString());

}

/**/ /// <summary>
/// 通過用戶控件來增加動態控件
/// </summary>
/// <paramname="strFieldNum"></param>
http://images.csdn.net/syntaxhighlighting/Outlinin

分享到：

智力測試 | 如何制定和編寫軟件項目計劃

• 2007-08-30 02:02
• 瀏覽 312
• 評論(0)
• 相關推薦

評論

發表評論

您還沒有登錄,請您登錄后再發表評論

動態增加和刪除用戶控件