自定义ASP.NET容器控件

Question

我一直在尝试创建一个自定义控件,其工作方式与Panel控件完全相同,除了包含几个div之外,这样可以创建一个圆角框外观.我还没有找到一个如何做到这一点的体面的例子.

我需要能够在控件内部放置文本和控件并直接访问它而无需引用面板(完全与Panel控件的工作方式相同).

有没有人有这方面的例子？

Answer 1

有两种方法可以做到这一点.一种是在你的控件上实现INamingContainer,需要付出很多努力.

另一种方法是从Panel继承,并覆盖RenderBeginTag和RenderEndTag方法以添加自定义标记.这很简单.

public class RoundedCornersPanel : System.Web.UI.WebControls.Panel
{
    public override RenderBeginTag (HtmlTextWriter writer)
    {
        writer.Write("Your rounded corner opening markup");
        base.RenderBeginTag(writer);
    }

    public override RenderEndTag (HtmlTextWriter writer)
    {
        base.RenderEndTag(writer);
        writer.Write("Your rounded corner closing markup");                     
    }
}

Answer 2

这里已经有了不少答案,但我只想粘贴最基本的实现而不继承Panel类.所以这里:

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

[ToolboxData("<{0}:SimpleContainer runat=server></{0}:SimpleContainer>")]
[ParseChildren(true, "Content")]
public class SimpleContainer : WebControl, INamingContainer
{
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [TemplateContainer(typeof(SimpleContainer))]
    [TemplateInstance(TemplateInstance.Single)]
    public virtual ITemplate Content { get; set; }

    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        // Do not render anything.
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        // Do not render anything.
    }

    protected override void RenderContents(HtmlTextWriter output)
    {
        output.Write("<div class='container'>");
        this.RenderChildren(output);
        output.Write("</div>");
    }

    protected override void OnInit(System.EventArgs e)
    {
        base.OnInit(e);

        // Initialize all child controls.
        this.CreateChildControls();
        this.ChildControlsCreated = true;
    }

    protected override void CreateChildControls()
    {
        // Remove any controls
        this.Controls.Clear();

        // Add all content to a container.
        var container = new Control();
        this.Content.InstantiateIn(container);

        // Add container to the control collection.
        this.Controls.Add(container);
    }
}

然后你可以像这样使用它:

<MyControls:SimpleContainer
    ID="container1"
    runat="server">
    <Content>
        <asp:TextBox
            ID="txtName"
            runat="server" />

        <asp:Button
            ID="btnSubmit"
            runat="server"
            Text="Submit" />
    </Content>
</MyControls:SimpleContainer>

从代码隐藏中你可以做到这样的事情:

this.btnSubmit.Text = "Click me!";
this.txtName.Text = "Jack Sparrow";