Bind GridView Control Using XML in ASP.Net

Nilesh Jadav
9y
5.5k
0
0

Article

We will embed some data into the XML file and then we call that XML for binding purposes.

Initial Chamber

Step 1

Open Your Visual Studio 2010 and create an empty website, provide a suitable name (gridview_demo).

Step 2

In Solution Explorer you get your empty website. Add a web form, SQL Database and XML file by going like this.

For Web Form:

gridview_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it gridview_demo.aspx.

For SQL Server Database:

gridview_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add the database inside the App_Data_folder).

For XML File:

gridview_demo (your empty website) then right-click then select Add New Item -> XML File.

We are using a SQL Server Database because of the connection string that we need to provide for binding purposes. Otherwise there is no use of the database since we are not using the database table. Instead we are using a Dataset.

The following is the code of XML file:

<?xml version="1.0" encoding="utf-8" ?>
<studentdetails>
<student>
<id>01</id>
<name>Nilesh</name>
<city>Rajkot</city>
</student>
<student>
<id>02</id>
<name>Purnima</name>
<city>Ahmedabad</city>
</student>
<student>
<id>03</id>
<name>Chandni</name>
<city>Mumbai</city>
</student>
<student>
<id>04</id>
<name>Rinku</name>
<city>Pune</city>
</student>
<student>
<id>05</id>
<name>Nilu</name>
<city>Delhi</city>
</student>
<student>
<id>06</id>
<name>Shailesh</name>
<city>Nashik</city>
</student>
</studentdetails>

That is the student details data that we need to bind to the grid view, so that we can see the data at run time.

Design Chamber

Step 4

Open you gridview_demo.aspx file and write some code for designing our application.

Gridview_demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Student Id">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student City">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
</div>
</form>
</body>
</html>

Here is what your design looks like:

Code Chamber

Step 5

In the code chamber we will write some binding code so that our application shows the data from the XML file to the grid view.

Gridview_demo.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
refreshdata();
}
}
public void refreshdata()
{
SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("XMLFile.xml"));
if (ds!= null && ds.HasChanges())
{
GridView1.DataSource=ds;
GridView1.DataBind();
}
else
{
GridView1.DataBind();
}
}
}

Output Chamber

Output

I hope you like this. Have a good day. Thank you for reading.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all