Techniques for building HTML in code

Question

An html template is compiled into the application as a resource. A fragment of the HTML template looks like:

<A href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR>
%CAPTIONTEXT%

i like it like this because the larger resource HTML file contains styling, no-quirks mode, etc.

But as is always the case, they now want the option that the Anchor tag should be omitted if there is no link. Also if there is no caption, then the BR tag should be omitted.

Considered Technique Nº1

Given that i don't want to have to build entire HTML fragments in C# code, i considered something like:

%ANCHORSTARTTAGPREFIX%<A href="%PANELLINK%" target="_blank">%ANCHORSTARTTAGPOSTFIX%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%ANCHORENDTAGPREFIX%</A>%ANCHORENDTAGPOSTFIX%CAPTIONPREFIX%<BR>
%CAPTIONTEXT%%CAPTIONPOSTFIX%

with the idea that i could use the pre and postfixes to turn the HTML code into:

<!--<A href="%PANELLINK%" target="_blank">-->
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
<!--</A>--><!--<BR>
%CAPTIONTEXT%-->

But that is just rediculous, plus one answerer reminds us that it wastes bandwith, and can be buggy.

Considered Technique Nº2

Wholesale replacement of tags:

%AnchorStartTag%
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
%AnchorEndTag%%CaptionStuff%

and doing a find-replace to change

%AnchorStartTag%

with

"<A href=\"foo\" target=\"blank\""

Considered Technique Nº3

i considered giving an ID to the important HTML elements:

<A id="anchor" href="%PANELLINK%" target="_blank">
   <IMG border="0" src="%PANELIMAGE%" style="%IMAGESTYLE%">
</A><BR id="captionBreak">
%CAPTIONTEXT%

and then using an HTML DOM parser to programatically delete nodes. But there is no easy access to a trustworthy HTML DOM parser. If the HTML was instead xhtml i would use various built-in/nativly available xml DOM parsers.

Considered Technique Nº4

What i actually have so far is:

private const String htmlEmptyTemplate = 
    @"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN\"""+Environment.NewLine+
    @"   ""http://www.w3.org/TR/html4/strict.dtd"">"+Environment.NewLine+
    @"<HTML>"+Environment.NewLine+
    @"<HEAD>"+Environment.NewLine+
    @"  <TITLE>New Document</TITLE>"+Environment.NewLine+
    @"  <META http-equiv=""X-UA-Compatible"" content=""IE=edge"">"""+Environment.NewLine+
    @"  <META http-equiv=""Content-Type"" content=""text/html; charset=UTF-8"">"+Environment.NewLine+
    @"</HEAD>"+Environment.NewLine+
    @""+Environment.NewLine+
    @"<BODY style=""margin: 0 auto"">"+Environment.NewLine+
    @"  <DIV style=""text-align:center;"">"+Environment.NewLine+
    @"      %ContentArea%"+Environment.NewLine+
    @"  </DIV>" + Environment.NewLine +
    @"</BODY>" + Environment.NewLine +
    @"</HTML>";

private const String htmlAnchorStartTag = 
    @"<A href=""%PANELLINK%"" target=""_blank"">";

//Image is forbidden from having end tag
private const String htmlImageTag = 
    @"<IMG border=""0"" src=""%PANELIMAGE%"" style=""%IMAGESTYLE%"">";

private const String htmlCaptionArea =
    @"<BR>%CAPTIONTEXT%";

And i already want to gouge my eyeballs out. Building HTML in code is a nightmare. It's a nightmare to write, a nightmare to debug, and a nightmare to maintain - and it will makes things difficult on the next guy. i'm hoping for another solution - since i am the next guy.

This isn't really language agnostic. The best way depends on the templating engine you're using. — singpolyma, Dec 17 '08 at 20:24
The templating engine i'm using is the language's built-in string find-place. Could be C, C#, C++, Object pascal, javascript, Java, DelphiScript, Chrome — Ian Boyd, Dec 17 '08 at 20:26

score 11 · Answer 1 · answered Dec 17 '08 at 20:48

11

My reputation points in this game already being low gives me the freedom to tell you quite plainly that you, sir or madame, are in serious need of XSLT. Failing this (and you probably will) you need to look at XML literals in VB.NET (which provides you with the template-based solution you are looking for...). Since I prefer to stay in C# (even though I was born and raised on VBA), I use XSLT.

Both of my unwelcome recommendations require the use of XHTML instead of HTML. This requirement alone is quite a turn off to many traditional developers. I can already see through your use of capital letters for HTML elements that you will find my remarks utterly useless. So I should stop writing now.

answered Dec 17 '08 at 20:48

rasx

4,947
2
40
58

i'll use an xml-based solution as soon as the situtation starts using xhtml – Ian Boyd Dec 17 '08 at 20:50
XHTML is no requirement at all. See my solution. – Tomalak Dec 17 '08 at 21:07
you'll get +1 for XSLT and I'd give you another for the humour if I could – annakata Dec 17 '08 at 21:09
+1 for XSLT, one of the most appropriate tools for the job IMHO – seanb Dec 17 '08 at 21:16
You have +1 from me for the humour :). I am complementing the point by annakata, Of course, XSLT is the most powerful, natural and appropriate tool for generation of HTML. – Dimitre Novatchev Dec 20 '08 at 04:10
Yes guys I look forward to Microsoft supporting XSLT 2.0! – rasx Jan 07 '09 at 19:46

score 2 · Accepted Answer · answered Dec 17 '08 at 21:06

What about this: Store XML as your fragment:

<fragment type="link_img_caption">
  <link href="%PANELLINK%" />
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" />
  <caption text="%CAPTIONTEXT%" />
</fragment>

Pull it out, replace the placeholders with the "real" strings (that you have carefully XML-escaped of course),

...and use a simple XML transformation to produce HTML output:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="4.0" encoding="iso-8859-1" indent="yes"/>

  <xsl:template match="/">
    <xsl:apply-templates select="fragment" />
  </xsl:template>

  <xsl:template match="fragment[@type = 'link_img_caption']">
    <xsl:choose>
      <xsl:when test="link[@href != '']">
        <a href="{link/@href}" target="_blank">
          <img src="{img/@src}" style="{img/@style}" border="0" />
        </a>
      </xsl:when>
      <xsl:otherwise>
        <img src="{img/@src}" style="{img/@style}" border="0" />
      </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="caption[@text !='']">
      <br />
      <xsl:value-of select="caption/@text" />
    </xsl:if>
  </xsl:template>

</xsl:stylesheet>

Other fragment types could be added because of the type attribute. There is much room to improve this, so look at it as an example of how it could be done.

Output:

<a href="%PANELLINK%" target="_blank">
  <img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
</a>
<br>
%CAPTIONTEXT%

and, if the link href is empty in the XML:

<img src="%PANELIMAGE%" style="%IMAGESTYLE%" border="0">
<br>
%CAPTIONTEXT%

This seems like something that would work, although a) xslt isn't very friendly for web-developer to write b) i assume it would take me two or three days to adapt it to my situation c) can xslt output full html, including a doctype? — Ian Boyd, Dec 17 '08 at 21:33
Because although i am familiar with xslt, i am not familiar to the extent to understand anything that you wrote - and the half-hour change is now on hour three. — Ian Boyd, Dec 17 '08 at 21:34
You sounded like in need for a general solution, and this is as general as it gets for this task. Depending on your codebase, this will take it's time to implement, even more so since you seem to be relatively new to XSLT. Oh and yes, XSLT can output doctypes as well, if you tell it to do so. — Tomalak, Dec 17 '08 at 21:45
Although i will not use this in this case - because i don't have the time to learn all of XSLT, it probably is a good solution in general. — Ian Boyd, Dec 19 '08 at 16:56

score 2 · Answer 3 · edited May 23 '17 at 10:27

2

Use a templating engine, like one of these.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 17 '08 at 23:12

Mauricio Scheffer

96,120
20
187
273

score 0 · Answer 4 · answered Dec 17 '08 at 20:48

1.) Don't use comments, you'll send useless data to the browser wasting bandwidth and encountering BUGs in IE.

2.) Would this not be better as some sort of method? (I'm not familiar with C#) but something like this makes more sense to me.

//using PHP in this example
function HTMLImage($imageData, $linkData){
  var str = '';
  //if there is link data, start <a> tag
  $str .= '<a '.{expand any attributes}.'>';

  //add image tag and attributes from $imageData
  $str .= '<img '.{expand any attributes}.'/>';

  //if there is link data, close <a> tag
  $str .= '</a>';
  return $str;
}

i just updated my original question, i do have something like that - and something like that is what i'm trying desperately to avoid. — Ian Boyd, Dec 17 '08 at 20:54

Brad Gilbert · Answer 5 · 2008-12-24T20:46:59.740

I would use Template Toolkit, unfortunately it is currently only implemented in Perl and Python.

`test.pl`:

use Template;

my $template = Template->new({
  VARIABLES => {
    ImageStyle  => "default",
    CaptionText => "Place Caption Here"
  },
});

$template->process( 'test.tt', {
    panel => {
      link  => "http://Stackoverflow.com/",
      image => "/Content/Img/stackoverflow-logo-250.png",
      alt   => "logo link to homepage"
    }
} );

`test.tt`:


[% IF panel.link -%]
<A href="[% panel.link %]" alt="[% panel.alt %]" target="_blank">
[%- END -%]

[%- IF panel.image -%]
   <IMG border="0" src="[% panel.image %]" style="[% ImageStyle %]">
[%- END -%]

[%- IF panel.link %]</A>[% END %]<BR>
[% CaptionText %]

Outputs:

<A href="http://Stackoverflow.com/" alt="logo link to homepage" target="_blank">
   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
</A><BR>
Place Caption Here

If the variable panel.link isn't defined it skips the anchor tags.

   <IMG border="0" src="/Content/Img/stackoverflow-logo-250.png" style="default">
<BR>
Place Caption Here

I can't get this to highlight the way I want. – Brad Gilbert Dec 24 '08 at 21:00 — Brad Gilbert, Dec 24 '08 at 21:00

Stephan Eggermont · Answer 6 · 2009-04-15T08:51:44.180

0

Templates are a serious code smell. Take a look at how Seaside generates html.

[Edit] Another one where someone without a clue downvoted.

edited Apr 15 '09 at 08:51

answered Dec 24 '08 at 21:20

Stephan Eggermont

15,354
1
33
64

Well, your answer is a bit short, you might want to detail that it's a DSL, a builder pattern, that refactorings works on it, etc :) – Damien Pollet Apr 25 '09 at 20:07