Generating HTML structure string in C#
Clean and proper way to generate html string in C#
String hardcoding it the worst way to generate your HTML. It makes code non-maintainable and hard to read.
Lately in June I wrote an article how to generate HTML string without hard coding the string and using concatenation or string format. This article describes how to generate HTML with WebForms controls. I realized it is a lot better to use XElement as it is a lot easier to generate HTML with chaining syntax in LINQ style.
In the next example I will generate the same HTML structure as it is in article /aspnet/2014/june/generating-html-string-in-c/
Generated HTML looks like the following:
<div data-description="some custom value"> div text content <input type="number" id="txtNumber" name="txtNumber"></input> </div>
Now we are going to create this HTML structure with XElement class and LINQ to XML
new XElement("div", new XAttribute("data-description", "some custom value"), new XElement("input", new XAttribute("type", "text"), new XAttribute("id", "txtNumber"), new XAttribute("name","txtNumber"))).ToString();
For the sake of comparison I created a test console app and implemented both approaches as two separate methods
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Xml.Linq; namespace ConsoleTest1 { class Program { static void Main(string[] args) { Console.WriteLine(ControlsMethod()); Console.WriteLine("------------------------------------------"); Console.WriteLine(XElementMethod()); Console.ReadLine(); } public static string XElementMethod() { return new XElement("div", new XAttribute("data-description", "some custom value"), new XElement("input", new XAttribute("type", "text"), new XAttribute("id", "txtNumber"), new XAttribute("name","txtNumber"))).ToString(); } private static string ControlsMethod() { StringBuilder sbControlHtml = new StringBuilder(); using (StringWriter stringWriter = new StringWriter()) { using (HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter)) { //Generate container div control HtmlGenericControl divControl = new HtmlGenericControl("div"); divControl.Attributes.Add("data-description", "some custom value"); divControl.InnerText = "div text content"; //Generate HTML5 number input control HtmlGenericControl numberControl = new HtmlGenericControl("input"); numberControl.Attributes.Add("type", "number"); numberControl.Attributes.Add("id", "txtNumber"); numberControl.Attributes.Add("name", "txtNumber"); //Add number input to container div divControl.Controls.Add(numberControl); //Generate HTML string and dispose object divControl.RenderControl(htmlWriter); sbControlHtml.Append(stringWriter.ToString()); divControl.Dispose(); } return sbControlHtml.ToString(); } } } }
As you can see the code is much lighter and it is indeed a lot easier and faster to build an HTML output with XElement and LINQ to XML than any other method especially comparing to string hardcoding which is wrong in every way.
As you can see from the output of both methods, XElement (second one) generated well formated code with even self closing tags which is one more advence over shorter and simplier code.
Disclaimer
Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.
Comments for this article