DataList Control in ASP.Net

Introduction

DataList is a Databound control to display and manipulate data in a web application. It is a composite control that can combine other ASP.Net controls and it is present in the form. The DataList appearance is controlled by its template fields.

The following template fields are supported by the DataList control:

  • Itemtemplate: It specifies the Items present in the Datasource, it renders itself in the browser as many rows present in the data source collection.
  • EditItemTemplate: Used to provide edit permissions to the user.
  • HeaderTemplate: Used to display header text to the data source collection.
  • FooterTemplate: Used to display footer text to the data source collection.
  • ItemStyle: Used to apply styles to an ItemTemplate.
  • EditStyle: Used to apply styles to an EditItemTemplate
  • HeaderStyle: Used to apply styles to a HeaderTemplate
  • FooterStyle: Used to apply styles to a FooterTemplate.
Frequently used properties with DataList



Frequently used Events with DataList control

Event: Event is a precise time that something happened.



The following  is an example demonstrate the DataList Control with a bound image and a FileUpload control:



Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>      
  2. <!DOCTYPE html>      
  3. <html      
  4.     xmlns="http://www.w3.org/1999/xhtml">      
  5.     <head runat="server">      
  6.         <title></title>      
  7.         <style>      
  8.         .itemstyle {      
  9.               border-collapse: collapse;      
  10.               background-color: aquamarine;      
  11.               border: 1px solid red;      
  12.               border-radius: 8px;      
  13.               padding:4px;      
  14.         }      
  15.         tr {      
  16.             height:40px;      
  17.         }      
  18.         table {      
  19.               width: initial;      
  20.         }      
  21.     </style>      
  22.     </head>      
  23.     <body>      
  24.         <form id="form1" runat="server">      
  25.             <div>      
  26.                 <asp:DataList ID="dl1" runat="server"      
  27.      RepeatDirection="Horizontal"      
  28.       RepeatColumns="3"      
  29.        OnEditCommand="dl1_EditCommand"      
  30.         OnCancelCommand="dl1_CancelCommand"      
  31.          OnUpdateCommand="dl1_updateCommand"      
  32.           OnDeleteCommand="dl1_DeleteCommand" >      
  33.                     <HeaderTemplate>      
  34.                         <table>      
  35.                             <tr>      
  36.                                 <td>      
  37.                                     <h1>Student Information</h1>      
  38.                                 </td>      
  39.                             </tr>      
  40.                         </table>      
  41.                     </HeaderTemplate>      
  42.                     <ItemStyle CssClass="itemstyle" />      
  43.                     <ItemTemplate>      
  44.                         <table border="1">      
  45.                             <tr>      
  46.                                 <td>Employee ID:</td>      
  47.                                 <td>      
  48.                                     <asp:Label ID="lblempid" runat="server" Text='<%# Eval("EmpId") %>'>      
  49.                                     </asp:Label>      
  50.                                 </td>      
  51.                                 <td rowspan="5">      
  52.                                     <asp:Image ID="empimg" runat="server" ImageUrl='      
  53.                                         <%# "~/Images/" + Eval("EmpImage") %>' Height="180px" Width="200px" />      
  54.                                     </td>      
  55.                                 </tr>      
  56.                                 <tr>      
  57.                                     <td>Employee Name:</td>      
  58.                                     <td>      
  59.                                         <asp:Label ID="lblempname" runat="server" Text='<%# Eval("EmpName") %>'>      
  60.                                         </asp:Label>      
  61.                                     </td>      
  62.                                 </tr>      
  63.                                 <tr>      
  64.                                     <td>Employee EmailId:</td>      
  65.                                     <td>      
  66.                                         <asp:Label ID="lblemailid" runat="server" Text='<%# Eval("EmpEmailId") %>'>      
  67.                                         </asp:Label>      
  68.                                     </td>      
  69.                                 </tr>      
  70.                                 <tr>      
  71.                                     <td>Employee Mobile Number</td>      
  72.                                     <td>      
  73.                                         <asp:Label ID="lblmbnum" runat="server" Text='<%# Eval("EmpMobileNum")  %>'>      
  74.                                         </asp:Label>      
  75.                                     </td>      
  76.                                 </tr>      
  77.                                 <tr>      
  78.                                     <td colspan="3" style="text-align:left">  
  79.                                         <asp:Button ID="btn1" runat="server" CommandName="edit" Text="Edit" />  
  80.                                         <asp:Button ID="btn2" runat="server" Text="Delete" CommandName="delete" />      
  81.                                     </td>      
  82.                                 </tr>      
  83.                             </table>      
  84.                         </ItemTemplate>      
  85.                         <EditItemStyle CssClass="itemstyle" />      
  86.                         <EditItemTemplate>      
  87.                             <table border="1">      
  88.                                 <tr>      
  89.                                     <td>Employee Id:</td>      
  90.                                     <td>      
  91.                                         <asp:TextBox ID="txtempid" ReadOnly="true" runat="server" Text='<%# Eval("EmpId") %>'>      
  92.                                         </asp:TextBox>      
  93.                                     </td>      
  94.                                     <td rowspan="5">      
  95.                                         <asp:Image ID="empimg" runat="server" ImageUrl='      
  96.                                             <%# "~/Images/" + Eval("EmpImage") %>' Height="180px" />      
  97.                                             <br />      
  98.                                             <asp:FileUpload ID="fu1" runat="server" />      
  99.                                         </td>      
  100.                                     </tr>      
  101.                                     <tr>      
  102.                                         <td>Employee Name</td>      
  103.                                         <td>      
  104.                                             <asp:TextBox ID="txtempname" runat="server" Text='<%# Eval("EmpName") %>'>      
  105.                                             </asp:TextBox>      
  106.                                         </td>      
  107.                                     </tr>      
  108.                                     <tr>      
  109.                                         <td>Employee EmailId</td>      
  110.                                         <td>      
  111.                                             <asp:TextBox ID="txtempmail" runat="server" Text='<%# Eval("EmpEmailId") %>'>      
  112.                                             </asp:TextBox>      
  113.                                         </td>      
  114.                                     </tr>      
  115.                                     <tr>      
  116.                                         <td>Employee Mobile Number</td>      
  117.                                         <td>      
  118.                                             <asp:TextBox ID="txtmbnum" runat="server" Text='<%# Eval("EmpMobileNum") %>'>      
  119.                                             </asp:TextBox>      
  120.                                         </td>      
  121.                                     </tr>      
  122.                                     <tr>      
  123.                                         <td colspan="3" style="text-align:left;">   
  124.                                             <asp:Button ID="btn3" runat="server" CommandName="update" Text="update" />   
  125.                                             <asp:Button ID="btn4" runat="server" CommandName="cancel" Text="Cancel" />      
  126.                                         </td>      
  127.                                     </tr>      
  128.                                 </table>      
  129.                             </EditItemTemplate>      
  130.                         </asp:DataList>      
  131.                     </div>      
  132.                 </form>      
  133.             </body>      
  134.         </html> 
Default.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.SqlClient;    
  8. using System.Data;    
  9. using System.Web.Configuration;    
  10.     
  11. public partial class _Default : System.Web.UI.Page    
  12. {  
  13.     SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["myconnection"].ConnectionString);    
  14.     protected void Page_Load(object sender, EventArgs e)    
  15.     {    
  16.         if (!IsPostBack)    
  17.         {    
  18.             Bind();    
  19.         }    
  20.     }    
  21.     public void Bind()    
  22.     {    
  23.         SqlCommand cmd = new SqlCommand("select * from Employee", con);    
  24.         SqlDataAdapter da = new SqlDataAdapter(cmd);    
  25.         DataSet ds = new DataSet();    
  26.         da.Fill(ds, "Employee");    
  27.         dl1.DataSource = ds.Tables[0];    
  28.         dl1.DataBind();    
  29.     }  
  30.     protected void dl1_EditCommand(object sender, DataListCommandEventArgs e)    
  31.     {    
  32.         dl1.EditItemIndex = e.Item.ItemIndex;    
  33.         Bind();  
  34.     }    
  35.     protected void dl1_CancelCommand(object sender, DataListCommandEventArgs e)    
  36.     {    
  37.         dl1.EditItemIndex = -1;    
  38.         Bind();    
  39.     }    
  40.     protected void dl1_updateCommand(object sender, DataListCommandEventArgs e)    
  41.     {    
  42.         int index = e.Item.ItemIndex;  
  43.         int empid = Convert.ToInt32(((TextBox)dl1.Items[index].FindControl("txtempid")).Text);    
  44.         string empname = ((TextBox)dl1.Items[index].FindControl("txtempname")).Text;    
  45.         string empmail = ((TextBox)dl1.Items[index].FindControl("txtempmail")).Text;    
  46.         long empmbnum = Convert.ToInt64(((TextBox)dl1.Items[index].FindControl("txtmbnum")).Text);    
  47.         FileUpload fu = (FileUpload)dl1.Items[index].FindControl("fu1");    
  48.        // to update image name in data base and image in server, If he selectted new Image  
  49.         if (fu.HasFile)    
  50.         {    
  51.             string filepath = System.IO.Path.Combine(Server.MapPath("~/Images/"), fu.FileName);    
  52.             fu.SaveAs(filepath);   
  53.             SqlCommand fcmd = new SqlCommand();    
  54.             fcmd.CommandText = "update employee set EmpImage='"+fu.FileName+"'";    
  55.             fcmd.Connection = con;  
  56.             con.Open();    
  57.             fcmd.ExecuteNonQuery();    
  58.             con.Close();    
  59.         }    
  60.         SqlCommand cmd = new SqlCommand("update Employee set EmpName = '" + empname + "',EmpEmailId='" + empmail + "',EmpMobileNum =" + empmbnum + " where EmpId = " + empid + "", con);    
  61.         con.Open();    
  62.         int i = cmd.ExecuteNonQuery();    
  63.         con.Close();    
  64.         if (i == 1)    
  65.         {    
  66.             Response.Write("<script>alert('Successfully updated')</script>");    
  67.             dl1.EditItemIndex = -1;    
  68.             Bind();    
  69.         }  
  70.     }    
  71.     protected void dl1_DeleteCommand(object sender, DataListCommandEventArgs e)    
  72.     {    
  73.         int index = e.Item.ItemIndex;    
  74.         Label empid;    
  75.         empid = (Label)dl1.Items[index].FindControl("lblempid");    
  76.     
  77.         SqlCommand cmd = new SqlCommand("delete from employee where EmpId = " + Convert.ToInt32(empid.Text) + "", con);    
  78.         con.Open();    
  79.         int res = cmd.ExecuteNonQuery();    
  80.         con.Close();    
  81.         if (res == 1)    
  82.         {    
  83.             Response.Write("<script>alert('Successfully deleted')</script>");    
  84.             Bind();    
  85.         }    
  86.     
  87.     }    
  88. }  

Recommended Ebook

ASP.NET GridView Control Pocket Guide

Download Now!
Similar Articles