Write HTML to string

Question

I have code like this. Is there a way to make it easier to write and maintain? Using C# .NET 3.5.

string header(string title)
{
    StringWriter s = new StringWriter();
    s.WriteLine("{0}","<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">");
    s.WriteLine("{0}", "<html>");
    s.WriteLine("<title>{0}</title>", title);
    s.WriteLine("{0}","<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">");
    s.WriteLine("{0}", "</head>");
    s.WriteLine("{0}", "<body>");
    s.WriteLine("{0}", "");
}

I could also just write:

s.WriteLine("{0}", @"blah blah

many
new
lines
blah UHY#$&_#$_*@Y KSDSD<>\t\t\t\t\t\tt\t\t\\\t\t\t\t\\\h\th'\h't\th
hi
done");

It will work, but I need to replace all " with "".

It's good that you relize this is a bad way to make an html file using a program. — Kredns, Jun 17 '09 at 02:26
duplicate: http://stackoverflow.com/questions/937201 http://stackoverflow.com/questions/897226 http://stackoverflow.com/questions/340095 http://stackoverflow.com/questions/346449 — Mauricio Scheffer, Jun 17 '09 at 03:32
why use the `{0}` at all? Except for the title, you don't need it. You can just put your string as the first argument and don't use a second argument. — Joel Coehoorn, Nov 01 '17 at 01:16

score 91 · Answer 1 · edited Sep 19 '18 at 13:38

You're probably better off using an HtmlTextWriter or an XMLWriter than a plain StringWriter. They will take care of escaping for you, as well as making sure the document is well-formed.

This page shows the basics of using the HtmlTextWriter class, the gist of which being:

StringWriter stringWriter = new StringWriter();

using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
    writer.AddAttribute(HtmlTextWriterAttribute.Class, classValue);
    writer.RenderBeginTag(HtmlTextWriterTag.Div); // Begin #1

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

    writer.AddAttribute(HtmlTextWriterAttribute.Src, imageValue);
    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(word);

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

score 25 · Answer 2 · edited Jun 17 '09 at 02:31

25

When I deal with this problem in other languages I go for a separation of code and HTML. Something like:

1.) Create a HTML template. use [varname] placeholders to mark replaced/inserted content.
2.) Fill your template variables from an array or structure/mapping/dictionary

Write( FillTemplate(myHTMLTemplate, myVariables) ) # pseudo-code

edited Jun 17 '09 at 02:31

lc.

113,939
20
158
187

answered Jun 17 '09 at 02:25

SpliFF

38,186
16
91
120

can i get a link to an example of how to make a HTML template? in whatever language? (i can deal with non C# is its .NET) – Jun 17 '09 at 02:44
There are existing template engines that may help make this easier. See wikipedia for a list: http://en.wikipedia.org/wiki/Template_engine_(web) – iammichael Jun 17 '09 at 02:59
The Parser class in here is simple/easy to use: http://www.codeproject.com/KB/dotnet/mailtemplates.aspx – russau Jun 17 '09 at 03:15
@SpliFF - can you use the same [varname] more than once in the template for multiple places of the same information ? – Kraang Prime May 03 '15 at 19:02

score 16 · Answer 3 · answered Jan 09 '15 at 20:48

Use an XDocument to create the DOM, then write it out using an XmlWriter. This will give you a wonderfully concise and readable notation as well as nicely formatted output.

Take this sample program:

using System.Xml;
using System.Xml.Linq;

class Program {
    static void Main() {
        var xDocument = new XDocument(
            new XDocumentType("html", null, null, null),
            new XElement("html",
                new XElement("head"),
                new XElement("body",
                    new XElement("p",
                        "This paragraph contains ", new XElement("b", "bold"), " text."
                    ),
                    new XElement("p",
                        "This paragraph has just plain text."
                    )
                )
            )
        );

        var settings = new XmlWriterSettings {
            OmitXmlDeclaration = true, Indent = true, IndentChars = "\t"
        };
        using (var writer = XmlWriter.Create(@"C:\Users\wolf\Desktop\test.html", settings)) {
            xDocument.WriteTo(writer);
        }
    }
}

This generates the following output:

<!DOCTYPE html >
<html>
    <head />
    <body>
        <p>This paragraph contains <b>bold</b> text.</p>
        <p>This paragraph has just plain text.</p>
    </body>
</html>

I love this option. Have you come across a way to add attributes inline with this format? — Eric Carlson, Apr 20 '15 at 12:52

Jim Wallace · Answer 4 · 2009-06-17T13:42:10.430

I know you asked about C#, but if you're willing to use any .Net language then I highly recommend Visual Basic for this exact problem. Visual Basic has a feature called XML Literals that will allow you to write code like this.

Module Module1

    Sub Main()

        Dim myTitle = "Hello HTML"
        Dim myHTML = <html>
                         <head>
                             <title><%= myTitle %></title>
                         </head>
                         <body>
                             <h1>Welcome</h1>
                             <table>
                                 <tr><th>ID</th><th>Name</th></tr>
                                 <tr><td>1</td><td>CouldBeAVariable</td></tr>
                             </table>
                         </body>
                     </html>

        Console.WriteLine(myHTML)
    End Sub

End Module

This allows you to write straight HTML with expression holes in the old ASP style and makes your code super readable. Unfortunately this feature is not in C#, but you could write a single module in VB and add it as a reference to your C# project.

Writing in Visual Studio also allows proper indentation for most XML Literals and expression wholes. Indentation for the expression holes is better in VS2010.

This is a really awesome feature of VB. I created a gist that converts any DataTable into an HTML table tag in a generic manner: https://gist.github.com/sergkr/13d57dca75b385f0a359 — Lukas S., May 30 '14 at 17:47

score 7 · Answer 5 · answered Jun 17 '09 at 02:26

7

return string.Format(@"<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN""      ""http://www.w3.org/TR/html4/strict.dtd"">
<html>
<title>{0}</title>
<link rel=""stylesheet"" type=""text/css"" href=""style.css"">
</head>
<body>
", title);

answered Jun 17 '09 at 02:26

Jimmy

89,068
17
119
137

2

Depending on where title came from, you probably want to HTML-encode title before blindly inserting it into a string. – Jacob Jun 17 '09 at 02:31
Back when I used such a clumsy method I would separate each line by adding an `Environment.NewLine` between html lines where I wanted to keep the breaks. – ProfK Dec 11 '17 at 11:49

score 7 · Answer 6 · edited Jan 11 '16 at 22:57

7

You could use System.Xml.Linq objects. They were totally redesigned from the old System.Xml days which made constructing XML from scratch really annoying.

Other than the doctype I guess, you could easily do something like:

var html = new XElement("html",
    new XElement("head",
        new XElement("title", "My Page")
    ),
    new XElement("body",
        "this is some text"
    )
);

edited Jan 11 '16 at 22:57

Paul Roub

36,322
27
84
93

answered Jun 17 '09 at 03:00

Josh

68,005
14
144
156

1

This is great, you can also use `new XElement("div", new XAttribute("class", "container"))` for creating attributes for anyone wondering. – Garth Jul 27 '18 at 12:37

score 5 · Answer 7 · answered Jun 17 '09 at 02:37

5

The most straight forward way is to use an XmlWriter object. This can be used to produce valid HTML and will take care of all of the nasty escape sequences for you.

http://msdn.microsoft.com/en-us/library/system.xml.xmlwriter.aspx

answered Jun 17 '09 at 02:37

JaredPar

733,204
149
1,241
1,454

score 5 · Answer 8 · answered Feb 17 '14 at 09:07

5

You can use T4 Templates for generating Html (or any) from your code. see this: http://msdn.microsoft.com/en-us/library/ee844259.aspx

answered Feb 17 '14 at 09:07

oleg wx

286
5
9

2

This is a really cool method. You would probably have gotten more votes if you had included more detail. – Eric Carlson Apr 20 '15 at 12:56
This. Note that T4 can be run both at compile time and at runtime. – Ohad Schneider Mar 07 '16 at 17:28

Jacob · Answer 9 · 2009-06-17T05:07:14.157

3

You can use ASP.NET to generate your HTML outside the context of web pages. Here's an article that shows how it can be done.

edited Jun 17 '09 at 05:07

answered Jun 17 '09 at 02:30

Jacob

77,566
24
149
228

1

It could be used to generate an HTML email or something else that isn't a website. Also, this isn't an answer. – llamaoo7 Jun 17 '09 at 02:34
2

You can use ASP.NET to output HTML outside the context of a web site. – Jacob Jun 17 '09 at 02:40
I wouldnt go as far as downvoting this, as its a valid question, but it shoud have been a comment to the OP instead of an aswer – Neil N Jun 17 '09 at 02:44
2

Jacob is correct... you can use the ASP.NET rendering engine... though there is obviously more to it than just saying you can use it. – Bryan Sebastian Jun 17 '09 at 02:45
i didnt up or down vote this but how would i use the rendering engine? link to a page of any example would be fine. – Jun 17 '09 at 02:47

score 3 · Answer 10 · answered Jun 17 '09 at 03:17

3

If you're looking to create an HTML document similar to how you would create an XML document in C#, you could try Microsoft's open source library, the Html Agility Pack.

It provides an HtmlDocument object that has a very similar API to the System.Xml.XmlDocument class.

answered Jun 17 '09 at 03:17

Dan Herbert

99,428
48
189
219

1

Html Agility Pack was not written by Microsoft. – Mauricio Scheffer Jun 17 '09 at 03:28
1

It probably wasn't officially sponsored by Microsoft, but at the very least it was written by a Microsoft employee, or at least someone with an @microsoft.com email address... – Dan Herbert Jun 17 '09 at 11:47
4

Yup, it was written by Simon Mourier who at that time was working at Microsoft... I wouldn't call it "Microsoft's open source library" though. – Mauricio Scheffer Jun 18 '09 at 17:16

score 3 · Answer 11 · answered Dec 12 '17 at 19:23

With the introduction of Razor in ASP.net MVC, the best way to write HTML in C# is with the Razor Engine.

string templatePath = $@"{Directory.GetCurrentDirectory()}\EmailTemplates"; 

IRazorLightEngine engine = EngineFactory.CreatePhysical(templatePath); 

var model = new Notification 
{ 
       Name = "Jone", 
       Title = "Test Email", 
       Content = "This is a test" 
}; 

string result = engine.Parse("template.cshtml", model);

Template:

<h2>Dear @Model.Name, you have a notification.</h2> 

<h1>@Model.Title</h1> 
<p>@Model.Content</p> 

<p>Date:@DateTime.Now</p>

For a complete sample, see here

This is the right answer. Although i would recommend using the latest version of the package in the example. — Leonardo Wildt, Aug 24 '18 at 14:34

Sergey Shandar · Answer 12 · 2011-02-19T00:15:23.087

You could use some third party open-source libraries to generated strong typed verified (X)HTML, such as CityLizard Framework or Sharp DOM.

Update For example

html
    [head
        [title["Title of the page"]]
        [meta_(
            content: "text/html;charset=UTF-8",
            http_equiv: "Content-Type")
        ]
        [link_(href: "css/style.css", rel: "stylesheet", type: "text/css")]
        [script_(type: "text/javascript", src: "/JavaScript/jquery-1.4.2.min.js")]
    ]
    [body
        [div
            [h1["Test Form to Test"]]
            [form_(action: "post", id: "Form1")
                [div
                    [label["Parameter"]]
                    [input_(type: "text", value: "Enter value")]
                    [input_(type: "submit", value: "Submit!")]
                ]
            ]
            [div
                [p["Textual description of the footer"]]
                [a_(href: "http://google.com/")
                    [span["You can find us here"]]
                ]
                [div["Another nested container"]]
            ]
        ]
    ];

score 1 · Answer 13 · answered Jun 17 '09 at 03:37

This is not a generic solution, however, if your pupose is to have or maintain email templates then System.Web has a built-in class called MailDefinition. This class is used by the ASP.NET membership controls to create HTML emails.

Does the same kind of 'string replace' things as mentioned above, but packs it all into a MailMessage for you.

Here is an example from MSDN:

ListDictionary replacements = new ListDictionary();
replacements.Add("<%To%>",sourceTo.Text);
replacements.Add("<%From%>", md.From);
System.Net.Mail.MailMessage fileMsg;
fileMsg = md.CreateMailMessage(toAddresses, replacements, emailTemplate, this); 
return fileMsg;

score 0 · Answer 14 · answered Jun 17 '09 at 02:46

You could write your own classes with its Render method, and another attributes, to avoid a great mess if you use it a lot, and then use the HTMLWriter or the xmlwriter as well. This logic is used in the asp.net pages, you can inherit from webControl and override the render method, wich is great if you are developing server-side controls.
This could be a good example.

Regards

score 0 · Answer 15 · answered Jun 17 '09 at 02:52

It really depends what you are going for, and specifically, what kind of performance you really need to offer.

I've seen admirable solutions for strongly-typed HTML development (complete control models, be it ASP.NET Web Controls, or similar to it) that just add amazing complexity to a project. In other situations, it is perfect.

In order of preference in the C# world,

ASP.NET Web Controls
ASP.NET primitives and HTML controls
XmlWriter and/or HtmlWriter
If doing Silverlight development with HTML interoperability, consider something strongly typed like link text
StringBuilder and other super primitives

score 0 · Answer 16 · answered Jun 20 '16 at 04:54

HSharp is a library used to analyse markup language like HTML easily and fastly. Install: PM> Install-Package Obisoft.HSharp

        var Document = new HDoc(DocumentOptions.BasicHTML);
        Document["html"]["body"].AddChild("div");
        Document["html"]["body"]["div"].AddChild("a", new HProp("href", "/#"));
        Document["html"]["body"]["div"].AddChild("table");
        Document["html"]["body"]["div"]["table"].AddChildren(
         new HTag("tr"),
         new HTag("tr", "SomeText"),
         new HTag("tr", new HTag("td")));
        var Result = Document.GenerateHTML();
        Console.WriteLine(Result);

and output:

<html>
<head>
<meta charset="utf-8"></meta><title>
Example </title>
</head>
<body>
<div>
<a href="/#"></a><table>
<tr></tr><tr>
SomeText </tr>
<tr>
<td></td></tr>
</table>
</div>
</body>
</html>

score 0 · Answer 17 · answered Dec 02 '19 at 15:14

I was looking for something that looked like jquery for generating dom in C# (I don't need to parse). Unfortunately no luck in finding a lightweight solution so I created this simple class that is inherited from System.Xml.Linq.XElement. The key feature is that you can chain the operator like when using jquery in javascript so it's more fluent. It's not fully featured but it does what I need and if there is interest I can start a git.

public class DomElement : XElement
{
    public DomElement(string name) : base(name)
    {
    }

    public DomElement(string name, string value) : base(name, value)
    {
    }

    public DomElement Css(string style, string value)
    {
        style = style.Trim();
        value = value.Trim();
        var existingStyles = new Dictionary<string, string>();
        var xstyle = this.Attribute("style");
        if (xstyle != null)
        {
            foreach (var s in xstyle.Value.Split(';'))
            {
                var keyValue = s.Split(':');
                existingStyles.Add(keyValue[0], keyValue.Length < 2 ? null : keyValue[1]);
            }
        }

        if (existingStyles.ContainsKey(style))
        {
            existingStyles[style] = value;
        }
        else
        {
            existingStyles.Add(style, value);
        }

        var styleString = string.Join(";", existingStyles.Select(s => $"{s.Key}:{s.Value}"));
        this.SetAttributeValue("style", styleString);

        return this;
    }

    public DomElement AddClass(string cssClass)
    {
        var existingClasses = new List<string>();
        var xclass = this.Attribute("class");
        if (xclass != null)
        {
            existingClasses.AddRange(xclass.Value.Split());
        }

        var addNewClasses = cssClass.Split().Where(e => !existingClasses.Contains(e));
        existingClasses.AddRange(addNewClasses);

        this.SetAttributeValue("class", string.Join(" ", existingClasses));
        return this;
    }

    public DomElement Text(string text)
    {
        this.Value = text;
        return this;
    }

    public DomElement Append(string text)
    {
        this.Add(text);
        return this;
    }

    public DomElement Append(DomElement child)
    {
        this.Add(child);
        return this;
    }
}

Sample:

void Main()
{
    var html = new DomElement("html")
        .Append(new DomElement("head"))
        .Append(new DomElement("body")
            .Append(new DomElement("p")
                .Append("This paragraph contains")
                .Append(new DomElement("b", "bold"))
                .Append(" text.")
                )
            .Append(new DomElement("p").Text("This paragraph has just plain text"))
            )
        ;

    html.ToString().Dump();

    var table = new DomElement("table").AddClass("table table-sm").AddClass("table-striped")
            .Append(new DomElement("thead")
                .Append(new DomElement("tr")
                    .Append(new DomElement("td").Css("padding-left", "15px").Css("color", "red").Css("color", "blue")
                        .AddClass("from-now")
                        .Append(new DomElement("div").Text("Hi there"))
                        .Append(new DomElement("div").Text("Hey there"))
                        .Append(new DomElement("div", "Yo there"))
                        )
                )
            )
        ;
    table.ToString().Dump();
}

output from above code:

<html>
  <head />
  <body>
    <p>This paragraph contains<b>bold</b> text.</p>
    <p>This paragraph has just plain text</p>
  </body>
</html>
<table class="table table-sm table-striped">
  <thead>
    <tr>
      <td style="padding-left:15px;color:blue" class="from-now">
        <div>Hi there</div>
        <div>Hey there</div>
        <div>Yo there</div>
      </td>
    </tr>
  </thead>
</table>

score 0 · Answer 18 · answered Nov 26 '11 at 08:16

I wrote these classes which served me well. It's simple yet pragmatic.

public class HtmlAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }

    public HtmlAttribute(string name) : this(name, null) { }

    public HtmlAttribute(
        string name,
        string @value)
    {
        this.Name = name;
        this.Value = @value;
    }

    public override string ToString()
    {
        if (string.IsNullOrEmpty(this.Value))
            return this.Name;

        if (this.Value.Contains('"'))
            return string.Format("{0}='{1}'", this.Name, this.Value);

        return string.Format("{0}=\"{1}\"", this.Name, this.Value);
    }
}

public class HtmlElement
{
    protected List<HtmlAttribute> Attributes { get; set; }
    protected List<object> Childs { get; set; }
    public string Name { get; set; }
    protected HtmlElement Parent { get; set; }

    public HtmlElement() : this(null) { }

    public HtmlElement(string name, params object[] childs)
    {
        this.Name = name;
        this.Attributes = new List<HtmlAttribute>();
        this.Childs = new List<object>();

        if (childs != null && childs.Length > 0)
        {
            foreach (var c in childs)
            {
                Add(c);
            }
        }
    }

    public void Add(object o)
    {
        var a = o as HtmlAttribute;
        if (a != null)
            this.Attributes.Add(a);
        else
        {
            var h = o as HtmlElement;
            if (h != null && !string.IsNullOrEmpty(this.Name))
            {
                h.Parent = this;
                this.Childs.Add(h);
            }
            else
                this.Childs.Add(o);
        }
    }

    public override string ToString()
    {
        var result = new StringBuilder();

        if (!string.IsNullOrEmpty(this.Name))
        {
            result.Append(string.Format("<{0}", this.Name));
            if (this.Attributes.Count > 0)
            {
                result.Append(" ");
                foreach (var attr in this.Attributes)
                {
                    result.Append(attr.ToString());
                    result.Append(" ");
                }

                result = new StringBuilder(result.ToString().TrimEnd(' '));
            }

            if (this.Childs.Count == 0)
            {
                result.Append(" />");
            }
            else
            {
                result.AppendLine(">");

                foreach (var c in this.Childs)
                {
                    var cParts = c.ToString().Split('\n');

                    foreach (var p in cParts)
                    {
                        result.AppendLine(string.Format("{0}", p));
                    }
                }

                result.Append(string.Format("</{0}>", this.Name));
            }
        }
        else
        {
            foreach (var c in this.Childs)
            {
                var cParts = c.ToString().Split('\n');

                foreach (var p in cParts)
                {
                    result.AppendLine(string.Format("{0}", p));
                }
            }
        }

        var head = GetHeading(this);

        var ps = result.ToString().Split('\n');
        return string.Join("\r\n", (from p in ps select head + p.TrimEnd('\r')).ToArray());
    }

    string GetHeading(HtmlElement h)
    {
        if (h.Parent != null)
            return "    ";
        else
            return string.Empty;
    }
}

Write HTML to string

18 Answers18

Linked