Read and Bind XML data to GridView using C# and Vb.Net

Typically, we read, bind and display data from an RDBMS database for obvious reasons. Data, as we know is stored in other formats too, for example in XML format. XML is lightweight and is understandable by both humans and machines.

Here in this article we will discuss on how to bind XML data with an Asp.Net GridView control. Perhaps, you should also read one of our previous articles on Reading and Writing XML data using Asp.Net. The article focuses on two important Asp.Net classes called the XMLWriter and XMLTextReader. It is important to have a basic understanding of XML data, its structure and how to data in this XML.

We will show you two simple ways to bind XML data to a GridView control.

Library.xml

First, we need an XML file to bind with a GridView control. Therefore, we have created a library with a list of books in it.

<?xml version="1.0"?>
<!--  Last edited by https://encodedna.com  -->
<Library>

  <books 
      BookName="Computer Architecture" 
      Category="Computers" 
      Price="125.60">
  </books>
  <books 
      BookName="Advanced Compsite Materials" 
      Category="Science" 
      Price="172.56">
  </books>
  <books 
      BookName="Asp.Net 4 Blue Book" 
      Category="Programming" 
      Price="56.00">
  </books>
  <books 
      BookName="Stategies Unplugged" 
      Category="Science" 
      Price="99.99">
  </books>
  <books 
      BookName="Teaching Science" 
      Category="Science" 
      Price="164.10">
  </books>
  <books 
      BookName="Challenging Times" 
      Category="Business" 
      Price="150.70">
  </books>
  <books 
      BookName="Circuit Bending" 
      Category="Science" 
      Price="112.00">
  </books>
  <books 
      BookName="Popular Science" 
      Category="Science" 
      Price="210.40">
  </books>
  <books 
      BookName="ADOBE Premiere" 
      Category="Computers" 
      Price="62.20">
  </books>

</Library>

01) Load XML to a DataSet and Bind with GridView

A DataSet stores data in a tabular format and its ReadXml() method can read an XML file efficiently and load the data into the DataSet. Later we can bind the DataSet with the GridView.

Markup with the GridView

<div>

    <h3>Load XML to a "DataSet" and Bind with the GridView.</h3>
    <br /> 
    <asp:GridView ID="GridView1" 
        CellPadding="3" CellSpacing="0" 
        runat="server">
        
        <HeaderStyle BackColor="#989898" ForeColor="white" />    
    </asp:GridView>
</div>

Code behind (C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind_GridView_With_XML();
        }
    }

    private void Bind_GridView_With_XML()
    {
        DataSet ds = new DataSet();

        ds.ReadXml(MapPath("~/library.xml"));

        // BIND THE DataSet WITH GRIDVIEW.

        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
}

Vb.Net

Imports System.Data

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Bind_GridView_With_XML()
        End If
    End Sub

    Private Sub Bind_GridView_With_XML()
        Dim ds As New DataSet

        With ds
            .ReadXml(MapPath("~/library.xml"))

            ' BIND THE DataSet WITH GRIDVIEW.

            GridView1.DataSource = ds
            GridView1.DataBind()
        End With
    End Sub
End Class

02) Bind XML data to a GridView using XmlDataSource Control

Asp.Net 2.0 first introduced XmlDataSource control, to read and extract data from an XML file.

We can bind XmlDataSource to a GridView using a wizard, by following few simple steps. Go to the design mode of the webpage and first add a GridView control.

* Click on the GridView and open the property window.
* Find DataSourceID from the list of properties and select <new data source>.
* From the wizard window, choose XML File and click the Ok button.

XmlDataSource with GridView

* Browse the XML file (library.xml) in the Data file section.

We have done it. Go back to the source of the web page and you will see the GridView attached to the XML document.

<h3>Bind XML Data using XmlDataSource</h3><br /> 

<asp:GridView ID="GridView2" 
    CellPadding="3" 
    runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1">
        
    <Columns>
        <asp:BoundField DataField="BookName" HeaderText="BookName" 
            SortExpression="BookName" />
        <asp:BoundField DataField="Category" HeaderText="Category" 
            SortExpression="Category" />
        <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
    </Columns>
        
    <HeaderStyle BackColor="#989898" ForeColor="white" />    
</asp:GridView>

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

Conclusion

Do not use XmlDataSource control to write data back to an XML document. XmlDataSource is read-only. It exposes XML attributes as bind-able fields. Therefore, it will not recognize the child nodes. Try using the below XML format to understand more on its limitations.

XML Data

<Library>
  <List>
    <BookName>Circuit Bending</BookName>
    <Category>Science</Category>
    <Price>112.00</Price>
  </List>
  <List>
    <BookName>Popular Science</BookName>
    <Category>Science</Category>
    <Price>210.40</Price>
  </List>
  <List>
    <BookName>ADOBE Premiere</BookName>
    <Category>Computers</Category>
    <Price>62.20</Price>
  </List>
</Library>

← PreviousNext →