创建ASP.NET WEB自定义控件

来源:互联网 发布:java源文件的命名规则 编辑:程序博客网 时间:2024/04/29 23:45

本文通过一段完整的代码向读者介绍复合自定义控件的制作,包括:自定义属性、事件处理、控件间数据传递等方面的技术。


以下是一个登陆框的代码,包括:用户名输入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);

          }

      }

}
 

原创粉丝点击