1.7K

In this article we are going to learn, how to display data in GridView from XML file in ASP.NET using C# as backend. Let’s start reading XML file and displaying in ASP.NET webpage.

How to display data in GridView from XML File? Well, we can do this in multiple ways. Basically,

• Supplying file from Front-End (User Selected Import)
• Saved file in server (Already saved in system)
• Created at the time of programming (run-time).

What is XML?

XML means Extensible Markup Language. As you know, the complete .NET is based on XML and XML is the most popular and platform independent Schema. Which powers all the Documents, Spreadsheets, and other common file formats that we use in daily basis whether that being a Microsoft Word document or Open Office document.

Requirement & Limitation of XML File

• XML File should be declared in structured Node.
• One XML File can contain Only one Root Node.
• Multiple Tables can be created inside one Node.

Sample XML File

For demonstration purpose, we are creating a simple XML file which contains a table and columns. We can also create XML file which contain multiple tables with their definitions as well.

We will create a table with below columns using XML and display the data inside GridView.

Roll

Name

Maths

English

Science

Social

XML Design with Table Name classXII inside Result node.

<result>
  <classXII>
    <Roll>1</Roll>
    <Name>Abhaya</Name>
    <Maths>67</Maths>
    <English>75</English>
    <Science>80</Science>
    <Social>62</Social>
  </classXII>
  <classXII>
    <Roll>2</Roll>
    <Name>Vikas</Name>
    <Maths>44</Maths>
    <English>71</English>
    <Science>60</Science>
    <Social>56</Social>
  </classXII>
  <classXII>
    <Roll>3</Roll>
    <Name>Rakesh</Name>
    <Maths>92</Maths>
    <English>87</English>
    <Science>90</Science>
    <Social>60</Social>
  </classXII>
  <classXII>
    <Roll>4</Roll>
    <Name>Deepak</Name>
    <Maths>88</Maths>
    <English>45</English>
    <Science>70</Science>
    <Social>70</Social>
  </classXII>
</result>

If you are working with multiple tables, schema will be like below.

<result>
  <classXII>
    <Roll>1</Roll>
    <Name>Abhaya</Name>
    <Maths>67</Maths>
    <English>75</English>
    <Science>80</Science>
    <Social>62</Social>
  </classXII>

  <classXI>
    <Roll>101</Roll>
    <Name>Abhaya Kumar</Name>
    <Maths>67</Maths>
    <English>75</English>
    <Science>80</Science>
    <Social>62</Social>
  </classXI>
</result>

ASPX Design with GridView

Now we have our XML file and let’s create an ASPX page to display data. You know how to add this. How to display data in GridView from XML File? Below is the sample design we have created and ASPX code for this design.

HTML Code for above design

<form id="form1" runat="server">
        <h2 style="text-align: center">Reading Data from XML</h2>
        <br />
        <center>
            XML File  :  
        <asp:FileUpload ID="FileUpload1" runat="server" /> <br />
            <br />
            Table Name :   
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <br />
            <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" />
            <br />
            <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Style="text-align: center" Width="451px">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
        </center>      
    </form>

How to display data in GridView from XML File?

While we have already created a webform with GridView and XML file with sample data, let’s move to next part.

For this example, we have used file which is already saved in server. You can always make changes as per you need, whether to allow Imported file or need to display some generated xml file.

For importing this, we have use System.Data namespace.

DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("Data.xml"));
            GridView1.DataSource = ds.Tables[0].DefaultView;
            GridView1.DataBind();

Explanation of above code:

1. In firs line, we have created a DataSet named ds.
2. We have used ReadXml method in created DataSet and used Server.MapPath to locate file path from server.
3. Then, we assigned the value of DataSet’s first table as Source of GridView & bind it to display in front end using DataBind method.

This is quite simple solution to most asked question, how to display data in GridView from XML file? Hope you find it useful. We have also attached copy of sample project created while created this tutorial. You can download from below link for free or visit GitHub for other sample source code files.

Download “How to display data in GridView from XML file in ASP.NET”

How-to-Display-Data-in-GridView-from-XML-File.zip – Downloaded 155 times – 2.06 KB