创建ASP.NET WEB自定义控件

本文通过一段完整的代码向读者介绍复合自定义控件的制作，包括：自定义属性、事件处理、控件间数据传递等方面的技术。
作者在httpdamao.0538.org有一些控件和代码，并在更新中，有兴趣的读者可以去下载。

以下是一个登陆框的代码，包括：用户名输入TextBox、密码输入TextBox、提交Button、重置Button以及承载以上四项的Panel。控件类名为LoginCtrl。

（例程使用C#）

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Drawing;

namespace TestLib

{

[DefaultProperty(BackColor),

ToolboxData({0}LoginCtrl runat=server{0}LoginCtrl)]

public class LoginCtrl System.Web.UI.WebControls.WebControl

{

private Color _fontColor = Color.Black;声明字体颜色变量

private Color _backColor = Color.White;声明控件背景变量

首先声明要在复合控件中使用的子控件。

private Label lblUserName = new Label();显示“用户名”的Label控件

private Label lblPassWord = new Label();显示“密码”的Label控件

private TextBox txtUserName = new TextBox();用户名输入的TextBox控件

private TextBox txtPassWord = new TextBox();密码输入的TextBox控件

private Button submitButton = new Button();提交Button控件

private Button clearButton = new Button();重置Button控件

private System.Web.UI.WebControls.Panel pnlFrame = new System.Web.UI.WebControls.Panel();承载其它控件的容器Panel控件

当然要在符合控件中使用的事件一定要声明的，它们会出现在属性框的事件栏里。

public event EventHandler SubmitOnClick;声明自定义控件LoginCtrl的提交事件

public event EventHandler ClearOnClick;声明自定义控件LoginCtrl的重置事件

public LoginCtrl()

{

刚刚声明的子控件和事件要在这里进行初始化处理。

初始化控件的属性

this.lblUserName.Text = 用户名;

this.lblPassWord.Text = 密 码;

this.txtPassWord.TextMode = System.Web.UI.WebControls.TextBoxMode.Password;

this.pnlFrame.Width = 240;

this.pnlFrame.Height = 120;

this.pnlFrame.BackColor = Color.Empty;

添加提交按钮点击事件

submitButton.Text = 确定;

submitButton.Click += new EventHandler(this.SubmitBtn_Click);

添加重置按钮点击事件

clearButton.Text = 重置;

clearButton.Click += new EventHandler(this.ClearBtn_Click);

将声明的各子控件添加到LoginCtrl中

this.Controls.Add(this.submitButton);

this.Controls.Add(this.clearButton);

this.Controls.Add(this.txtUserName);

this.Controls.Add(this.txtPassWord);

this.Controls.Add(this.lblUserName);

this.Controls.Add(this.lblPassWord);

this.Controls.Add(this.pnlFrame);

}

根据自己的需要添加或重载符合控件的公共属性

字体颜色属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Color ForeColor

{

get

{

return this._fontColor;

}

set

{

this._fontColor = value;

}

}

控件背景属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Color BackColor

{

get

{

return this._backColor;

}

set

{

this._backColor = value;

}

}

用户名属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public string UserName

{

get

{

return this.txtUserName.Text;

}

set

{

this.txtUserName.Text = value;

}

}

密码属性

[Bindable(false),

Category(Appearance),

DefaultValue(), Browsable(false)]

public string PassWord

{

get

{

return this.txtPassWord.Text;

}

set

{

this.txtPassWord.Text = value;

}

}

控件宽度属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Unit Width

{

get

{

return this.pnlFrame.Width;

}

set

{

this.pnlFrame.Width = value;

}

}

控件高度属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Unit Height

{

get

{

return this.pnlFrame.Height;

}

set

{

this.pnlFrame.Height = value;

}

}

控件边框颜色属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Color BorderColor

{

get

{

return this.pnlFrame.BorderColor;

}

set

{

this.pnlFrame.BorderColor = value;

}

}

控件边框样式属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override BorderStyle BorderStyle

{

get

{

return this.pnlFrame.BorderStyle;

}

set

{

this.pnlFrame.BorderStyle = value;

}

}

控件边框宽度属性

[Bindable(false),

Category(Appearance),

DefaultValue()]

public override Unit BorderWidth

{

get

{

return this.pnlFrame.BorderWidth;

}

set

{

this.pnlFrame.BorderWidth = value;

}

}

下面要把控件输出出去，展示在页面上。

summary

将此控件呈现给指定的输出参数。

summary

param name=output 要写出到的 HTML 编写器 param

protected override void Render(HtmlTextWriter output)

{

this.pnlFrame.RenderBeginTag(output);输出Panel控件

在Panel中绘制表格

output.AddAttribute(HtmlTextWriterAttribute.Border,0);

output.AddAttribute(HtmlTextWriterAttribute.Cellpadding,0);

output.AddAttribute(HtmlTextWriterAttribute.Cellspacing,0);

output.AddAttribute(System.Web.UI.HtmlTextWriterAttribute.Width,100%);

output.AddAttribute(System.Web.UI.HtmlTextWriterAttribute.Height,100%);

output.AddAttribute(HtmlTextWriterAttribute.Bgcolor,this._backColor.Name);

output.RenderBeginTag(HtmlTextWriterTag.Table);

output.RenderBeginTag(HtmlTextWriterTag.Tr);

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加Label控件

this.lblUserName.ForeColor = this._fontColor;

this.lblUserName.RenderControl(output);

output.RenderEndTag();

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加TextBox控件

this.txtUserName.RenderControl(output);

output.RenderEndTag();

output.RenderEndTag();

output.RenderBeginTag(HtmlTextWriterTag.Tr);

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加Label控件

this.lblPassWord.ForeColor = this._fontColor;

this.lblPassWord.RenderControl(output);

output.RenderEndTag();

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加TextBox控件

this.txtPassWord.RenderControl(output);

output.RenderEndTag();

output.RenderEndTag();

output.RenderBeginTag(HtmlTextWriterTag.Tr);

output.AddAttribute(HtmlTextWriterAttribute.Align,right);

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加Button控件

this.submitButton.RenderControl(output);

output.RenderEndTag();

output.AddAttribute(HtmlTextWriterAttribute.Align,center);

output.RenderBeginTag(HtmlTextWriterTag.Td);

在表格中添加Button控件

this.clearButton.RenderControl(output);

output.RenderEndTag();

output.RenderEndTag();

output.RenderEndTag();

this.pnlFrame.RenderEndTag(output);

}

当按钮点击时怎么做呢？这是个事件冒泡。

处理提交按钮点击事件

private void SubmitBtn_Click(object sender, EventArgs e)

{

EventArgs e1 = new EventArgs();

if(this.SubmitOnClick!=null)

this.SubmitOnClick(this.submitButton,e1);

}

处理重置按钮点击事件

private void ClearBtn_Click(object sender, EventArgs e)

{

this.txtPassWord.Text = ;

this.txtUserName.Text = ;

EventArgs e1 = new EventArgs();

if(this.ClearOnClick!=null)

this.ClearOnClick(this.clearButton,e1);

}

}

}

编译一下，OK！

这个控件没有什么实际的使用价值，本文制作这个例子是为了向读者展示复合控件的制作方法，也很简单，是吧？