Using LINQ to generate HTML

Michael C. Neel — Sun, 03 Aug 2008 17:55:20 GMT

I hate seeing code mixed with markup.

Seeing a template page with <% if(show) { %> makes me want to claw my eyes out. Seeing String htmlTitle = "<h1>" + title + "</h1>" causes me to vomit up a little something in my throat.

Mixing code with markup is not a magic chocolate and peanut butter combination - it's a volatile cocktail of vinegar and baking soda waiting to explode your application to tiny Server 500 Error giblets.

The time comes however when we find ourselves needing to generate some well formed HTML in code, and I found myself in just such a position last night adding the agenda to the CodeStock website. (Less than one week away now!)

Background: On the CodeStock site, the speakers and sessions list lives in an XML file. The agenda page has a grid of session times and my task was to fill in each session "cell" with the session planned for that room and time. I wanted to link to the full session and also list the speaker's name in the cell. In the XML I have created Key elements that are used as HTML anchors in a link to a session. It's all very low tech, simplistic goodness. An example of the XML for a speaker:

<Speaker>
    <Key>Brownell</Key>
    <Name>Steve Brownell</Name>
    <Website>http://enthusiasticprogramming.blogspot.com</Website>
    <Photo>~/Speakers/SteveBrownell.png</Photo>
    <Bio>
        Steve is the manager for research and development at AllMeds in Oak Ridge, TN.  Steve
        has been programming one thing or another for over twenty years.  AllMeds makes and
        sells a commercial software product which is an electronic medical record system.  We've
        been .NET based since 2000.  AllMeds is a VB.NET shop at heart, but the AllMeds system spans
        many areas of Windows development.
    </Bio>
    <Session>
        <Key>Hobbled</Key>
        <Title>
            The Hobbled:  There And Back Again, or Code Automation:  how I made it from the
            presentation layer to the database and back.
        </Title>
        <Abstract>
            Stop writing code, and start writing code that writes code.  There's never been more
            choices to help you automate the creation of the data object layers immediately above
            the database.  Writing class factories and data access classes is boring, time consuming
            and wastes valuable time with expensive developer resources.  This course will examine
            two current approaches:  using a template engine and programming with the CODEDOM.  We'll
            also briefly discuss other ORM techniques like LINQ to SQL Classes.
        </Abstract>
        <Level>200</Level>
        <Technology>VB.NET, C#, LINQ, SQL</Technology>
    </Session>
</Speaker>

(Steve was our CodeStock Speaker Idol winner, and I enjoyed seeing System.Codedom in action; something I'll be playing with and posting on in the future thanks to Steve!)

LINQ to XML, and the new "X" classes that come with it make working with XML as easy as it should have always been. Armed with LINQ, I decided that putting <%= SessionInfo("Hobbled") %> was something I could live with (had this been a larger site that needed to live longer than August 9th, I would have opted for a user control <CodeStock:SessionInfo Key="Hobbled"/>). My first LINQ expression looked something like the following:

var info = (from s in speakers.Descendants("Session")
            where s.Element("Key").Value.Equals(SessionKey)
            select new {
                key = s.Element("Key").Value,
                title = s.Element("Title").Value.Trim(),
                speaker = s.Parent.Element("Name").Value
            }).First();

This yields a very useful info object with just the information I need. *If* I was in a hurry, and didn't mind a little vomit, I would follow on with the following:

String hmtl = String.Format("<a href='{0:s}' title='{1:s}'>{2:s}</a><br />{3:s}",
    new object[] { ExpandURL("~/Pages/Agenda.aspx", info.key),
                   info.title,
                   info.title.Length > 30 ? info.title.Substring(0, 27) + "..." : info.title,
                   info.speaker });

Why do I despise this so much? It's not easy to read, and it can become cumbersome to change. ASP.NET has a collection of server controls just for generating HTML, intended for use in user controls but they are not limited to user controls alone. To generate the html above would look something like this:

HtmlAnchor aHref = new HtmlAnchor() {
    HRef = ExpandURL("~/Pages/Agenda.aspx", info.key),
    InnerText = info.title.Length > 30 ? info.title.Substring(0, 27) + "..." : info.title,
    Title = Title
};
HtmlGenericControl div = new HtmlGenericControl("div") {
    InnerText = info.speaker
};

StringBuilder html = new StringBuilder();
using (StringWriter sw = new StringWriter(html)) {
    using (HtmlTextWriter hw = new HtmlTextWriter(sw)) {
        aHref.RenderControl(hw);
        div.RenderControl(hw);
        hw.Close();
    }
    sw.Close();
}

There are times when working with parts of the .Net framework I have wonder if some Java types didn't design the class. The mess here to render the HTML is one of those times. The lack of a RenderControl that returns a String is the problem - thankfully we now have extension methods to fix the framework, but that's another post. No matter how much I hate markup in the code, I cannot endorse this version over the vomit inducing first solution.

It occurs to me that HTML is (or was once) fundamentally XML, and I can return XML from my LINQ expression. In fact, this is what LINQ is about - not just getting the data you want, but getting it in the format you need. Here is the new LINQ query:

XElement info = (from s in speakers.Descendants("Session")
                 where s.Element("Key").Value.Equals(SessionKey)
                 let key = s.Element("Key").Value
                 let title = s.Element("Title").Value.Trim()
                 let shortTitle = title.Length > 30 ? 
                    title.Substring(0, 27) + "..." : title
                 let session = new XElement("a",
                              new XAttribute("href",
                                  ExpandURL("~/Pages/Agenda.aspx", key)),
                              new XAttribute("title", title),
                              shortTitle)
                 let speaker = new XElement("div", s.Parent.Element("Name").Value)
                 select new XElement("span", session, speaker)).First();

This may not seem to some as better. I myself have trouble looking at most LINQ expressions, but as I'm learning to Thinq Linq I'm seeing that writing the LINQ expression is where the power lies, not in the syntax. The mental dialog goes something like this:

"Okay, from my list of speakers I want a session where the session's key matches SessionKey. Now, let me grab some fields I need, first the key, then the title which I need to trim off excess whitespace, then let's make a short version of that title since Steve's title is so long - love that title though. I'll need an link tag for the session; set the href and title attributes, and then add the speaker's name in a div tag so I get a cheap line break. I'm really in XML not HTML, so I'll need a root node and a span tag will work without affecting layout, and I'll add the link and div tags as children."

Writing LINQ like this I feel much closer to the problem I'm trying to solve, and not bogged down by syntax. There is still some moments I'm thrust back to code, such as the use of First() to select only one result. I'd like to have a "select first" option in LINQ expressions instead of just the extension methods.

Is this something I'll be using now every time I have this problem? Not sure yet, but it's another "tool in the box" I'll keep around and use when it feels right.

ViNull, Off the Record : LINQ

Using LINQ to generate HTML