Post
Ask Question

Bind DataList Control Using XML in ASP.Net

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

Initial Chamber

Step 1

Open Visual Studio 2010 and create an Empty Website, name it DataList_demo.

Step 2

In Solution Explorer you will get your empty website. Add a web form, SQL Database and XML file. Use the following procedure.

For Web Form:

DataList_demo (your empty website) then right-click and select Add New Item then Web Form. Name it datalist_demo.aspx.

For SQL Server Database:

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

For XML File:

DataList_demo (your empty website) then right-click and select Add New Item then 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 a database since we are not using the database table, instead of that we are using a Dataset.

Here is the code of the XML file:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <studentdetails>  
  3.     <student>  
  4.         <id>01</id>  
  5.         <name>Nilesh</name>  
  6.         <city>Rajkot</city>  
  7.     </student>  
  8.     <student>  
  9.         <id>02</id>  
  10.         <name>Purnima</name>  
  11.         <city>Ahmedabad</city>  
  12.     </student>  
  13.     <student>  
  14.         <id>03</id>  
  15.         <name>Chandni</name>  
  16.         <city>Mumbai</city>  
  17.     </student>  
  18.     <student>  
  19.         <id>04</id>  
  20.         <name>Rinku</name>  
  21.         <city>Pune</city>  
  22.     </student>  
  23.     <student>  
  24.         <id>05</id>  
  25.         <name>Nilu</name>  
  26.         <city>Delhi</city>  
  27.     </student>  
  28.     <student>  
  29.         <id>06</id>  
  30.         <name>Shailesh</name>  
  31.         <city>Nashik</city>  
  32.     </student>  
  33. </studentdetails>  
These are the student details data that we need to bind to the data list, so that we can see the data at run time.

Design Chamber

Step 3

Open your datalist_demo.aspx file and write some code for designing the application.

Datalist_demo.aspx:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .style1  
  10.         {  
  11.             width: 99px;  
  12.         }  
  13.         .style2  
  14.         {  
  15.             width: 120px;  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.     <div>  
  22.       
  23.         <asp:DataList ID="DataList1" runat="server" Height="344px" Width="497px"   
  24.             BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px"   
  25.             CellPadding="2" ForeColor="Black" RepeatColumns="1">  
  26.             <AlternatingItemStyle BackColor="PaleGoldenrod" />  
  27.             <FooterStyle BackColor="Tan" />  
  28.             <HeaderStyle BackColor="Tan" Font-Bold="True" />  
  29.             <HeaderTemplate>  
  30.                 Bind Data List Control using XML  
  31.             </HeaderTemplate>  
  32.             <ItemTemplate>  
  33.                 <table style="width:100%;">  
  34.                     <tr>              
  35.                         <td class="style1">  
  36.                           
  37.                             <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>  
  38.                         </td>  
  39.                         <td class="style2">  
  40.                             <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>  
  41.                         </td>  
  42.                         <td>  
  43.                             <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>  
  44.                         </td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td class="style1">  
  48.                              </td>  
  49.                         <td class="style2">  
  50.                              </td>  
  51.                         <td>  
  52.                              </td>  
  53.                     </tr>  
  54.                 </table>  
  55.             </ItemTemplate>  
  56.             <SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />  
  57.         </asp:DataList>  
  58.       
  59.     </div>  
  60.     </form>  
  61. </body>  
  62. </html>  
Your design will look as in the following picture:

bind data

Here we bound the label in the Item Template of the data list. To do that just open the small arrow to the left of the data list and click Edit Templates.

binded data list control using XML

In Edit Templates, there is a drop down in which you need to choose Item Template. Inside Item Template use a HTML Table and in the first 3 rows use a Label as is displayed in the following image:

label

Now we can simply bind the label using the following code:

code

Also, you can do this by going to the label in the item template and selecting Label, then click on the arrow and Edit DataBindings as shown in the following image:

table task

text

Inside the label Databinding go to the Text Properties and bind the XML field that you want to show at run time. Here we will bind the name for that, then in Custom Binding, bind the name like Bind(“name”).

You need to do this for all the fields like in our XML file we have the three fields ID, Name and City. For that we are using 3 labels and we will bind that too. Like name is bound here, you can do it for ID and city in the same way by going to the label, then text and then Bind(“id")  and for city, use Bind(“city”).

Code Chamber

Step 4

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

datalist_demo.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             refreshdata();  
  17.         }  
  18.     }  
  19.   
  20.   
  21.     public void refreshdata()  
  22.     {  
  23.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  24.         DataSet ds = new DataSet();  
  25.             ds.ReadXml(Server.MapPath("XMLFile.xml"));  
  26.             if (ds != null && ds.HasChanges())  
  27.             {  
  28.                 DataList1.DataSource = ds;  
  29.                 DataList1.DataBind();  
  30.             }  
  31.             else  
  32.             {  
  33.                 DataList1.DataBind();  
  34.             }     
  35.     }  
  36. }  
Output Chamber

binded data from XML

I hope you will like this. Thank you for reading. Have a good Day! 


Similar Articles