ASP.NET DataList

The ASP.NET DataList control is a light weight server side control that works as a container for data items. It is used to display data into a list format to the web pages.

It displays data from the data source. The data source can be either a DataTable or a table from database.

Here, first, we are creating DataList that gets data from a DataTable. This example includes the following files.

ASP.NET DataList Example with DataTable

// DataListExample2.aspx

 <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”DataListExample2.aspx.cs”  Inherits=”DataListExample.DataListExample2″ %> <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”>     <title></title> </head> <body>     <form id=”form1″ runat=”server”>         <div>             <p>The DataList shows data of DataTable</p>         </div>         <asp:DataList ID=”DataList1″ runat=”server”>             <ItemTemplate>                 <table cellpadding=”2″ cellspacing=”0″ border=”1″ style=”width: 300px; height: 100px;  border: dashed 2px #04AFEF; background-color: #FFFFFF”>                     <tr>                         <td>                             <b>ID: </b><span class=”city”><%# Eval(“ID”) %></span><br />                             <b>Name: </b><span class=”postal”><%# Eval(“Name”) %></span><br />                             <b>Email: </b><span class=”country”><%# Eval(“Email”)%></span><br />                         </td>                     </tr>                 </table>             </ItemTemplate>         </asp:DataList>     </form> </body> </html> 

CodeBehind

// DataListExample2.aspx.cs

 using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DataListExample {     public partial class DataListExample2 : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             DataTable table = new DataTable();             table.Columns.Add(“ID”);             table.Columns.Add(“Name”);             table.Columns.Add(“Email”);             table.Rows.Add(“101”, “Sachin Kumar”, “sachin@example.com”);             table.Rows.Add(“102”, “Peter”, “peter@example.com”);             table.Rows.Add(“103”, “Ravi Kumar”, “ravi@example.com”);             table.Rows.Add(“104”, “Irfan”, “irfan@example.com”);             DataList1.DataSource = table;             DataList1.DataBind();            }     } } 

Output:

It produces the following output to the browser.

ASP Net Datalist 1

ASP.NET DataList Example with database

This example gets data from the database table and includes the following steps.

1) Add a Web Form

Add a web form to drag the DataList over it as we did in the following screen shot.

ASP Net Datalist 2

Select DataList from the data category of the toolbox.

ASP Net Datalist 3

Drag the DataList to the form. After dragging, it looks like the following.

ASP Net Datalist 4

Now, we need to configure database connection. Click on it and set new data source.

ASP Net Datalist 5

It will pop up a new window with various Data Sources. Select SQL database and click ok.

ASP Net Datalist 6

After selecting Data Source, now, we need to select data connection. But before proceeding further add connection string to the web.config file.

// web.config

 <connectionStrings>     <add name=”DefaultConnection” connectionString=”Data Source=(LocalDb)MSSQLLocalDB; AttachDbFilename=|DataDirectory|aspnet-AdoNetExample-20170712102014.mdf; Initial Catalog=aspnet-AdoNetExample-20170712102014;Integrated Security=True”       providerName=”System.Data.SqlClient” />     <add name=”StudentConnectionString”  connectionString=”Data Source=DESKTOP-EDFPJEL;Initial Catalog=Student;Integrated Security=True”       providerName=”System.Data.SqlClient” />   </connectionStrings> 

Data Source is the name of the connection that is required to connect SQL Server. It can be different for other computer systems.

ASP Net Datalist 7

After clicking next, it asks to configure select statement.

ASP Net Datalist 8

It allows us to select number of columns to fetch custom record. It also provides * option to select all columns records.

Now, test the configured query, is it working or not, as we did in the below screenshot.

ASP Net Datalist 9

After finishing configuration, our DataList looks like this:

ASP Net Datalist 10

This “DataListExample.aspx” file contains the following code.

 <%@ Page Language=”C#” AutoEventWireup=”true”  CodeBehind=”DataListExample.aspx.cs” Inherits=”AdoNetExample.DataListExample” %> <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”>     <title></title> </head> <body>     <form id=”form1″ runat=”server”>         <div>         </div>         <asp:DataList ID=”DataList1″ runat=”server” DataSourceID=”SqlDataSource1″>             <ItemTemplate>                 name:                 <asp:Label ID=”nameLabel” runat=”server” Text='<%# Eval(“name”) %>’ />                 <br />                 email:                 <asp:Label ID=”emailLabel” runat=”server” Text='<%# Eval(“email”) %>’ />                 <br />                 contact:                 <asp:Label ID=”contactLabel” runat=”server” Text='<%# Eval(“contact”) %>’ />                 <br /> <br />             </ItemTemplate>         </asp:DataList>         <asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$          ConnectionStrings:StudentConnectionString %>”  SelectCommand=”SELECT * FROM [student]”></asp:SqlDataSource>     </form> </body> </html> 

Output:

This application produces the following output.

ASP Net Datalist 11

Next TopicASP.NET DataGrid

ASP.Net DataList

ASP.NET DataList

ASP.NET DataList Example with DataTable

CodeBehind

ASP.NET DataList Example with database

1) Add a Web Form

Artificial Neural Network Tutorial

AutoCAD Polar Array

You may also like