June 10, 2021

Programmingempire

In this post on Display Images Using DataList Control, I will explain how to show images on a web page using a DataList control in ASP.NET.

An Example to Display Images Using DataList Control

The following example demonstrates the use of a DataList control. Basically, in this example, we use a Database table name Flowers that contains the name, description, and image name of flowers in each row. Also, the primary key field is fid that represents the flower’s id.

WebForm1.aspx

For the most part, we create DataList control in the ASPX file. However, data binding is performed in the code behind. Since the DataList control is created with templates, we define the templates one by one.

Specifying Properties of DataList Control

To begin with, first, create a Caption that is displayed at the top of the list. After that, define a HeaderTemplate that shows the header text.

In the same way, we define an Item template. Now that, we have four fields to display. Therefore, we use the Label controls to display the text data and an Image control to show the image.

Further, we can use the style properties for the DataList. Accordingly, we use the ItemStyle and AlternatingItemStyle properties that improve the appearance of DataList control. Also, the DataKeyField property is used to specify the primary key used.

The Eval() Method

As an illustration, the Eval() method is used in data-binding expressions. Basically, this method is used to retrieve the value of the corresponding data field. As a matter of fact, the Eval() function defines one-way data binding. Thus, it brings data from the database table to a cell of DataList control and not vice versa.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DataListWithImages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" RepeatColumns="3"
                 RepeatDirection="Horizontal" RepeatLayout="Table" DataKeyField="fid"
                 CellSpacing="10" CellPadding="20" Caption="Data Retrieved from Flowers Database"
                 Font-Size="35" Font-Bold="true" BackColor="#ff9999" ShowHeader="true"
                 BorderColor="DarkOrange" BorderStyle="Inset" BorderWidth="6">

                <HeaderTemplate>Flowers Data</HeaderTemplate>
                <ItemStyle BackColor="LightCoral" BorderColor="DarkMagenta" BorderStyle="Outset" 
                    BorderWidth="4" Font-Size="20" ForeColor="DarkRed" HorizontalAlign="Center" />
                <AlternatingItemStyle BackColor="LightGreen" BorderColor="DarkGreen" BorderStyle="Outset" 
                    BorderWidth="4" Font-Size="20" ForeColor="DarkOliveGreen" HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("fid") %>'></asp:Label>
                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("fname") %>'></asp:Label><br />
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("fpath") %>'
                         Height="150px" Width="170px"/><br />
                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("description") %>'></asp:Label>
                </ItemTemplate>

            </asp:DataList>
        </div>
    </form>
</body>
</html>

Binding Data to the DataList

WebForm1.aspx.cs

The following code shows the data binding. Specifically, we use the disconnected approach to retrieve the data.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections;
namespace DataListWithImages
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SqlConnection con;
        SqlDataAdapter da;
        DataSet ds;
        public void Connect()
        {
            con = new SqlConnection(@"Data Source=(LocalDB)MSSQLLocalDB;AttachDbFilename=C:UsersKAVITADocumentsd1.mdf;Integrated Security=True;Connect Timeout=30");
            con.Open();
            da = new SqlDataAdapter("select * from Flowers", con);
            ds = new DataSet();
            da.Fill(ds, "Flowers");
        }

        public void BindList()
        {
            Connect();
            DataList1.DataSource = ds;
            DataList1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            BindList();
        }
    }
}

Output

The following figure shows the output of execution. As can be seen in the output, the DataList control shows the data in a Table format in horizontal manner with three columns per row.

**An Example to Display Images Using DataList Control**

The following figure shows the database table from which the data is retrieved.

To summarize, a DataList control can also display images along with other data fields in a cell. Basically, a data-bound control like DataList displays data in its cells which is fetched from a database table. Hence, in the database table, we can also specify the name of an image. As soon as the data binding is done, a path is created and that path is used as the value of the ImageUrl property. Therefore, Image control specified in an ItemTemplate shows the corresponding image.

Programmingempire

An Example to Display Images Using DataList Control

Specifying Properties of DataList Control

The Eval() Method

Binding Data to the DataList

Further Reading

You may also like...

Creating a DataTable from a DataReader in ASP.NET

Examples of List Controls in ASP.NET

Properties and Methods of DataList Control in ASP.NET