自定义控件（支持模板）

自定义控件（支持模板）

再说一下，这部分内容最好的教材就是我一开始推荐的那个视频材料。如果还有没有下的那就赶快去下~~指不定哪天微软的网站被攻击，倒闭了，就没的下了。不过话说回来，如果微软都倒闭了，那我们还学.net干嘛啊~~~


不瞎扯了，下面转入正题。


任何控件都可以包含子控件。一个控件支持模板，其实就是在往它里面加子控件。模板是用什么形式在控件内公开的呢？想一想，我们用一个一般的控件都可以直接用标记来指定属性，而模板也是使用标记来操作。使用模板的时候，就是用标记的方法给模板赋值，根据“任何控件都可以包含子控件”，所以模板里也可以再包含控件。因此，模板在控件定义中就表现为属性。我们的标记都是用xml形式呈现的，因此，使用模板实际上就是给控件的某个属性赋于xml标记这样的值。


上面的话是否可以看懂呢？看下面的这段标记。

<cc1:TemplateControl id="tem" runat="server">
    <itemtemplate>
        <asp:Button id="Button1" Text="<%# Container.Text%>" Runat="server">
        </asp:Button>
        <asp:Label ID="Label1" Text="<%# Container.Text%>" Runat="server"></asp:Label><br>
        <div>hello world !</div>
    </itemtemplate>
</cc1:TemplateControl> 

这是一个支持模板及数据绑定的自定义控件。它是这样完成的。

 

ITEMTEMPLATE是一个ITemplate类型的属性，只要对外公开了此属性，就可以使控件支持模板。

 

//模板

private ITemplate itemTemplate;
public ITemplate ItemTemplate
{
    get{ return this.itemTemplate; }
    set{ this.itemTemplate=value; }
}

设置好属性后，还需要给控件加一个类级别的[ParseChildren(true)]特性，用来指明将控件内的XML标记元素视为属性处理，这样就可以在<ITEMTEMPLATE>标签内定义自己的模板。

 

作完这些后，下一步需要做的就是要将模板做为子控件加入到控件中。

protected override void CreateChildControls()
{
    if(this.itemTemplate!=null)
    {
        //当由类实现时，定义子控件和模板所属的 Control 对象。然后在内联模板中定义这些子控件。
        //这里把容器控件指定为代表控件本身的this
        this.itemTemplate.InstantiateIn(this);
    }
    else{
        this.Controls.Add(new LiteralControl("no itemtemplate!"));
        base.CreateChildControls();
    }
}

通过重写CreateChildControls方法来完成。

只有调用DataBind，才可能将数据绑定到子控件。因此我们还需要重写OnDataBinding

protected override void OnDataBinding(EventArgs e)
{
    //确定服务器控件是否包含子控件。如果不包含，则创建子控件。
    this.EnsureChildControls();
    base.OnDataBinding (e);
} 

到这里，一个简单的支持模板的控件就算完成了，可以自己把上面的东西组合起来看看效果。

我们需要模板一般都是要进行数据绑定的，接下来看看怎么实现。

 

<%# Container.Text%>

 

上面是一般的绑定表达式，可以看到，其实就是调用了一个对象的属性，其中Container用来表示乘放模板的容器，而Text正是该容器的属性。

 

一般用TemplateContainer特性来指定容器的类型，像这样：

[TemplateContainer(typeof(ContainerControl)),Browsable(false)]
public ITemplate ItemTemplate
{ // }

ContainerControl就是一个容器控件，其定义如下

public class ContainerControl : Control, INamingContainer
{
    private string text;

    public string Text
    {
        get { return this.text; }
    }

    public ContainerControl(string text)
    {
        this.text = text;
    }
}

注意，这是一个控件，只是没有向页面呈现而已。实际上，它的作用就是用来乘放模板。这样，我们创建模板时就改成了这样子

ContainerControl cc=new ContainerControl(text);
this.itemTemplate.InstantiateIn(cc);
this.Controls.Add(cc);

下面是这个控件的完整的代码 ：

using System;
using System.Web.UI;
using System.ComponentModel;

namespace CC
{
    /// <summary>
    /// 模板练习
    /// </summary>
    //分析控件内的xml元素标记
    [ParseChildren(true)]
    public class SimpleTemplate : Control, INamingContainer
    {
        //模板
        private ITemplate itemTemplate;

        //指定存放模板的容器控件
        [TemplateContainer(typeof(ContainerControl)), Browsable(false)]
        public ITemplate ItemTemplate
        {
            get { return this.itemTemplate; }
            set { this.itemTemplate = value; }
        }

        //辅助进行绑定的属性
        private string text;

        public string Text
        {
            get { return this.text; }
            set { this.text = value; }
        }

        /// <summary>
        /// 创建子控件
        /// </summary>
        protected override void CreateChildControls()
        {
            if (this.itemTemplate != null)
            {
                //使用得到的属性来创建容器控件
                ContainerControl cc = new ContainerControl(this.text);
                //将模板添加到专门的容器中
                this.itemTemplate.InstantiateIn(cc);
                //将容器加到父控件中
                this.Controls.Add(cc);
            }
            else
                this.Controls.Add(new LiteralControl("no itemtemplate!"));
            base.CreateChildControls();
        }

        /// <summary>
        /// 在这里进行检查并创建模板
        /// </summary>
        /// <param name="e"></param>
        protected override void OnDataBinding(EventArgs e)
        {
            //确定服务器控件是否包含子控件。如果不包含，则创建子控件。
            this.EnsureChildControls();
            base.OnDataBinding(e);
        }

    }

}

具体使用的页面，.aspx页上的标记就像我们一开始那样，.cs里的代码为

if(!this.IsPostBack)
{
    this.tem.Text="hello world !";
    this.tem.DataBind();
}

在这里，就算postback了，显示的页面还是没有改变，这主要是因为模板内的控件各自维持自己的状态，了解这一点很重要，因为接下来支持数据绑定时需要使用这一点。

 

还有一点，如果把DataBind注释掉了，那Text就不会绑定到模板上。你可以实验一下把EnsureChildControls放到其他方法中（比如Render什么的），结果都是如此