使用本分步指南动态创建一个.aspx 页的控件。
本文演示如何动态创建控件的.aspx 页。 示例项目执行以下操作:
- 创建两个 文本框 控件。
- 请验证内容 (TextBox.text) 和 TextBox 的属性保存在发送到服务器。
- 说明了由动态创建控件过帐的处理事件。
创建项目和静态控件
<script type="text/javascript"></script>
启动 Microsoft Visual Studio.NET。
在 文件 菜单上指向 新建 ,然后单击 项目 。
单击 项目类型 ,下的 Visual C# 项目 ,然后单击 模板 下的 ASP.NET Web 应用程序 。 将该项目命名 DynamicCreate 。
打开该 WebForm 1.aspx 文件并切换到 HTML 视图。 替换现有代码使用以下代码将 <Body > <html> 和 </html> </ Body > 标记之间:
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" style="Z-INDEX: 100; LEFT: 23px; POSITION: absolute; TOP: 108px" runat="server" Text="Submit" Height="27px" Width="100px"></asp:Button>
<asp:Label id="Label4" style="Z-INDEX: 105; LEFT: 23px; POSITION: absolute; TOP: 197px" runat="server" Width="368px" EnableViewState="False"></asp:Label>
<asp:Label id="Label3" style="Z-INDEX: 104; LEFT: 23px; POSITION: absolute; TOP: 163px" runat="server" Width="368px" EnableViewState="False"></asp:Label>
<asp:Label id="Label2" style="Z-INDEX: 102; LEFT: 23px; POSITION: absolute; TOP: 60px" runat="server" Width="86px" Height="19px"> TextBox2:</asp:Label>
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 23px; POSITION: absolute; TOP: 28px" runat="server" Width="86" Height="19"> TextBox1:</asp:Label></form>
</body>
返回设计视图,以查看静态创建控件项目将使用。
创建动态控件,并在挂钩
<script type="text/javascript"></script>
在解决方案资源管理器中,单击要显示与 WebForm 1.aspx 的文件的列表的 显示所有文件 。 打开 WebForm 1.aspx.cs 文件。
声明.cs (代码隐藏) 文件中的在 TextBox 控件。 此外,声明变量在.aspx 文件中现有的窗体元素。 更新以下 WebForm 1 类声明的声明:
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Label Label2;
protected System.Web.UI.WebControls.Label Label3;
protected System.Web.UI.WebControls.Label Label4;
protected System.Web.UI.WebControls.Button Button1;
// Added by hand for access to the form.
protected System.Web.UI.HtmlControls.HtmlForm Form1;
// Added by hand; will create instance in OnInit.
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.TextBox TextBox2;
保护 System.Web.UI.WebControls.TextBox TextBox 1 ; 保护 System.Web.UI.WebControls.TextBox TextBox 2; TextBox 声明输入手动将如果 TextBox 拖从工具箱拖到.aspx 页。 但是,在这种情况下您动态创建控件。
添加代码以动态创建 TextBox 控件。 该控件是在运行页时,创建的。 为此最好位置处于 WebForm 1 类提供的 OnInit 函数。
找到 OnInit 函数。 展开标有该代码在"Web 窗体设计器生成的代码"注释。 修改 OnInit 函数,以便它类似于下面的代码:
override protected void OnInit(EventArgs e)
{
// Create dynamic controls here.
// Use "using System.Web.UI.WebControls;"
TextBox1 = new TextBox();
TextBox1.ID = "TextBox1";
TextBox1.Style["Position"] = "Absolute";
TextBox1.Style["Top"] = "25px";
TextBox1.Style["Left"] = "100px";
Form1.Controls.Add(TextBox1);
TextBox2 = new TextBox();
TextBox2.ID = "TextBox2";
TextBox2.Style["Position"] = "Absolute";
TextBox2.Style["Top"] = "60px";
TextBox2.Style["Left"] = "100px";
Form1.Controls.Add(TextBox2);
this.TextBox1.TextChanged += new System.EventHandler(this.TextBox_TextChanged);
this.TextBox2.TextChanged += new System.EventHandler(this.TextBox_TextChanged);
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/ / InitializeComponent(; Base.OnInit(e);} 此代码动态创建两个 TextBox 控件,在设置其 ID 和职位,然后将它们绑定到 窗体的 Controls 集合。 代码还 wires 最文本框的 TextChanged 事件处理程序 ( TextBox_TextChanged )。
以编程方式设置 TextBox 位置和绑定到 窗体的 Controls 集合,以外可以添加到.aspx 的 Web 窗体 面板 控件页和将文本框绑定到与以下类似, OnInit 函数中:
TextBox1 = new TextBox();
TextBox1.ID = "TextBox1";
//Form1.Controls.Add(TextBox1);
Panel1.Controls.Add(TextBox1);
注释 控件创建 Web 窗体上的动态控件时, 必须创建并添加到控件集合在 OnInit 或 Page _ Load 事件中。 否则,控件意外行为。
初始化 Text 属性和文本框的样式。 按以下方式修改现有的 Page _ Load 函数:
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
// Set the initial properties for the text boxes.
TextBox1.Text = "TextBox1";
TextBox2.Text = "TextBox2";
}
}
TextBox1.text ="TextBox 1"; TextBox2.text ="TextBox 2";}} 文本框 ( if(!IsPostBack) ) 的初始值设置一次。 此信息由文本框要重置为后续的张贴内容值使其 unecessary IPostBackDataHandler 接口维护。
为 TextBox 控件的 TextChanged 事件处理程序。 Page _ Load 函数主体之后添加以下代码:
private void TextBox_TextChanged(object sender, System.EventArgs e)
{
TextBox txtBoxSender = (TextBox)sender;
string strTextBoxID = txtBoxSender.ID;
switch(strTextBoxID)
{
case "TextBox1":
Label3.Text = "TextBox1 text was changed";
break;
case "TextBox2":
Label4.Text = "TextBox2 text was changed";
break;
}
}
此代码检查的控件触发该事件,然后通过 approprite Label 控件向用户报告此。 请注意此函数在为这两个动态创建的 TextBox 控件处理 TextChanged 事件。 默认情况, AutoPostBack 为 False 为 TextBox 控件。 因此,更改控件中的文本并不会导致到服务器的 PostBack。 但是,在 提交 发布窗体服务器单击按钮时, TextBox 控件的 TextChanged 事件触发,并调用此函数。
保存、 生成,并运行示例
<script type="text/javascript"></script> 保存并生成示例。 在 Visual Studio.NET 中运行,右键单击.aspx 文件,然后单击 在浏览器中的查看 。