Displaying Data from XML file using ASP.NET and C#

This tutorial shows you how to display data that resides in an XML file, in a GridView and DataList. C# version.

This tutorial shows how XML pages can be used to store data, and how you can use ASP.NET to display that data on your web page.

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

First, look at the XML file. You'll notice it's structure is hierarchical:

<?xml version="1.0" standalone="yes"?>
<videos>

</comments>

</video>
<video vidID="000000002" title="The Goonies" price="9.95">

</comments>

</video>
<video vidID="000000003" title="The Lawnmower Man" price="10.95" >

</comments>

</video>
<video vidID="000000004" title="War of the Worlds" price="16.95" >

</comments>

</video>
<video vidID="000000005" title="Titanic" price="1.95" >
</video>

</videos>

To display the data, we use a GridView control and XmlDataSource.
In this example, there is also a DataList which displays data nested in the XML file.

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Videos.xml">
</asp:XmlDataSource>

</div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None" DataKeyNames="vidID" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">

<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="vidID" HeaderText="ID" SortExpression="vidID" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" >

</asp:BoundField>
<asp:BoundField DataField="price" HeaderText="Price" SortExpression="price" />

</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />

</asp:GridView>
<asp:DataList ID="DataList1" runat="server" DataSourceID="XmlDataSource2" Visible="False">

User Rating:
<asp:Label ID="ratingLabel" runat="server" Text='<%# Eval("rating") %>'></asp:Label><br />
Comment:
<asp:Label ID="commentLabel" runat="server" Text='<%# Eval("comment") %>'></asp:Label><br />
<br />

</ItemTemplate>
<SeparatorTemplate>

<hr />

</SeparatorTemplate>

</asp:DataList><br />
<asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/App_Data/Videos.xml" XPath="/videos/video/comments/userComment "></asp:XmlDataSource>
 
<br />

</form>

The following code makes sure the DataList displays the nested elements in the XML file, which are not shown in the GridView, when the user selects one of the entries in the GridView. This dynamically changes the Xpath when the user selects a new item from the GridView.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

String vidID = (String) GridView1.DataKeys[GridView1.SelectedIndex].Value;
XmlDataSource2.XPath = String.Format("/videos/video[@vidID='{0}']/comments/userComment",vidID);
DataList1.Visible = true;

}

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!