ASP.NET - How to bind an image to a datalist control by retrieving it from the database?

Asked By Rohini Kuchadi on 19-Mar-13 05:20 AM

   in my application i wants an image to a datalist control.By retrieving image's path from the mysql my database, datatype of image is 'LongBlob'.

Here is the sorce code of .aspx page.

<%@ Page Title="" Language="C#" MasterPageFile="~/jsrmasterpage.master" AutoEventWireup="true" CodeFile="home.aspx.cs" Inherits="home" %>

<%-- Add content controls here --%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<h1>Project <span>Gallery</span></h1>         
             <div class="project_gall">  
                 <asp:DataList ID="DataList1" runat="server" CellPadding="6" CellSpacing="6" 
                     RepeatColumns="3" onitemcommand="DataList1_ItemCommand">
                  <table  style="border:none" >
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblprojectname" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "projectname") %>'></asp:Label>
                         <%-- <tr><td><asp:ImageButton ID="projectimgbtn" runat="server" width="150" border="0" CommandArgument='<%# DataBinder.Eval (Container.DataItem, "transactiontypeid") %>' CommandName="Details" height="120"  src='<%# DataBinder.Eval (Container.DataItem, "image") %>' />
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblimage" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "images") %>'></asp:Label>
                       <%-- <asp:Image ID="Image1" runat="server" 
         ImageUrl='<%# "insertimage.aspx?id=" + Eval("transactiontypeid") %>' />--%>
                        <%--<img src='<%# DataBinder.Eval(Container.DataItem, "images") %>' alt="" style="height:100px;width:100px;border:1px solid gray;"/>--%>
                         <%--<asp:Image ID="img" runat="server" ImageUrl='<%# Eval("images") %>' />--%>
                        <%--  <asp:Image ID="Image1" runat="server" Width="110px" Height="120px" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "images") %>' />--%>
                         <asp:Image ID="Image1" runat="server" Height="159px"  ImageUrl='<%# "img_handler.ashx?transactiontypeid="+ DataBinder.Eval(Container.DataItem,"transactiontypeid") %>'

                            Width="197px" />
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lbllocality" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "locality") %>'></asp:Label>
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblsaleprice" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "saleprice") %>'></asp:Label>
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblplans" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "plans") %>'></asp:Label>


Here is the code which i have written in .aspx.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data.MySqlClient;
using System.Data;
using System.Configuration;
using System.IO;

public partial class home : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        //MySqlConnection mysqlcon = new MySqlConnection(ConfigurationManager.ConnectionStrings["jsrconnection"].ConnectionString);
        if (!IsPostBack)


    public void BindDataList()
        // string variable to store the connection string  
        // retrieved from the connectionStrings section of web.config  
        string jsrcon = ConfigurationManager.ConnectionStrings["jsrconnection"].ConnectionString;


        // sql connection object  
        MySqlConnection mySqljsrConnection = new MySqlConnection(jsrcon);

        // sql command object initialized with select command text  
        MySqlCommand mySqlCommand = new MySqlCommand("select projectname, images, locality, saleprice, plans from transmaster", mySqljsrConnection);

        // check the connection state and open it accordingly.  
        if (mySqljsrConnection.State == ConnectionState.Closed)

        // Sql datareader object to read the stream of rows from SQL Server Database  
        MySqlDataReader myDataReader = mySqlCommand.ExecuteReader();

        // Pass the Sql DataReader object to the DataSource property  
        // of DataList control to render the list of items.  
        DataList1.DataSource = myDataReader;

        // close the Sql DataReader object  

        // check the connection state and close it accordingly.  
        if (mySqljsrConnection.State == ConnectionState.Open)

Here is the code which i have written in img_handler.ashx code file

<%@ WebHandler Language="C#" Class="img_handler" %>

using System;
using System.Web;
using MySql.Data.MySqlClient;
using System.Configuration;
using System.Data;

public class img_handler : IHttpHandler {
    public void ProcessRequest (HttpContext context) {

        string jsrcon = ConfigurationManager.ConnectionStrings["jsrconnection"].ConnectionString;
        string imageid = context.Request.QueryString["transactiontypeid"];
        MySqlConnection mycon = new MySqlConnection(jsrcon);
        MySqlCommand mycmd = new MySqlCommand("select images from transmaster where projectname='" + imageid + "' ", mycon);
        MySqlDataReader mydr = mycmd.ExecuteReader();
    public bool IsReusable {
        get {
            return false;


Kindly help me how to bind the image to a datalist control.I am saving images path in the database.How can i retrieve images path from the database and bind it to the datalist control.