How to Bind DataList from XML File Dynamically in Asp.Net

Description:-

The Data list Web server control displays data in a format that you can define using templates and styles. The Data List control is useful for data in any repeating structure, such as a table. The Data List control can display rows in different layouts, such as ordering them in columns or rows.

AlternatingItemTemplate	The contents of this template are displayed for every other row rendered by the GridView
EditItemTemplate	The contents of this template are displayed when a row is selected for editing
FooterTemplate	The contents of this template are displayed in the column footer
HeaderTemplate	The contents of this template are displayed in the column header
InsertTemplate	The contents of this template are displayed when a new data item is inserted
ItemTemplate	The contents of this template are displayed for every row rendered by the GridView

We can create TemplateFields in the GridView control using <TemplateField> element. Steps to create the <TemplateField> element in the GridView control

Declare the GridView and set the AutoGenerateColumns property to 'false'.
Create a Template column using <asp: TemplateField> tag within the <Columns> element.
Create <ItemTemplate> within the <asp: TemplateField> element to display value of field as text.
Create <EditItemTemplate> to display TextBox control to modify value of field when editing the record.

Now  Create Webpage and Drag GridView Control and Add Property what you need for Column.

<div>
   <asp:DataList ID="DataList1" runat="server" BackColor="Gray" BorderColor="#B40431"
      BorderStyle="None" BorderWidth="2px" CellPadding="3" CellSpacing="2" Font-Names="Verdana" Font-Size="Small" GridLines="Both" RepeatColumns="3" RepeatDirection="Horizontal"Width="600px">
      <FooterStyle BackColor="#F7DFB5" ForeColor="#0101DF" />
      <HeaderStyle BackColor="#6E6E6E" Font-Bold="True" Font-Size="Large" ForeColor="#868A08" BorderStyle="Groove" HorizontalAlign="Center" VerticalAlign="Middle" />
      <HeaderTemplate>
         Employee Details
      </HeaderTemplate>
      <ItemStyle BackColor="#BDBDBD" ForeColor="#000000" BorderWidth="2px" />
      <ItemTemplate>
         <b>Employee ID:</b>
         <asp:Label ID="Label1" runat="server" Text='<%# Bind("empid") %>'></asp:Label>
         <br />
         <b>Employee Name:</b>
         <asp:Label ID="lblCName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
         <br />
         <b>Designation:</b>
         <asp:Label ID="lblName" runat="server" Text='<%# Bind("designation") %>'></asp:Label>
         <br />
         <b>City:</b>
         <asp:Label ID="lblCity" runat="server" Text=' <%# Bind("city") %>'></asp:Label>
         <br />
         <b>Country:</b>
         <asp:Label ID="lblCountry" runat="server" Text='<%# Bind("country") %>'></asp:Label>
         <br />
      </ItemTemplate>
   </asp:DataList>
</div>

Now create your XML File Like below what I have done.

<?xml version="1.0" encoding="utf-8"?>
<EmployeeDetails>
   <Employee>
      <empid>1001</empid>
      <name>Umesh</name>
      <designation>Software Engineer</designation>
      <city>Ahmedabad</city>
      <country>India</country>
   </Employee>
   <Employee>
      <empid>1002</empid>
      <name>Suresh</name>
      <designation>Web Developer</designation>
      <city>New Delhi</city>
      <country>India</country>
   </Employee>
   <Employee>
      <empid>1003</empid>
      <name>Steve</name>
      <designation>Web Developer</designation>
      <city>Bangalore</city>
      <country>India</country>
   </Employee>
   <Employee>
      <empid>1004</empid>
      <name>Karthik</name>
      <designation>Business Analyst</designation>
      <city>New Delhi</city>
      <country>India</country>
   </Employee>
   <Employee>
      <empid>1005</empid>
      <name>Chirag</name>
      <designation>Software developer</designation>
      <city>Ahmedabad</city>
      <country>India</country>
   </Employee>
   <Employee>
      <empid>1006</empid>
      <name>Jenish</name>
      <designation>Designer</designation>
      <city>Ahmedabad</city>
      <country>India</country>
   </Employee>
</EmployeeDetails>

Now go to Code behind and Create Method for Retrieve data from SQL table and Call in Page_Load () method so we can Load when Page load First time in browser.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindData();
    }
}

protected void BindData()
{
    DataSet ds = new DataSet();
    try
    {
        ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
        if (ds != null && ds.HasChanges())
        {
            DataList1.DataSource = ds;
            DataList1.DataBind();
        }
        else
        {
            DataList1.DataBind();
        }
    }
    catch (Exception ex)
    {
    }
}

Now browse you Webpage in browser so we can check XML file called in GridView or Not.

Author : Umesh Patel

Related Posts