Display XML Data As HTML Using XSLT In ASP.NET MVC

Introduction

I got a requirement to display XML data in a style/design format. If we browse an XML file directly, then it displays the XML nodes with the data in browser. So, XSLT helps us to display XML data in a design/specific format. Here, we will discuss how XSLT can be implemented in ASP.NET MVC.

Using Code

First, we design XML and XSLT. XML file contains data and XSLT file contains how XML data will display in HTML design. Next, we create custom HTML helper to call the method which transforms XML data with XSLT content and generates HTML content.

XML

The following XML content will we use in our example. It contains countries with no. of medals won in Rio 2016 Olympic.

<?xml version="1.0" encoding="utf-8" ?>
<RioMedals>
<Country Name="America" Gold="43" Silver="37" Bronze="36"></Country>
<Country Name="GreatBritain" Gold="27" Silver="22" Bronze="17"></Country>
<Country Name="China" Gold="26" Silver="18" Bronze="26"></Country>
<Country Name="Russia" Gold="17" Silver="17" Bronze="19"></Country>
<Country Name="India" Gold="1" Silver="1" Bronze="1"></Country>
</RioMedals>

XSLT

The Extensible Stylesheet Language Transformation (XSLT) language is for transforming XML documents into XHTML documents or to other XML documents. Data transformation means parsing an input XML document into a tree of nodes and then converting the source tree into a result tree. Transformation is about data exchange. More on XSLT, visit here.

In below XSLT code, it creates a table and it searches country in XML content; then display name, no of medals in Gold, Silver, Bronze in rows based on countries.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:template match="/*">
<table cellpadding="0" cellspacing="0" border="1">
<tr style="color: green;">
<th>Country</th>
<th>Gold</th>
<th>Silver</th>
<th>Bronze</th>
</tr>
<xsl:for-each select="Country">
<tr style="text-align: center;">
<td>
<xsl:value-of select="@Name"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Gold"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Silver"></xsl:value-of>
</td>
<td>
<xsl:value-of select="@Bronze"></xsl:value-of>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

Controller

In Controller(HomeController.cs), add Index() as an action. It retrieves contents from XML file and bind to ViewBag object.

public ActionResult Index()
{
string medalsXML = System.IO.File.ReadAllText(Server.MapPath("Data/Medals.xml"));
ViewBag.Medals = medalsXML;
return View();
}

View

We need to create custom HTML helper to view the XML content as HTML. Custom helper can be created in two ways:

Step 1: Using extension method HTMLHelper class

Create a static class called CustomHTMLHelper and create a static method RenderXml() which receives two parameters. One is XML content and second one is xslt file path. RenderXml() is an extension method which calls from View and it returns data as HtmlString type.

public static class CustomHTMLHelper
{
/// <summary>
/// Applies an XSL transformation to an XML document
/// </summary>
/// <param name="helper"></param>
/// <param name="xml"></param>
/// <param name="xsltPath"></param>
/// <returns></returns>
public static HtmlString RenderXml(this HtmlHelper helper, string xml, string xsltPath)
{
XsltArgumentList args = new XsltArgumentList();
// Create XslCompiledTransform object to loads and compile XSLT file.
XslCompiledTransform tranformObj = new XslCompiledTransform();
tranformObj.Load(xsltPath);
// Create XMLReaderSetting object to assign DtdProcessing, Validation type
XmlReaderSettings xmlSettings = new XmlReaderSettings();
xmlSettings.DtdProcessing = DtdProcessing.Parse;
xmlSettings.ValidationType = ValidationType.DTD;
// Create XMLReader object to Transform xml value with XSLT setting
using (XmlReader reader = XmlReader.Create(new StringReader(xml), xmlSettings))
{
StringWriter writer = new StringWriter();
tranformObj.Transform(reader, args, writer);
// Generate HTML string from StringWriter
HtmlString htmlString = new HtmlString(writer.ToString());
return htmlString;
}
}
}

Add the below tag to Web.Config namespace section so it will available in all View pages.

<add namespace=”CustomHTMLHelper” />

Now, you can call extension method (RenderXml()) with passing xml content and xslt file path.

@Html.RenderXml(ViewBag.Medals as string, Server.MapPath("Data/Medals.xslt"))

Step 2: Using Static method

Create static class and add static method RenderXMLData() with parameters xml content and xslt file path. The logic is the same as above extension Helper class.

public static HtmlString RenderXMLData(string xml, string xsltPath)
{
XsltArgumentList args = new XsltArgumentList();
// Create XslCompiledTransform object to loads and compile XSLT file.
XslCompiledTransform tranformObj = new XslCompiledTransform();
tranformObj.Load(xsltPath);
// Create XMLReaderSetting object to assign DtdProcessing, Validation type
XmlReaderSettings xmlSettings = new XmlReaderSettings();
xmlSettings.DtdProcessing = DtdProcessing.Parse;
xmlSettings.ValidationType = ValidationType.DTD;
// Create XMLReader object to Transform xml value with XSLT setting
using (XmlReader reader = XmlReader.Create(new StringReader(xml), xmlSettings))
{
StringWriter writer = new StringWriter();
tranformObj.Transform(reader, args, writer);
// Generate HTML string from StringWriter
HtmlString htmlString = new HtmlString(writer.ToString());
return htmlString;
}
}

Add the below tag to Web.Config namespace section as we did before for Extension Method approach.

<add namespace=”CustomHTMLHelper” />

Now, you can call extension method (RenderXMLData()) with passing xml content and xslt file path.

@CustomHTMLHelper.RenderXMLData(ViewBag.Medals as string, Server.MapPath("Data/Medals.xslt"))

After running the application, it shows this image(Figure 1) as output.

Figure 1: Output XML as HTML

Conclusion

In this article, we learned how to render XML data HTML using XSLT. Secondly, we also discussed about creating Custom HTMLHelper in ASP.NET MVC.

Hope it helps.

7 Comments

Join the conversation! Your thoughts help the community grow.

Spencer Sullivan6y ago
An excellent article and tutorial. Thank you for putting this demo together for the rest of us.
Christopher Kuznicki8y ago
In your static class make sure you add using system.web.mvc
Vignesh Mani10y ago
Good one
Pradeep Sahoo10y ago
Good share.... Thanks
Humayun Kabir Mamun10y ago
Nice...
Delpin Susai Raj10y ago
Good
Prasanna Murali10y ago
Nice one...