Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Using LINQ to generate HTML

image 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.


Posted 08-03-2008 1:55 PM by Michael C. Neel
Filed under: , ,

[Advertisement]

Comments

Nicholas Piasecki wrote re: Using LINQ to generate HTML
on 08-03-2008 3:48 PM

I have no problem mixing code with markup, particularly little if/else checks on template pages, as long as that code is presentation code. This usage of LINQ isn't really creating any separation, just obfuscating it. After all, at the end of the day, *some* code is going to spit out the string ... which method will be easier for a maintenance programmer to modify six months down the road is a stylistic preference that is open to debate. Just my two cents.

Dew Drop - August 4, 2008 | Alvin Ashcraft's Morning Dew wrote Dew Drop - August 4, 2008 | Alvin Ashcraft's Morning Dew
on 08-04-2008 9:28 AM

Pingback from  Dew Drop - August 4, 2008 | Alvin Ashcraft's Morning Dew

KevinI wrote re: Using LINQ to generate HTML
on 08-04-2008 1:25 PM

You should check out VB.Net XML Literals, it uses the LINQ with type strict syntax to take the exact code you made above and basically make it look like 'pure xml' (but type safe).  

Yuvi wrote re: Using LINQ to generate HTML
on 08-04-2008 2:26 PM

VB9's XML Literals ftw!

Websites tagged "orm" on Postsaver wrote Websites tagged "orm" on Postsaver
on 09-19-2008 4:17 AM

Pingback from  Websites tagged "orm" on Postsaver

Recent Faves Tagged With "html" : MyNetFaves wrote Recent Faves Tagged With "html" : MyNetFaves
on 02-20-2009 9:35 PM

Pingback from  Recent Faves Tagged With "html" : MyNetFaves

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)