Bind an XMLDataSource to a GridView control

On one of my ASP.NET 2.0 projects, I had to use an XML file as the data source for a GridView control. The problem was that I had never used this method before. But after doing some research, I found it to be very similar (and straightforward) to binding to a database – with the exception of the need to use XPath.

So…without further adieu, here are the steps and code. Enjoy!

1. Create an XML file that contains your data, like below (taken from Microsoft’s website to save a lot of typing). Save it as books.xml.

<font size="2"><span style="color: rgb(0,0,255)">&lt;?</span><span style="color: rgb(163,21,21)">xml</span><span style="color: rgb(0,0,255)"> </span><span style="color: rgb(255,0,0)">version</span><span style="color: rgb(0,0,255)">=</span>"<span style="color: rgb(0,0,255)">1.0</span>"</font><font size="2"><span style="color: rgb(0,0,255)">?&gt;
&lt;</span><span style="color: rgb(163,21,21)">catalog</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
  &lt;</span><span style="color: rgb(163,21,21)">book</span><span style="color: rgb(0,0,255)"> </span><span style="color: rgb(255,0,0)">id</span><span style="color: rgb(0,0,255)">=</span>"<span style="color: rgb(0,0,255)">bk101</span>"</font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">author</span><span style="color: rgb(0,0,255)">&gt;</span>Gambardella, Matthew<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">author</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">title</span><span style="color: rgb(0,0,255)">&gt;</span>XML Developer's Guide<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">title</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">genre</span><span style="color: rgb(0,0,255)">&gt;</span>Computer<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">genre</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">price</span><span style="color: rgb(0,0,255)">&gt;</span>44.95<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">price</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">publish_date</span><span style="color: rgb(0,0,255)">&gt;</span>2000-10-01<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">publish_date</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">description</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>      An in-depth look at creating applications
      with XML.
<span style="color: rgb(0,0,255)">    &lt;/</span><span style="color: rgb(163,21,21)">description</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
  &lt;/</span><span style="color: rgb(163,21,21)">book</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
  &lt;</span><span style="color: rgb(163,21,21)">book</span><span style="color: rgb(0,0,255)"> </span><span style="color: rgb(255,0,0)">id</span><span style="color: rgb(0,0,255)">=</span>"<span style="color: rgb(0,0,255)">bk102</span>"</font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">author</span><span style="color: rgb(0,0,255)">&gt;</span>Ralls, Kim<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">author</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">title</span><span style="color: rgb(0,0,255)">&gt;</span>Midnight Rain<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">title</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">genre</span><span style="color: rgb(0,0,255)">&gt;</span>Fantasy<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">genre</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">price</span><span style="color: rgb(0,0,255)">&gt;</span>5.95<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">price</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">publish_date</span><span style="color: rgb(0,0,255)">&gt;</span>2000-12-16<span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">publish_date</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
    &lt;</span><span style="color: rgb(163,21,21)">description</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>      A former architect battles corporate zombies,
      an evil sorceress, and her own childhood to become queen
      of the world.
<span style="color: rgb(0,0,255)">    &lt;/</span><span style="color: rgb(163,21,21)">description</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
  &lt;/</span><span style="color: rgb(163,21,21)">book</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
&lt;/</span><span style="color: rgb(163,21,21)">catalog</span><span style="color: rgb(0,0,255)">&gt;</span></font>

2. Add a GridView control to your .aspx page and rename it to gdvBooks.
3. Drag an XmlDataSource control to your form, rename it xdsBooks, and assign your XML file (books.xml) in the control’s DataFile property.
4. Next, change to Source view and input the code below.

<font size="2"><span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">GridView</span> <span style="color: rgb(255,0,0)">ID</span><span style="color: rgb(0,0,255)">="gdvServerVersions"</span> <span style="color: rgb(255,0,0)">runat</span><span style="color: rgb(0,0,255)">="server"</span>         </font>
<font size="2">    <span style="color: rgb(255,0,0)">AutoGenerateColumns</span><span style="color: rgb(0,0,255)">="False"</span> <span style="color: rgb(255,0,0)">DataKeyNames</span><span style="color: rgb(0,0,255)">="id"</span>         </font>
<font size="2">    <span style="color: rgb(255,0,0)">DataSourceID</span><span style="color: rgb(0,0,255)">="xdsServerVersions" </span><span style="color: rgb(255,0,0)">EmptyDataText</span><span style="color: rgb(0,0,255)">="No data available."&gt;</span>                </font>
<font size="2">    <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">Columns</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">BoundField</span> <span style="color: rgb(255,0,0)">HeaderText</span><span style="color: rgb(0,0,255)">="Book ID" </span><span style="color: rgb(255,0,0)">DataField</span><span style="color: rgb(0,0,255)">="id"</span> </font>
<font size="2">            <span style="color: rgb(255,0,0)">SortExpression</span><span style="color: rgb(0,0,255)">="id"</span> </font><font size="2"><span style="color: rgb(0,0,255)">/&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Author"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("author") </font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Title"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("title") </font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Genre"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("genre") </font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Price"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("price") </font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Publish Date"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("publish_date") </font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
        <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span> <span style="color: rgb(255,0,0)">HeaderText</span></font><font size="2"><span style="color: rgb(0,0,255)">="Description"&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>                <span style="background: rgb(255,238,98)">&lt;%<span style="color: rgb(0,0,255)"></span>#</span> XPath("description")</font><font size="2"><span style="background: rgb(255,238,98)">%&gt;
</span>            <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">ItemTemplate</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
</span>        <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">TemplateField</span><span style="color: rgb(0,0,255)">&gt;</span>
    <span style="color: rgb(0,0,255)">&lt;/</span><span style="color: rgb(163,21,21)">Columns</span></font><font size="2"><span style="color: rgb(0,0,255)">&gt;
&lt;/</span><span style="color: rgb(163,21,21)">asp</span><span style="color: rgb(0,0,255)">:</span><span style="color: rgb(163,21,21)">GridView</span><span style="color: rgb(0,0,255)">&gt;</span></font>&nbsp;
5. That’s it! Simply navigate to your newly created page and see the results.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.