asp.net组件(8)控件的层次结构和WebControl

HTML服务器控件的控件从System.Web.UI.HtmlControls.HtmlControl 类派生
标准服务器控件的控件从System.Web.UI.WebControls.WebControl 类派生
HtmlControl 类和WebControl 类则从System.Web.UI.Control 类派生,并扩展.

前面我们都是使用Control来派生.我们有很多事需要自己做.如果使用WebControl我们可以方便不少.
当然要看情况而定.

怎样才能比较直观的看出它们的差别呢?

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebComponent
{
    public class WebStudy1Component : Control  
    {
    }

    public class WebStudy2Component : WebControl
    {
    }
}

把以上几个控件都加入页面中.点下页面看下属性编辑器.就会发现差别了.

asp:Label相信大家很熟悉了.它便是继承至WebControl控件.
拉入一个Label控件.运行 <span id="Label1">Label</span>
asp.net把Label翻译成span这个标签.
那要是我不想要span,我想要div行吗.
当然可以.
public class WebStudy3Component : Label 
{
        protected override System.Web.UI.HtmlTextWriterTag TagKey
        {
            get
            {
                //return base.TagKey; 此标签便是span
                return System.Web.UI.HtmlTextWriterTag.Div;
            }
        }
}
运行程序.<div id="WebStudy3Component1"></div> 
完成了第一步

接下来我们就来研究下<div id="WebStudy3Component1"></div>是怎么出来的.

我们先来看看继承至Control的控件是怎么实现这个的

public class Control1 : Control
{
    protected override void Render(HtmlTextWriter writer)
    {
        writer.Write("<div id='"+this.UniqueID+"'></div>");
    }
}

 那继承至WebControl呢?我都没有绘.它是怎么出来呢?

public class WebStudy1Component : Label
    {
        protected override void Render(HtmlTextWriter writer)
        {
            /**//*
             * 首先RenderBeginTag被调用 画出<div>
             * 接着RenderContents被调用 画出内容 
             * 最后RenderEndTag被调用   画出</div>     
             */
            base.Render(writer);
        }

        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                //return base.TagKey;
                return HtmlTextWriterTag.Div;
            }
        }
        
        public override void RenderBeginTag(HtmlTextWriter writer)
        {
            base.RenderBeginTag(writer);
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            base.RenderContents(writer);
        }
        
        public override void RenderEndTag(HtmlTextWriter writer)
        {
            base.RenderEndTag(writer);
        }
    }

有了上面的基础之后,提升需求.
<table width="500" id="WebStudy1Component1" style="background-color:#f5f5f5;">
 <tr>
  <td>阿鹏</td>
 </tr>
</table>
做出这个.不要用Render直接绘出

public class WebStudy1Component : WebControl
    {
        protected override void Render(HtmlTextWriter writer)
        {
            /**//*
             * 首先RenderBeginTag被调用 画出<table>
             * 接着RenderContents被调用 画出内容 
             * 最后RenderEndTag被调用   画出</table>     
             */
            base.Render(writer);
        }

        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                //return base.TagKey;
                return HtmlTextWriterTag.Table;
            }
        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Width, "500");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "#f5f5f5");

            base.AddAttributesToRender(writer);
        }
        
        public override void RenderBeginTag(HtmlTextWriter writer)
        {
            //在这里调用了AddAttributesToRender 和组件(2)中有说到样式在标签之前画出.
            base.RenderBeginTag(writer);
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.Write("阿鹏");
            writer.RenderEndTag();
            writer.RenderEndTag();
            //base.RenderContents(writer);
        }
        
        public override void RenderEndTag(HtmlTextWriter writer)
        {
            base.RenderEndTag(writer);
        }
    }

可见继承WebControl中绘制控件.主要工作已经转移到RenderContents(HtmlTextWriter writer)里了