ASP.NET

Display Images Using DataList Control

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
An Example to Display Images Using DataList Control

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

Flowers Database Table
Flowers Database Table

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.


Further Reading

Parameter and ParameterCollection in ADO.NET

Database Manipulation Using DataGrid

Example of Button and Link Button Control in ASP.NET

Example of Chart Control in ASP.NET

Creating a DataTable from a DataReader in ASP.NET

Deleting a Record using DataGrid Control in ASP.NET

Edit a Record Using DataGrid Control in ASP.NET

Insert a Record Using ItemCommand Event in DataGrid

CRUD Operations with DataGrid in ASP.NET

Creating Columns in a DataGrid Control

XML Documents and DataSet in ASP.NET

Code Render Block in ASP.NET

ASP.NET Core Features and Advantages

Display Images Using DataList Control

Adding Images Using Image Control

Creating a Group of Radio Buttons Using RadioButtonList Control

Example of Button Control in ASP.NET

Using MD5 Hash Algorithm

ItemDataBound Event in DataList

More Features of DataList in ASP.NET

A Simple Example of Using a DataList Control in ASP.NET

Properties and Methods of DataList Control in ASP.NET

ASP.NET Practice Exercise

Exploring DataList Control in ASP.NET

Custom Validator Control in ASP.NET

Validation Summary Control in ASP.NET

Validation Controls Examples – RequiredFieldValidator, CompareValidator, and RangeValidator

An Example of Data Binding with RadioButtonList Control

Binding Data to Web Control in ADO.NET

Examples of AdRotator Control in ASP.NET

Examples of Validation Controls in ASP.NET

Overview of MVC architecture in ASP.NET

programmingempire

You may also like...