Design-time support for ASP.net composite controls

August 29, 2008 by Christoff Truter C#   ASP.NET  

Creating composite controls in ASP.net can prove to be quite a tedious process at times, when it comes to the actual HTML the control renders. Especially since design-time support for composite controls are quite limited.

Consider the following piece of HTML, how would one go to work to render this from a control?

<table>
    <tr>
        <td>
            <input name=" txtUrl" type="text" id=" txtUrl" style="width:470px;" value="http://" />
        </td>
        <td>
            <input type="submit" name="btnDisplay" value="Go" id=" btnDisplay" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <iframe id="ifBrowser" width="500px" height="500px"></iframe>
        </td>
    </tr>
</table>

If we look at the following crude examples.

We can override the render method and make use of the methods exposed by the HtmlTextWriter parameter, like in example 1.

One might even consider to override the CreateChildControls method, and adding the elements to the controls collection, like in example 2.

Example 1

protected Button btnDisplay = new Button();
protected TextBox txtUrl = new TextBox();
protected HtmlGenericControl ifBrowser = new HtmlGenericControl("iframe");

protected override void Render(HtmlTextWriter writer)
{
    writer.WriteFullBeginTag("table");
    writer.WriteFullBeginTag("tr");
    writer.WriteFullBeginTag("td");
    txtUrl.ID = "txtUrl";
    txtUrl.Text = "http://";
    txtUrl.Width = new Unit(470);
    txtUrl.RenderControl(writer);
    writer.WriteEndTag("td");
    writer.WriteFullBeginTag("td");
    btnDisplay.ID = "btnDisplay";
    btnDisplay.Text = "Go";
    btnDisplay.CommandName = "Click";
    btnDisplay.RenderControl(writer);
    writer.WriteEndTag("td");
    writer.WriteEndTag("tr");
    writer.WriteFullBeginTag("tr");
    writer.WriteBeginTag("td");
    writer.WriteAttribute("colspan", "2");
    writer.Write(">");
    ifBrowser.ID = "ifBrowser";
    ifBrowser.Attributes["width"] = "500px";
    ifBrowser.Attributes["height"] = "500px";
    ifBrowser.RenderControl(writer);
    writer.WriteEndTag("td");
    writer.WriteEndTag("tr");
    writer.WriteEndTag("table");
    base.Render(writer);
}

Example 2

protected Button btnDisplay = new Button();
protected TextBox txtUrl = new TextBox();
protected HtmlGenericControl ifBrowser = new HtmlGenericControl("iframe");

protected override void CreateChildControls()
{
    HtmlTable mainTable = new HtmlTable();
    HtmlTableRow firstRow = new HtmlTableRow();
    HtmlTableRow secondRow = new HtmlTableRow();
    mainTable.Controls.Add(firstRow);
    mainTable.Controls.Add(secondRow);            
    HtmlTableCell firstRowFirstCell = new HtmlTableCell();
    txtUrl.ID = "txtUrl";
    txtUrl.Text = "http://";
    txtUrl.Width = new Unit(470);
    firstRowFirstCell.Controls.Add(txtUrl);
    HtmlTableCell firstRowSecondCell = new HtmlTableCell();
    btnDisplay.ID = "btnDisplay";
    btnDisplay.Text = "Go";
    btnDisplay.CommandName = "Click";
    firstRowSecondCell.Controls.Add(btnDisplay);
    firstRow.Controls.Add(firstRowFirstCell);
    firstRow.Controls.Add(firstRowSecondCell);
    HtmlTableCell secondRowfirstCell = new HtmlTableCell();
    ifBrowser.Attributes["width"] = "500px";
    ifBrowser.Attributes["height"] = "500px";
    ifBrowser.ID = "ifBrowser";
    secondRowfirstCell.Controls.Add(ifBrowser);
    secondRowfirstCell.ColSpan = 2;
    secondRow.Controls.Add(secondRowfirstCell);
    this.Controls.Add(mainTable);
    base.CreateChildControls();
}

I've never liked any of these approaches, it just feels like a very "unnatural" way to represent HTML.

It is however possible to add some real design-time support of our own. My initial thoughts were that one would be able to simply embed an user control (ascx) as a web resource inside an assembly and simply use it like that. Which would be a logical choice, since user controls have full design-time support for authoring.

It wasn't a simple case of embed and off you go, I ran into a few difficulties, but came up with a very simple solution.

Have a look at the following abstract class (we're only going to use this as a base class for embedded user controls).

public abstract class EmbeddedUserControl : CompositeControl
{
    protected Control UserControls;

    public T Control<T>(string id) where T : Control
    {
        this.EnsureChildControls();
        return (T)UserControls.FindControl(id);
    }

    protected override void CreateChildControls()
    {
        Assembly assembly = Assembly.GetExecutingAssembly();
        string name = this.GetType().Namespace + "." + this.GetType().Name + ".ascx";

        using (StreamReader sr = new StreamReader(assembly.GetManifestResourceStream(name)))
        {
            string content = sr.ReadToEnd();
            UserControls = (DesignMode) ? new LiteralControl(content) : Page.ParseControl(content);
        }
        this.Controls.Add(UserControls);
        base.CreateChildControls();
    }
}

What happens here is we override the CreateChildControls method, and parse an embedded ascx file, which will act as our designer.

You will also notice a generic method, it simply functions as wrapper, and ensures that the controls collection are fully populated, before we try to use them.

Creating a new control will work like this:

Step 1: Add an blank ascx file to your control library (you will notice there isn't an option for ascx in the list (if you did it right, hint control library project :P), choose text file and just name it eg browser.ascx) This will allow you to drag & drop controls onto the page, and work with all the nice little visual tools in VS.

Step 2: ENSURE THAT THE BUILT ACTION OF THE ASCX PAGE IS SET AS "Embedded Resource"

Step 3: Add a class and inherit from the EmbeddedUserControl class, GIVE IT THE SAME NAME AS WHAT YOU GAVE THE ASCX FILE eg browser.cs, obviously not the same extension thought ;)

Step 4: Code away.

For the purpose of this post, I created a composite control that acts like a little browser window. Which you can download below in the related downloads section.