• 创建ASP.NET WEB自定义控件(转)



     

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

    作者在http://damao.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 WindowsControlLibrary3
    {

        [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

  • 相关阅读:
    js 改变颜色值
    React之使用Context跨组件树传递数据
    App.js实现使用js开发app的应用,此文是中文文档
    转: CSS3 @media 用法总结
    转: 如何用手机访问电脑本地 localhost 网页或者服务器, 以调试web项目
    js 替换字符串中所有匹配的字符
    转:display:flex不兼容Android、Safari低版本的解决方案 【flex布局】
    转:HTML5页面如何在手机端浏览器调用相机、相册功能
    文本相似度度量
    idea中maven中jdk版本的选择(转)
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/527505.html
Copyright © 2020-2023  润新知