Custom ASP.NET Container Control

Question

I've been trying to create a custom control that works exactly like the Panel control except surrounded by a few divs and such to create a rounded box look. I haven't been able to find a decent example of how to do this.

I need to be able to place text and controls inside the control and access it directly without referencing the panel (exactly the way the Panel control works).

Does anyone have any examples of this?

Solution 1

There are two ways to do this. One is to implement INamingContainer on your control, and it takes a lot of effort.

The other way is to inherit from Panel, and override the RenderBeginTag and RenderEndTag methods to add your custom markup. This is easy.

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");                     
    }
}

Solution 2

There are already quite a few answers here, but I just wanted to paste the most basic implementation of this without inheriting from Panel class. So here it goes:

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);
    }
}

Then you can use it like this:

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

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

And from codebehind you can do things like this:

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

Solution 3

Create a class that inherits System.Web.UI.Control, and overrride the Render ( HtmlTextWriter ) method. In this method, render surrounding start tags, then render the children(RenderChildren), then render end tags.

protected override void Render ( HtmlTextWriter output )
{
  output.Write ( "<div>" );
  RenderChildren ( output );
  output.Write ( "</div>" );
}

Rounded corners is typically achieved using CSS and corner images for the top left, top right, bottom left and bottom right corners. It could be done using 4 nested divs, acting as layers, each of them having one corner image as their background image.

Solution 4

Code project have something that might interest you : Panel Curve Container - An ASP.NET Custom Control Nugget. I am sure you can play with the code and have the behavior and look you want.

Solution 5

If you don't want to inherit directly from WebControl instead of from Panel, the easiest way to do this is to decorate the class with the attribute [ParseChildren(false)]. Although at first glance this might suggest that you don't want to parse children, what the false actually indicates is that you don't want the children to be treated as properties. Instead, you want them to be treated as controls.

By using this attribute, you get virtually all of the functionality out of the box:

[ToolboxData("<{0}:RoundedBox runat=server></{0}:RoundedBox>")]
[ParseChildren(false)]
public class RoundedBox : WebControl, INamingContainer
{
    public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.Write("<div class='roundedbox'>");
    }

    public override void RenderEndTag(HtmlTextWriter writer)
    {
        writer.Write("</div>");
    }
}

This will allow you to add RoundedBox controls to your pages, and add children (either asp.net controls or raw html) that will be rendered inside your div.

Of course, css would be added to correctly style the roundedbox class.

View more solutions

Comments

[Arthur Chaparyan]

This is probably a very stupid question but since I can't place this code in a typical user control (.ascx), where would I put it? I created a class and placed it in there, but then I don't know how to add it to a page (dragging just creates a link)

[Peter Ramos]

Post a question on how to use ASP.NET Server controls, and I can answer, I can't fit the explanation into this little comment box.

[Arthur Chaparyan]

Thanks Jonathan, I really appreciate your help: stackoverflow.com/questions/306381/aspnet-custom-controls

[SynBiotik]

How would you change the SimpleContainer class if the goal was to have a left content and a right content? Could you simply have 2 ITemplate properties? What about the attribute ParseChildren?

[dizarter]

Excellent, this should be the accepted solution. Voted up anyway.