ASP.Net DataList

ASP.Net DataList with asp.net tutorial, asp.net introduction, features, project, example, server controls, labels, textbox, button, hyperlink, radiobutton, calender, checkbox, fileupload, events handling, authentication, webforms model binding, html server control, compare validdator, range validator, validation summary, mvc introduction, mvc project, view, validation, entity framework, authentication etc.

<< Back to ASP

next → ← prev

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 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.

Select DataList from the data category of the toolbox.

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

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

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

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.

After clicking next, it asks to configure select statement.

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.

After finishing configuration, our DataList looks like this:

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.

Next TopicASP.NET DataGrid

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com