Web编程 订阅所有【Web编程】的日志

C#用户控件：Div控件

编辑:dnawo 日期:2008-09-15

字体大小: 小 中 大
本控件在页面中输出一个div，并可通过编程方式设置div的宽、高、背景颜色及文本。由于是初次制作自定义控件，过程中碰到了不少问题，下边将整个制作过程分成了几个阶段，每个阶段中都解决了一些问题。

阶段一：Div控件雏形

复制内容到剪贴板程序代码 程序代码
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MzwuCom.UI
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:Div runat=server></{0}:Div>")]
    public class Div : WebControl
    {
        private Unit _Width;
        private Unit _Height;
        private string _BackColor;
        private string _Text;

        /// <summary>
        /// 构造函数
        /// </summary>
        public Div()
        {
            _Width = 100;
            _Height = 100;
            _BackColor = "#CC66FF";
            _Text = string.Empty;
        }

        /// <summary>
        /// 属性: 宽
        /// </summary>
        [Browsable(true)]
        [Description("控件的宽度")]
        public override Unit Width
        {
            set { _Width = value; }
            get { return _Width; }
        }

        /// <summary>
        /// 属性: 高
        /// </summary>
        [Browsable(true)]
        [Description("控件的高度")]
        public override Unit Height
        {
            set { _Height = value; }
            get { return _Height; }
        }

        /// <summary>
        /// 属性: 背景颜色
        /// </summary>
        [Browsable(true)]
        [Category("Appearance")]
        [Description("控件的背景颜色")]
        public new string BackColor
        {
            set { _BackColor = value; }
            get { return _BackColor; }
        }

        /// <summary>
        /// 属性: 文本
        /// </summary>
        [Browsable(true)]
        [Category("Appearance")]
        [Description("控件的文本")]
        [DefaultValue("")]
        public string Text
        {
            set { _Text = value; }
            get { return _Text; }
        }

        /// <summary>
        /// 属性: 反序文本
        /// </summary>
        [Browsable(false)]
        [DefaultValue("")]
        public string TextRev
        {
            get
            {
                if (Text != string.Empty)
                {
                    char[] val = Text.ToCharArray();
                    string t = string.Empty;
                    Array.Reverse(val);
                    for (int i = 0; i < val.Length; i++)
                    {
                        t += val[i];
                    }
                    return t;
                }
                else
                {
                    return string.Empty;
                }
            }
        }

        /// <summary>
        /// 浏览器输出的内容
        /// </summary>
        /// <param name="output"></param>
        protected override void Render(HtmlTextWriter output)
        {
            //string html = string.Format("<div style=\"width:{0};height:{1};background-color:{2};\">{3}</div>", Width, Height, BackColor, Text);
            //output.Write(html);

            //先属性后标签
            output.AddStyleAttribute(HtmlTextWriterStyle.Width, Width.ToString());
            output.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());
            output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, BackColor);
            output.RenderBeginTag(HtmlTextWriterTag.Div);
            output.RenderEndTag();
        }
    }
}

本阶段实现了在页面上显示自定义控件，并实现了可通过编程方式设置控件各项属性，问题是每次页面回传后控件总是被初始化，即无法保存回传前的状态信息。

阶段二：能保持状态的Div控件

复制内容到剪贴板程序代码 程序代码
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MzwuCom.UI
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:Div runat=server></{0}:Div>")]
    public class Div : WebControl
    {
        /// <summary>
        /// 构造函数
        /// </summary>
        public Div()
        {
            //初始化各个属性
            if (ViewState["Width"] == null)
            {
                ViewState["Width"] = 100;
            }
            if (ViewState["Height"] == null)
            {
                ViewState["Height"] = 100;
            }
            if (ViewState["BackColor"] == null)
            {
                ViewState["BackColor"] = "#CC66FF";
            }
            if (ViewState["Text"] == null)
            {
                ViewState["Text"] = string.Empty;
            }
        }

        /// <summary>
        /// 属性: 宽
        /// </summary>
        [Browsable(true)]
        [Description("控件的宽度")]
        public override Unit Width
        {
            set { ViewState["Width"] = value; }
            get { return Unit.Parse(Convert.ToString(ViewState["Width"])); }
        }

        /// <summary>
        /// 属性: 高
        /// </summary>
        [Browsable(true)]
        [Description("控件的高度")]
        public override Unit Height
        {
            set { ViewState["Height"] = value; }
            get { return Unit.Parse(Convert.ToString(ViewState["Height"])); }
        }

        /// <summary>
        /// 属性: 背景颜色
        /// </summary>
        [Browsable(true)]
        [Category("Appearance")]
        [Description("控件的背景颜色")]
        public new string BackColor
        {
            set { ViewState["BackColor"] = value; }
            get { return Convert.ToString(ViewState["BackColor"]); }
        }

        /// <summary>
        /// 属性: 文本
        /// </summary>
        [Browsable(true)]
        [Category("Appearance")]
        [Description("控件的文本")]
        [DefaultValue("")]
        public string Text
        {
            set { ViewState["Text"] = value; }
            get { return Convert.ToString(ViewState["Text"]); }
        }

        /// <summary>
        /// 属性: 反序文本
        /// </summary>
        [Browsable(false)]
        [DefaultValue("")]
        public string TextRev
        {
            get
            {
                if (Text != string.Empty)
                {
                    char[] val = Text.ToCharArray();
                    string t = string.Empty;
                    Array.Reverse(val);
                    for (int i = 0; i < val.Length; i++)
                    {
                        t += val[i];
                    }
                    return t;
                }
                else
                {
                    return string.Empty;
                }
            }
        }

        /// <summary>
        /// 浏览器输出的内容
        /// </summary>
        /// <param name="output"></param>
        protected override void Render(HtmlTextWriter output)
        {
            //string html = string.Format("<div style=\"width:{0};height:{1};background-color:{2};\">{3}</div>", Width, Height, BackColor, Text);
            //output.Write(html);

            //先属性后标签
            output.AddStyleAttribute(HtmlTextWriterStyle.Width, Width.ToString());
            output.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());
            output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, BackColor);
            output.RenderBeginTag(HtmlTextWriterTag.Div);
            output.RenderEndTag();
        }
    }
}

在阶段一的基础上实现了页面回传后仍能保存原先的状态信息，可以看到其中使用ViewState代替了阶段一中的私有字段。

说明：ViewState中保存的值都是System.Object类型，所以get时必须进行转换！

阶段三：支持事件的Div控件

待完善...

阶段四：支持数据绑定的Div控件

待完善...

上一篇: 区分C#的字段和属性
下一篇: 使用trace跟踪调试ASP.NET页面
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 5538
发表评论
请登录后再发表评论！