控件的呈现

控件生命周期的Render阶段,主要将标记和字符文本输出到控件输出流中去.

我们需要关注的方法如下:
RenderControl(HtmlTextWriter writer);
Render(HtmlTextWriter writer);
RenderBeginTag(HtmlTextWriter writer);
RenderContents(HtmlTextWriter writer);
RenderEndTag(HtmlTextWriter writer);

其中调用次序是这样的:
RenderControl --> Render --> [ 1. RenderBeginTag 2. RenderContents 3. RenderEndTag ]

下面我们来看个控件呈现的例子,我们做个控件,在外观上放个3X3的表格,如下:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BlogControl
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:RenderControl0 runat=server></{0}:RenderControl0>")]
    public class RenderControl0 : WebControl
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            string strContent = @"<table cellpadding=""2"" cellspacing=""2"" border=""1"">
                                <tr><td>a1</td><td>b1</td><td>c1</td></tr>
                                <tr><td>a2</td><td>b2</td><td>c2</td></tr>
                                <tr><td>a3</td><td>b3</td><td>c3</td></tr></table>";

            output.Write(strContent);
        }
    }
}

aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RenderControl0.aspx.cs" Inherits="BlogNet.AspNetControl.RenderControl0" %>

<%@ Register Assembly="BlogControl" Namespace="BlogControl" TagPrefix="myCtl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>控件呈现 - 使用html字符串</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <myCtl:RenderControl0 ID="RenderControl1" runat="server" />
        <myCtl:RenderControl0 ID="RenderControl2" runat="server" />
    </div>
    </form>
</body>
</html>

效果如下:

以上程序有两个缺点:
首先, 呈现采用长字符串
@"<table cellpadding=""2"" cellspacing=""2"" border=""1"">
                                <tr><td>a1</td><td>b1</td><td>c1</td></tr>
                                <tr><td>a2</td><td>b2</td><td>c2</td></tr>
                                <tr><td>a3</td><td>b3</td><td>c3</td></tr></table>";
一旦UI过于复杂后,可读性不好.

其次,生成在html的代码也不具备可读性,如下:

那么,怎么办呢?

方法是我们可以利用RenderBeginTag,RenderEndTag和HtmlTextWriterTag枚举来格式化代码输出.
另外,现在如果要求表格是横向排列,我们还要利用css,如果又是字符串,那么必定很冗长.
我们可以重写HtmlTextWriterTag,默认是span,我们改成div,然后重写AddAttributesToRender,给
HtmlTextWriterTag加上向左浮动的css.

新的主要代码如下:

protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }

        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Style, "float:left");
            base.AddAttributesToRender(writer);
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "2");
            output.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "2");
            output.AddAttribute(HtmlTextWriterAttribute.Border, "1");
            output.AddAttribute(HtmlTextWriterAttribute.Bordercolor, "blue");

            output.RenderBeginTag(HtmlTextWriterTag.Table);
            for (int i = 1; i < 4; i++)
            {
                output.RenderBeginTag(HtmlTextWriterTag.Tr);

                output.RenderBeginTag(HtmlTextWriterTag.Td);
                output.Write("a" + i);
                output.RenderEndTag();
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                output.Write("b" + i);
                output.RenderEndTag();
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                output.Write("c" + i);
                output.RenderEndTag();

                output.RenderEndTag();
                output.WriteLine();
            }
            output.RenderEndTag();
        }

运行下,效果如下:

我们再来看下源代码,比原来清楚多了,如下: