C#.net How to: Load and display XML data in ASP.net

Here is a tutorial that will give you a step by step procedure to load xml into DataSet and then bind that data to Gridview in ASP.net. At the end of this tutorial you will have a clear understanding on how to load xml data in DataSet and then bind & display the xml data in GridView. The tutorial is based on Visual Studio 2010.

We are taking an example of xml file that contains various Camera Details such as Camera make model name and prices.
 

To start with this tutorial, first you will need xml file. Take a look at below contents of the xml file that we are going to use for this tutorial. You can create an xml file in Visual studio by clicking File -> New -> File or by simply clicking Ctrl+N and then double click on XML File option. Delete all automated contents and then copy paste below contents and save the file with name “CameraDetails.xml”. Save this file anywhere on your local disk, however in next few steps we are going to copy this file in project location so just make a note of file location.

<?xml version="1.0" encoding="utf-8"?>

<Cameras>

  <Camera>

    <Model>Canon EOS-1D</Model>

    <Price>$5219</Price>

  </Camera>

  <Camera>

    <Model>Canon EOS-1D Mark IV</Model>

    <Price>$5000</Price>

  </Camera>

  <Camera>

    <Model>Canon EOS 5D Mark III</Model>

    <Price>$2949</Price>

  </Camera>

  <Camera>

    <Model>Nikon DSLR D3100 Black</Model>

    <Price>$1222</Price>

  </Camera>

  <Camera>

    <Model>Sony CyberShot DSC T99</Model>

    <Price>$178</Price>

  </Camera>

  <Camera>

    <Model>Samsung PL20 Silver</Model>

    <Price>$101</Price>

  </Camera> 

</Cameras>

The final output at the end of this tutorial will be like –

Camera Make Model	Price
Canon EOS-1D	$5219
Canon EOS-1D Mark IV	$5000
Canon EOS 5D Mark III	$2949
Nikon DSLR D3100 Black	$1222
Sony CyberShot DSC T99	$178
Samsung PL20 Silver	$101

Now follow the steps to create a new ASP.net project –

1) Open Visual Studio 2010 .net IDE.
 

2) Select File -> New -> Project or simply click Ctrl+Shift+N to create a new ASP.net project.
 

3) Select Web from left pane and then select ASP.NET Web Application from right pane, enter your desired project name, location of the project and click on OK button.

a1ashiish-csharp.blogspot.com - Load XML in DataSet.

4) Now copy the xml “CameraDetails.xml” that we have created in initial steps to your project folder.

5) In this step we are going to create a new web page that would actually display output i.e. xml data. To create a new page go to solution explorer, right click on project name, select Add from the context menu and then select New Item from submenu. Or simply press Ctrl+Shift+A to add a new item. And then Select Web Form, enter name for the web page, here i have named it as “CameraDetails.aspx”. Once done click on Add button.

a1ashiish-csharp.blogspot.com - Add new web page.

You can see this newly added web page in Solution Explorer.
 

6) Now right click on the page in solution explorer and select View Designer to open the page in design mode. This will open a page “CameraDetails.aspx”.

7) Add a new GridView on this page. Go to Toolbar and select GridView and drag & drop in page. So the design page would be like below screenshot –
 

a1ashiish-csharp.blogspot.com - GridView in Design Mode.

8) You can view the source code of this design by clicking source on bottom of the window. Click on Source and it would open a source of the page that would be essentially a HTML look.

a1ashiish-csharp.blogspot.com - Source Page.

9) You may see following lines in opened source page.

       <asp:GridView ID="GridView1" runat="server">

        </asp:GridView>
 

10) Now replace above lines with following contents –

        <asp:GridView ID="gridCameraDetails" runat="server" AutoGenerateColumns="False" CellPadding="8"

            HeaderStyle-BackColor="Menu" HeaderStyle-ForeColor="blue" HeaderStyle-HorizontalAlign="Center"

            HeaderStyle-Font-Bold="True" RowStyle-BackColor="AliceBlue">

            <Columns>

                <asp:BoundField HeaderText="Camera Make Model" DataField="Model" ItemStyle-HorizontalAlign="Right" />

                <asp:BoundField HeaderText="Price" DataField="Price" ItemStyle-HorizontalAlign="Left" />

            </Columns>

        </asp:GridView>

11) Find <title> and enter the title “Camera Details”. Save the changes.
 

12) Again go to Solution explorer, right click on this page, select View Code from context menu.
 

13) It will open a CameraDetails.aspx.cs file where you can write your actual C# code.
 

14) Add below lines in your code. This is a namespace that actually imports DataSet in your code.

        using System.Data;

15) Locate following lines  -

        protected void Page_Load(object sender, EventArgs e)

        {

        }

16) Replace above mentioned lines with below C# code lines –

        protected void Page_Load(object sender, EventArgs e)

        {

            try

            {

                var xmlFilePath = Server.MapPath("CameraDetails.xml");//Location of the XML file.

                DataSet dsCameraDetails = new DataSet();

                dsCameraDetails.ReadXml(xmlFilePath);// Load XML in dataset

                gridCameraDetails.DataSource = dsCameraDetails.Tables[0].DefaultView;

                gridCameraDetails.DataBind();// Bind the DataSet to Grid that will display all xml data.

            }

            catch (Exception ex)

            {

                //handle exception here...

            }

        }

17) Save all files and we done with coding and designing part. The next step is to execute the ASP.net project and see the output.
 

18) Go to solution explorer, right click on “CameraDetails” and select Set As Startup Page.
 

19) Press F5, it will open a new web page in your default web browser. 

I hope this article helped you to understand how to read and display XML data. Could you please share the article on your favorite social media using below "Sharing is Caring" widget.?  

Sharing is Caring »»

Tweet