Transforming XML to HTML using LINQ to XML

XML to HTML

In the post Create xml file in C# .net, we got to know about how to create XML file in C#. As mentioned in the previous post, XML helps creating our own tags and it focuses on what data is rather than how data looks. But... many a times it is important how data looks, to get the better look and feel. Thus need arises to convert the XML data into HTML format.

In this post we will convert XML file that we created previously into HTML format.

NOTE: For readers/viewers who are directly reading this post it is recommended to first go through Create xml file in C# .net

The XML file being the same, our HTML structure will be like this:

<?xml version="1.0" encoding="utf-8"?>

<table border="1">

<thead>

<tr>

<th>Id</th>

<th>Name</th>

<th>Gender</th>

<th>TotalMarks</th>

</tr>

</thead>

<tbody>

<tr>

<td>101</td>

<td>Mark</td>

<td>Male</td>

<td>800</td>

</tr>

<tr>

<td>102</td>

<td>Ally</td>

<td>Female</td>

<td>900</td>

</tr>

<tr>

<td>103</td>

<td>Pam</td>

<td>Female</td>

<td>750</td>

</tr>

</tbody>

</table>

Step 1: Create the HTML structure as above using the XDocument, XElement, XAttribute classes. We will create a table element with an attribute as border whose value will be 1. i.e., a table element with border=1 as <table border="1">

So the code is XDocument result = new XDocument(

new XElement("table", new XAttribute("border", 1),

Step 2: After creating the table element with its border attribute, we will now create thead element along with tr and th elements as

<thead>

<tr>

<th>Id</th>

<th>Name</th>

<th>Gender</th>

<th>TotalMarks</th>

</tr>

</thead>

Step 3: So under table element that we have created above in step 2, we will now create another HTML element as <thead> using XElement class as

new XElement("thead",

Step 4: Now we will create a single row as our header for each column. Using the XElement class again, create <tr> element as new XElement("tr",.

Since, we want to create Columns for Id, Name, Gender and TotalMarks we will now have to create four &ly;th> HTML element using the XElement class.

new XElement("th", "Id"),

new XElement("th", "Name"),

new XElement("th", "Gender"),

new XElement("th", "TotalMarks"))),

new XElement("tbody",

Step 5: After creating columns, its now time to load the data from our XML file. So we will create <tbody> HTML element within which we will load the data from XML file using LINQ. For this, we will use XDocument.Load() method that accepts a string as uri i.e., the absolute path of the XML file that needs to be loaded.

new XElement("tbody",

from student in XDocument.Load("E:\\DummyTest\\CreateHtmlFromXml\\CreateHtmlFromXml\\Students.xml").Descendants("Student")

Step 6: Now, after creating <tbody> element, we will create a new row for each student record from XML file. We need to create new <tr> HTML element for each single record of student and we have to create four <td> HTML element for displaying the values of XML elements which are Id, Name, Gender, and TotalMarks.

from student in XDocument.Load("E:\\DummyTest\\CreateHtmlFromXml\\CreateHtmlFromXml\\Students.xml").Descendants("Student")

select new XElement("tr",

new XElement("td", student.Attribute("Id").Value),

new XElement("td", student.Element("Name").Value),

new XElement("td", student.Element("Gender").Value),

new XElement("td", student.Element("TotalMarks").Value)))));

The above code will display the values of each XML element in <td> HTML element.

Step 7: Now that we have successfully created our HTML structure from the XML file, its time to save our result document created in Step 1 in to HTML format at the desired location. We will use Save() method of the result object of type XDocument class.

result.Save("E:\\DummyTest\\CreateHtmlFromXml\\CreateHtmlFromXml\\Result.html");

Step 8: Run the project. HTML File will get successfully created. Opening it will give us the HTML Structure of the XML file as

Result.html

Step 8: Go to the location where we saved the HTML file and run it.

Html Output

The complete code is as under:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Xml.Linq;

namespace CreateHtmlFromXml

{

class Program

{

static void Main(string[] args)

{

XDocument result = new XDocument(

new XElement("table", new XAttribute("border", 1),

new XElement("thead",

new XElement("tr",

new XElement("th", "Id"),

new XElement("th", "Name"),

new XElement("th", "Gender"),

new XElement("th", "TotalMarks"))),

new XElement("tbody",

from student in XDocument.Load("E:\\DummyTest\\CreateHtmlFromXml\\CreateHtmlFromXml\\Students.xml").Descendants("Student")

select new XElement("tr",

new XElement("td", student.Attribute("Id").Value),

new XElement("td", student.Element("Name").Value),

new XElement("td", student.Element("Gender").Value),

new XElement("td", student.Element("TotalMarks").Value)))));

result.Save("E:\\DummyTest\\CreateHtmlFromXml\\CreateHtmlFromXml\\Result.html");

}

}

}

CONCLUSION:

Through this post we now know how to transform XML file into HTML file. Another important point here is we now also know how to read data from XML file. We can also create CSV (Comma Separated Values) file from XML file just by appending a comma as a delimeter after reading each element from the XML file.

FEEDBACK:

As a developer, we should try every sort of stuff that can make our work easier. You as a developer will definitely try creating CSV file from XML file. If you, please do let me know about it in the comment section. If you find any mistakes please do provide your valuable feedback. It definitely counts a lot. Thanks :) and All the Best!0000