ASP.NET进阶（6）：认清控件之 Render

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　　很久没写了，抱歉，呵呵。上节我们主要讲了Click的流程，这次主要来看HTML输出。

假如让你写一个Button控件类，你如何设计这个类？他应该包含什么内容？

OK！此类必须有个输出HTML的方法对吧？Render，还需要所包含的TagName、Value、Id、Name、Type、Class等等我们能想到的的<input>的属性。这些具体的属性在类里设计成属性就行了，还有一些自定义的属性，所以还需要一个AddAttribute方法。那么我们写一下大致的雏形。

   public class Button
    {
        public enum ButtonType
        {
            Submit, Button, Reset
        }
        public Button()
        {
            Attributes = new Dictionary<string, string>();
        }
        public string TagName { get; set; }
        public string ID { get; set; }
        public string Text { get; set; }
        public string Name { get; set; }
        public IDictionary<string, string> Attributes { get; set; }
        public ButtonType Type { get; set; }
        public void AddAttribute(string name, string value)
        {
            Attributes.Add(name, value);
        }
        private string GetAttributeHtml()
        {
            var html = string.Empty;
            foreach (var item in Attributes)
            {
                html += " " + item.Key + "=\"" + item.Value + "\"";
            }
            return html;
        }
        public string Render()
        {
            return String.Format("<{0} type=\"{1}\" id=\"{2}\" name=\"{3}\" value=\"{4}\" {5} />", TagName, Type, ID, Name, Text, GetAttributeHtml());
        }
    }

OK，如何？简版Button完成，可以输出基本的Button标签。先不说性能如何，您觉得能用吗？微软会这么写吗？！显然不会，这太简陋了，而且也没考虑到面向对象，因为标签都具备公共特性，比如 TagName，id ,name，class等，那我们改良下。

namespace WebApplication1.Control
{
    public interface IControl
    {
        void Render();
    }
    public class Control
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string TagName { get; set; }
        public string TagEndHtml { get; set; }
        public ControlAttributes Attributes { get; set; }
    }
    public class ControlAttributes
    {
        private readonly IDictionary<string, string> _attributes;
        public ControlAttributes()
        {
            _attributes = new Dictionary<string, string>();
        }
        public void AddAttribute(string name, string value)
        {
            _attributes.Add(name, value);
        }
        public string GetAttributeHtml()
        {
            var html = string.Empty;
            foreach (var item in _attributes)
            {
                html += " " + item.Key + "=\"" + item.Value + "\"";
            }
            return html;
        }
    }
    public class Button : Control, IControl
    {
        public enum ButtonType
        {
            Submit, Button, Reset
        }
        public Button()
        {
            TagEndHtml = "/>";
        }
        public string Text { get; set; }
        public ButtonType Type { get; set; }
        public void Render()
        {
            HttpContext.Current.Response.Write(String.Format("<{0} type=\"{1}\" id=\"{2}\" name=\"{3}\" value=\"{4}\" {5} {6}", TagName, Type, ID, Name, Text, Attributes.GetAttributeHtml(),TagEndHtml));
        }
    }
}

似乎有点感觉了，提取了公共部分，也抽象了Control，还把Attribute单独设计成类（职责单一嘛），但是，要想弄一个真正周全的Button，远没有这么简单，来一起看看微软官方的实现吧：）

首先看继承关系：

public class Button : WebControl, IButtonControl, IPostBackEventHandler
public class WebControl : Control, IAttributeAccessor
public class Control : IComponent, IDisposable, IParserAccessor, IUrlResolutionService, IDataBindingsAccessor, IControlBuilderAccessor, IControlDesignerAccessor, IExpressionsAccessor

所有的控件都是Control，所以需要一个Control基类，而微软又把控件分为了服务端控件(WebControl)和Html控件，所以所有的服务端控件又继承与WebControl。

我们知道Html控件就是我们常用的Html标签加上 runat="server"。所以功能方面要比WebControl差的远，自然就分开了。

我们来看看这些类，Control有个Render方法虚方法，这个设计是合理的，有些控件不一定非要自己实现输出，所以设计成接口不合理。

代码

protected internal virtual void Render(HtmlTextWriter writer)
{
    this.RenderChildren(writer);
}
//而内容也很简洁，就是输出子控件。
protected internal virtual void RenderChildren(HtmlTextWriter writer)
{
    ICollection children = this._controls;
    this.RenderChildrenInternal(writer, children);
}

internal void RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
{
    if ((this.RareFields != null) && (this.RareFields.RenderMethod != null))
    {
        writer.BeginRender();
        this.RareFields.RenderMethod(writer, this);
        writer.EndRender();
    }
    else if (children != null)
    {
        foreach (Control control in children)
        {
            control.RenderControl(writer);
        }
    }
}

如果是特殊的控件就输出开始内容和结束，如果不是则调用子控件的所有输出。这些方法都是虚方法，可以被子类覆盖。而我们需要关注的是一个类HtmlTextWriter。

是的，所有的输出都没离开他不是吗？而且Control类没有这个类型成员，神了！是外部调用传进来的。他到底干什么的？

代码

public class HtmlTextWriter : TextWriter
{
    public const char DoubleQuoteChar = '"';
    public const string EndTagLeftChars = "</";
    public const char EqualsChar = '=';
    public const string EqualsDoubleQuoteString = "=\"";
    private int indentLevel;
    public const string SelfClosingChars = " /";
    public const string SelfClosingTagEnd = " />";
    public const char SemicolonChar = ';';
    public const char SingleQuoteChar = '\'';
    public const char SlashChar = '/';
    public const char SpaceChar = ' ';
    public const char StyleEqualsChar = ':';
    private bool tabsPending;
    private string tabString;
    public const char TagLeftChar = '<';
    public const char TagRightChar = '>';

    protected HtmlTextWriterTag TagKey
    {
        get
        {
            return this._tagKey;
        }
        set
        {
            this._tagIndex = (int) value;
            if ((this._tagIndex < 0) || (this._tagIndex >= _tagNameLookupArray.Length))
            {
                throw new ArgumentOutOfRangeException("value");
            }
            this._tagKey = value;
            if (value != HtmlTextWriterTag.Unknown)
            {
                this._tagName = _tagNameLookupArray[this._tagIndex].name;
            }
        }
    }
}

public enum HtmlTextWriterTag
{
    Unknown,
    A,
    Acronym,
    Address,
    Area,
    B,
    Base,
    Basefont,
    Bdo,
   ......................
}

上面这些都是html标签的基本元素，TagName和括号。似乎有点眉目了，和我们写的差不离嘛：）再看看他的其他方法：

代码

private void AddAttribute(string name, string value, HtmlTextWriterAttribute key, bool encode, bool isUrl)
{
    RenderAttribute attribute;
    if (this._attrList == null)
    {
        this._attrList = new RenderAttribute[20];
    }
    else if (this._attrCount >= this._attrList.Length)
    {
        RenderAttribute[] destinationArray = new RenderAttribute[this._attrList.Length * 2];
        Array.Copy(this._attrList, destinationArray, this._attrList.Length);
        this._attrList = destinationArray;
    }
    attribute.name = name;
    attribute.value = value;
    attribute.key = key;
    attribute.encode = encode;
    attribute.isUrl = isUrl;
    this._attrList[this._attrCount] = attribute;
    this._attrCount++;
}

微软把Attribute也设计成了类，而且他没有用Dictionary<T,T>，而是RenderAttribute数组。有意思的是默认20个长度，太多还要搞个双倍的数组重新copy过去。所以大家不要搞太多的属性哦：）

他们把所有的标签(HtmlTextWriterTag、属性(HtmlTextWriterAttribute)和样式属性(HtmlTextWriterStyle)都设计成了枚举，这样比较好，枚举使代码易读而且要比字符串处理更快，这些名称也很少有变化。

回头看下WebControl类，因为所有的服务端控件都继承此类，所以他的Render方法也是一个虚方法，子类可以复写。

代码

protected internal override void Render(HtmlTextWriter writer)
{
    this.RenderBeginTag(writer);
    this.RenderContents(writer);
    this.RenderEndTag(writer);
}
public virtual void RenderBeginTag(HtmlTextWriter writer)
{
    this.AddAttributesToRender(writer);
    HtmlTextWriterTag tagKey = this.TagKey;
    if (tagKey != HtmlTextWriterTag.Unknown)
    {
        writer.RenderBeginTag(tagKey);
    }
    else
    {
        writer.RenderBeginTag(this.TagName);
    }
}
protected internal virtual void RenderContents(HtmlTextWriter writer)
{
    base.Render(writer);
}
public virtual void RenderEndTag(HtmlTextWriter writer)
{
    writer.RenderEndTag();
}

方法够简洁，开始->内容->结束。其中开始和结束调用的都是writer的方法，而内容则是base(即Control）的Render方法，上面已经贴了。

回头看Render调用的是RenderControl

public virtual void RenderControl(HtmlTextWriter writer)
{
this.RenderControl(writer, this.Adapter);
}

所以总体来说，输出内容的话既可以重写RenderContents方法，也可以重写RenderControl方法，也可以重写Render方法。

Button控件在输出的时候是没有Contents的，所以我们看到他只是重写了RenderContents方法，方法体就是空。
LinkButton是<a>连接，中间就得有text，所以他的方法就是输出Text了。
而CheckBox类则是重写的Render方法！因为CheckBox生成的代码有点特殊他包含了<label>和<input> 默认的Render方法三步骤不适合他，所以必须重写Render。你可能会问DropDownList应该也重写的Render方法吧，因为他有<select>和<option>，其实。。他谁都没重写？Why?因为他是<dorpdownlist><item>这种形式，也就是父控件包含子控件，而且都遵循3步骤，所以默认就OK了。

说完RenderContent，再说前后两个步骤RenderBeginTag和RenderEndTag。

EndTag是很简单，就是 </TagName>，没有什么花样，而BeginTag就复杂写，他要把属性、样式和其他一大堆属性（除了内容）都要加进去，而且最后判断是否需要 > 或 /> 关闭。

代码

public virtual void RenderBeginTag(HtmlTextWriterTag tagKey)
{
    this.TagKey = tagKey;
    bool flag = true;
    if (this._isDescendant)
    {
        flag = this.OnTagRender(this._tagName, this._tagKey);
        this.FilterAttributes();
        string str = this.RenderBeforeTag();
        if (str != null)
        {
            if (this.tabsPending)
            {
                this.OutputTabs();
            }
            this.writer.Write(str);
        }
    }
    TagInformation information = _tagNameLookupArray[this._tagIndex];
    TagType tagType = information.tagType;
    bool flag2 = flag && (tagType != TagType.NonClosing);
    string endTag = flag2 ? information.closingTag : null;
    if (flag)
    {
        if (this.tabsPending)
        {
            this.OutputTabs();
        }
        this.writer.Write('<');//这是输出标签开始
        this.writer.Write(this._tagName);//标签名称
        string str3 = null;
        for (int i = 0; i < this._attrCount; i++)//杯具的属性循环
        {
            RenderAttribute attribute = this._attrList[i];
            if (attribute.key == HtmlTextWriterAttribute.Style)
            {
                str3 = attribute.value;
            }
            else
            {
                this.writer.Write(' ');
                this.writer.Write(attribute.name);
                if (attribute.value != null)
                {
                    this.writer.Write("=\"");
                    string url = attribute.value;
                    if (attribute.isUrl && ((attribute.key != HtmlTextWriterAttribute.Href) || !url.StartsWith("javascript:", StringComparison.Ordinal)))
                    {
                        url = this.EncodeUrl(url);
                    }
                    if (attribute.encode)
                    {
                        this.WriteHtmlAttributeEncode(url);
                    }
                    else
                    {
                        this.writer.Write(url);
                    }
                    this.writer.Write('"');
                }
            }
        }
        if ((this._styleCount > 0) || (str3 != null))//杯具的样式输出
        {
            this.writer.Write(' ');
            this.writer.Write("style");
            this.writer.Write("=\"");
            CssTextWriter.WriteAttributes(this.writer, this._styleList, this._styleCount);//还有专门的CssWriter 继续杯具的循环样式
            if (str3 != null)
            {
                this.writer.Write(str3);
            }
            this.writer.Write('"');
        }
        if (tagType == TagType.NonClosing)//判断怎么关。。
        {
            t