Toggling boilerplate HTML visibility in ASP.NET

The problem

When you are writing an aspx page, you write HTML mixed with ASP.NET controls. Sometimes, when some control is not visible, or has no visible (html) output, you may need to hide the html that is containing the control as well.

For example, suppose a document from some CMS may or may not have a Title, or said Title may be empty. Your aspx page might look like this:

<h1><cms:FieldControl runat="server" Field="Title" /></h1>

Suppose FieldControl is a control that renders the a field of the current document when that field exists and isn’t empty. When Title is empty, you don’t want the <h1> tag to be rendered either.

Solution 1: Placeholders and code-behind

The most straightforward solution to this problem is to place an <asp:Placeholder> control around the <h1>. Then in code-behind, test the FieldControl for output and set the Placeholder visibility accordingly. For example:

<asp:Placeholder runat="server" ID="phTitle">
	<h1><cms:FieldControl runat="server" ID="fcTitle" Field="Title" /></h1>

code behind:

protected override void OnPreRender(EventArgs e)
	phTitle.Visible = fcTitle.Visible && !String.IsNullOrEmpty(fcTitle.Text)

While there is nothing wrong with this code, it could become cumbersome if you have more than a few of these snippets. There may even be controls that don’t expose a Text property or a similar way to test the control for output.

Solution 2: Introducing the Enclosure control

Continue reading “Toggling boilerplate HTML visibility in ASP.NET”

A Fluent interface for creating Control hierarchies (method chaining)

I was creating a custom ASP.NET control for a project and I noticed that creating Control hierarchies was a lot of work, and a bit clunky. For instance, create a table with a single row, with a single cell with just two Panels and some literals in them.

Control structure:

  • (this)
    • Table
      • TableRow
        • TableCell
          • Panel
            • Literal
          • Panel
            • Literal
Table table = new Table { BorderStyle = BorderStyle.None, Width = Unit.Percentage(100) };
TableRow tr = new TableRow();
TableCell td = new TableCell();

Panel ush = new Panel { CssClass = "UserSectionHead" };
ush.Controls.Add(new Literal { Text = "Title" });

Panel usb = new Panel { CssClass = "UserSectionBody" };
usb.Controls.Add(new TextField { Text = "Enter title" });


As you can see, there’s a lot of variables you need to create just to be able to add (nested) child controls to the control hierarchy. And this is just a very small example. Fortunately, most properties can be set in the initializer, otherwise the boilerplate would be even larger!

Continue reading “A Fluent interface for creating Control hierarchies (method chaining)”