Dot Net Perls

Problem

Write HTML programmatically using the HtmlTextWriter object. For example, we may want to generate a list of <div> elements. We could use StringBuilder to generate the HTML, but we want more robust and understandable code. We should learn about and master the HtmlTextWriter class.

Solution: C#

Here's a high-level synopsis here first. HTML is a string and it is natural and easy to generate HTML using StringBuilder objects in C#. That method is also prone to many bugs and extremely complex syntax. Right here I will present an example solution that uses HtmlTextWriter, and then reveal the version with StringBuilder.

/// <summary>
/// Generate the HTML markup I can put to show teaser banners in a page.
/// </summary>
public string GetTeaserMarkup()
{
    StringWriter stringWriter = new StringWriter();

    // Put HtmlTextWriter in using block because it needs to call Dispose.
    using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
    {
        foreach (SpecialObject item in _teaserItems)
        {
            // Some strings for the attributes.
            string classString = "ClassName";
            string realUrl = "http://dotnetperls.com/";
            string imgStr = "image.jpg";
            string boldText = "Some text";
            // [code omitted]

            // The important part.
            writer.AddAttribute(HtmlTextWriterAttribute.Class, classString);
            writer.RenderBeginTag(HtmlTextWriterTag.Div); // Begin #1

            writer.AddAttribute(HtmlTextWriterAttribute.Href, realUrl);
            writer.RenderBeginTag(HtmlTextWriterTag.A); // Begin #2

            writer.AddAttribute(HtmlTextWriterAttribute.Src, imgSrc);
            writer.AddAttribute(HtmlTextWriterAttribute.Width, "60");
            writer.AddAttribute(HtmlTextWriterAttribute.Height, "60");
            writer.AddAttribute(HtmlTextWriterAttribute.Alt, "");

            writer.RenderBeginTag(HtmlTextWriterTag.Img); // Begin #3
            writer.RenderEndTag(); // End #3

            writer.Write(boldText);

            writer.RenderEndTag(); // End #2
            writer.RenderEndTag(); // End #1
        }
    }
    return stringWriter.ToString();
}

• New StringWriter
  This is required for the HtmlTextWriter to write to. It is a buffer and everything that is written is written to this.
• Using keyword
  The using keyword ensures that the system will Dispose of the objects properly. It is not really required but may make for more efficient code.
• Loop through custom objects
  Your program will have a collection of objects it needs to write out, or read from a database. We simply use a foreach loop for this.

Make tags with HtmlTextWriter

You may recognize the Push and Pop methods on queues. Call RenderBeginTag to open a new level in the HTML with that tag. You must manually close that level of that markup with the RenderEndTag method call. RenderBeginTag and RenderEndTag must be in pairs! Let me repeat the above code.

// The important part (repeated from above).
writer.AddAttribute(HtmlTextWriterAttribute.Class, classString);
writer.RenderBeginTag(HtmlTextWriterTag.Div); // Begin #1

writer.AddAttribute(HtmlTextWriterAttribute.Href, realUrl);
writer.RenderBeginTag(HtmlTextWriterTag.A); // Begin #2

writer.AddAttribute(HtmlTextWriterAttribute.Src, imgSrc);
writer.AddAttribute(HtmlTextWriterAttribute.Width, "60");
writer.AddAttribute(HtmlTextWriterAttribute.Height, "60");
writer.AddAttribute(HtmlTextWriterAttribute.Alt, "");

writer.RenderBeginTag(HtmlTextWriterTag.Img); // Begin #3
writer.RenderEndTag(); // End #3

writer.Write(boldText);

writer.RenderEndTag(); // End #2
writer.RenderEndTag(); // End #1

• Add an attribute
  Attributes in HTML are similar are used with = and quotes. Add the attribute with AddAttribute before BeginRenderTag.
• Enumerations
  Look at the parts of the code that read "HtmlTextWriterAttribute.Class" and similar. These are enumerations on the specified class. You do not type the tag names in strings. That would result in typos. The framework does all the tag names and attributes for you.
• Tags
  Every tag is started and then closed later--this is the most important part.
• Write method
  An instance method that writes text in better the tags in HTML.

Example output

The next code block here shows markup similar to what the above code might produce in a foreach loop. The spacing can be adjusted to anything you want, as I show in the following part of this document.

<div class="ClassName">
    <a href="page1.aspx"><img src="image1.jpg" [...] />Inner text.</a>
</div><div class="ClassName">
    <a href="page2.aspx"><img src="image2.jpg"       />More inner text.</a>
</div><div class="ClassName">
    <a href="page3.aspx"><img src="image3.jpg"       />Are you reading this?</a>
</div>

Tabstring parameter reduces whitespace

In the constructor to the HtmlTextWriter, use an empty string (string.Empty) as the second parameter. This will eliminate a lot of whitespace, and I was able to reduce the size of my pages by a (small) percentage this way.

using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter, string.Empty))
{
    // etc.
}

Conclusion

Use HtmlTextWriter to write HTML instead of StringBuilder alone for the cleanest and object-oriented code. I am not aware of any performance issues, and the markup is always nicely indented. For XML, use XmlWriter, which is a very similar class, or even the XElement class in LINQ.

Ads by The Lounge