Post
Ask Question

Binding GridView From XML Using ASP.Net

Background
 
There is often a need for applications to bind a Grid View from an EXtensible Markup Language (XML) file that is widely used to communicate for cross-platform applications. To learn more about XML please refer to the many articles and books on this website. Let us see the procedure for creating a XML file so students can understand it.
 
Step 1
 
Create the project as:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New Project" - "C#" - "Empty Project" (to avoid adding a master page).
  3. Give the project a name such as "BindGridfromxml" or another as you wish and specify the location.
  4. Then right-click on Solution Explorer - "Add New Item" - "Default.aspx" page.
  5. Drag and Drop one grid view to the Default.aspx page. Then the page will look such as follows.
Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
  2.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3.     
  4.  <html xmlns="http://www.w3.org/1999/xhtml">    
  5.  <head runat="server">    
  6.      <title></title>    
  7.  </head>    
  8.  <body bgcolor="silver">    
  9.      <form id="form1" runat="server">    
  10.      <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">    
  11.          <AlternatingRowStyle BackColor="White" />    
  12.          <EditRowStyle BackColor="#2461BF" />    
  13.          <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />    
  14.          <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />    
  15.          <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />    
  16.          <RowStyle BackColor="#EFF3FB" />    
  17.          <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />    
  18.          <SortedAscendingCellStyle BackColor="#F5F7FB" />    
  19.          <SortedAscendingHeaderStyle BackColor="#6D95E1" />    
  20.          <SortedDescendingCellStyle BackColor="#E9EBEF" />    
  21.          <SortedDescendingHeaderStyle BackColor="#4870BE" />    
  22.      </asp:GridView>    
  23.      </form>    
  24.  </body>    
  25.  </html> 

Step 2

  • Adding and creating XML file
To add a XML file from Visual Studio, right-click on Solution Explorer and choose XML file as in the following:
 
Add XML file 
 
After adding the XML file it wll look such as follows:
  1. <?xml version="1.0" encoding="utf-8" ?>  
Step 3:
 
Now let us add some records to the XML file as in the following:
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <Customer>    
  3.   <Customerinfo>    
  4.     <Name>Vithal Wadje</Name>    
  5.     <city>Mumbai</city>    
  6.     <Address>Sion, Mumbai</Address>    
  7.  </Customerinfo>    
  8.   <Customerinfo>    
  9.     <Name>Sudhir Wadje</Name>    
  10.     <city>Latur</city>    
  11.     <Address>Latur</Address>    
  12.   </Customerinfo>    
  13.   <Customerinfo>    
  14.     <Name>U D</Name>    
  15.     <city>Mumbai</city>    
  16.     <Address>DN,Road Mumbai</Address>    
  17.   </Customerinfo>    
  18.   <Customerinfo>    
  19.     <Name>Anil Kumar</Name>    
  20.     <city>Delhi</city>  z  
  21.     <Address>Nehru House</Address>    
  22.   </Customerinfo>    
  23. </Customer> 
In the preceding sample code the Custmorinfo tag represents the table name in the data table and Name, City and Address represents the column name. When you want to add records then you need to add a row within the Customerinfo tag every time.
 
Let us see the preceding XML file in the DataSet using the DataSet Visualizer as in the following:
 
 
 
 From the preceding example it's clear that the Customerinfo tag represents the table name in the data table and that Name, City and Address represents the column name.
 
Step 4:
 
Now let us add the code into default.aspx.cs for the Page Load event to bind the Grid view as in the following:
 
Default.aspx.cs
  1. using System;    
  2. using System.Data;    
  3. using System.Data.SqlClient;      
  4.   
  5. public partial class _Default : System.Web.UI.Page    
  6. {    
  7.     DataSet ds = new DataSet();    
  8.     protected void Page_Load(object sender, EventArgs e)    
  9.     {    
  10.         ds.ReadXml(Server.MapPath("~/Customer.xml"));    
  11.         GridView1.DataSource = ds;    
  12.         GridView1.DataBind();        
  13.     }       
  14. } 
We are now done with the code, now run the application and the output will be as follows.
 
output  
 
Note
  • Download the Zip file from the attachment for the full source code of the application. 
Summary
 
I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also. 


Similar Articles