Introduction
GridView is one of the most popular ASP.NET data controls.
It is most commonly used to display data coming from a database.
However, a GridView can also read and display data from plain XML files.
This tutorial is showing how to setup an XMLDataSource and associate it with a GridView.
XML data
Let’s start by creating a simple XML file for this demo.
The XML file stores contact data, a “name” and a “phone” number.
contacts.xml
<?xml version="1.0" encoding="utf-8" ?> <contacts> <contact> <name>John</name> <phone>0800100100</phone> </contact> <contact> <name>Mary</name> <phone>0900200200</phone> </contact> </contacts>
Transforming XML data
If you try to use the above XML file as it is with a GridView, you will get an error.
The required XML format is a bit different.
GridView is expecting to find for each row something like that:
<contact name="John" phone="0800100100" />
Editing our XML file is not an option, imagine having a few hundred contact entries.
The proper solution is to transform our XML data using XSLT.
XSLT (Extensible Stylesheet Language Transformations) is an XML-based language used for the transformation of XML documents into other XML or “human-readable” documents.
Here is an XSL file which will do the trick:
contacts.xsl
<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: output method="xml" indent="yes"/> <xsl:template match ="/"> <contacts> <xsl:apply-templates select ="//contact"/> </contacts> </xsl:template> <xsl:template match ="//contact"> <contact> <xsl:attribute name="name"> <xsl:value-of select="name"/> </xsl:attribute> <xsl:attribute name="phone"> <xsl:value-of select="phone"/> </xsl:attribute> </contact> </xsl:template> </xsl:stylesheet>
Visualizing the transformed XML data
This step is entirely optional.
Follow it if would like to view the transformed XML data.
Create a new C# Console Application, and paste the following code:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Xml; using System.Xml.Xsl; namespace XslTransformCS { class Program { static void Main(string[] args) { XslCompiledTransform xslt = new XslCompiledTransform(); xslt.Load("E:\\xml\\contacts.xsl"); XmlTextReader reader = new XmlTextReader("E:\\xml\\contacts.xml"); XmlTextWriter writer = new XmlTextWriter(Console.Out); xslt.Transform(reader,null,writer,null); Console.ReadLine(); } } }
Running it, will output in the console:
Creating and populating a GridView
Create a new Web Application, and add the contacts.xml/xsl files.
Drag/drop a GridView on the designer.
Click on “New data source …”:
Select “XML File”:
Browse for the contacts.xml, contacts.xsl files.
Customizing the GridView
This step is also optional.
You can click on GridView’s “Edit Columns” to change the column names, as by default they are set to the XML tag names.
Moreover you can select a GridView theme (click on “AutoFormat”) to get a better data display.
Here is a preview of the final result:
it is good code but for less complexity
Please check your xslt file…Some corrections are there
@gaurav:
Thanks for mentioning it.
Unfortunately WP code was showing the : x and : o as an html img tag for smiley in the xslt file.
I had to add a space.
So please remove the spaces after the : symbol, there are only three of them, in the first three lines of the xslt file.
How can we implement edit functionality in gridview which is bind to the xmldatasource?
Actually we can NOT use XmlDataSource as the GridViewās data source directely, Am I right?
Very nice post, but to reduce complexity binding datagrid to an element only xml file you can do this to avoid having to create an XSL. Not sure about the overhead question though.
xmlpath = Request.PhysicalApplicationPath + “\\App_data\\contacts.xml”
DataSet ds = new DataSet();
ds.ReadXml(new System.IO.StreamReader(xmlpath));
grdContacts.DataSource = ds;
grdContacts.DataBind();
filepath = Server.MapPath(“XMLFILES” + “/” + “krish.xml”);
DataSet ds = new DataSet();
ds.ReadXml(new System.IO.StreamReader(filepath));
GridView1.DataSource = ds;
GridView1.DataBind();
// XML FILES is a folder name , after this code u can click on grid to see change the color .. cheers
Actually we can NOT use XmlDataSource as the GridView’s data source directely, Am I right? it can be treeview’s data source ,and othe XXXDataSource control can be uase for GridView. I don’t know why.
I always got rumtime error, like:
The data source for GridView with id ‘GridView2’ did not have any properties or attributes from which to generate columns. Ensure that your data source has content.
Can some body give me an idea?
Thanks
hey frnds i want to learn asp.net from starting so pls help me.. where should i start.
Very informative post. It’s really helpful for me and helped me lot to complete my task. Thanks for sharing with us. I had found another nice post over the internet which was also explained very well about Populate Grid Control From XML Document Easily, for more details of this post check out this link…
http://mindstick.com/Articles/6c3ccf8c-6656-4a48-bfb7-e0221569de67/?Populate%20Grid%20Control%20From%20XML%20Document%20Easily
Thanks Everyone!!
How does one add cell font color in the xsl? Say if the value is negative, then the font color is red.
how can i insert a new row this xml file in this project
[…] https://decoding.wordpress.com/2008/12/22/aspnet-how-to-use-an-xmldatasource-with-a-gridview/ […]
[…] https://decoding.wordpress.com/2008/12/22/aspnet-how-to-use-an-xmldatasource-with-a-gridview/ […]
A complete guide on ..Asp.Net Gridview
Ling
how to show only data in a gridview… in asp.net using c#