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
Hi 

   in my application i wants an image to a datalist control.By retrieving image's path from the mysql database.in 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">
                  <ItemTemplate> 
                  <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>
                        </td></tr>
                         <%-- <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>
                        </td></tr>--%>
                        <tr><td>
                       <%-- <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" />
                        </td></tr>
                          
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lbllocality" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "locality") %>'></asp:Label>
                        </td></tr>
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblsaleprice" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "saleprice") %>'></asp:Label>
                        </td></tr>
                        <tr><td valign="top">
                        <asp:Label Font-Bold="true" Font-Size="12px" ID="lblplans" runat="server"  Text='<%# DataBinder.Eval (Container.DataItem, "plans") %>'></asp:Label>
                        </td></tr></table>
</ItemList></DataList></asp:Content>

-------------------------------------------------------------------------------------------------------------------------------------

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)
        {
            BindDataList();
        }


    }


    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)
            mySqljsrConnection.Open();


        // 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;
        DataList1.DataBind();


        // close the Sql DataReader object  
        myDataReader.Close();


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

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);
        mycon.Open();
        MySqlCommand mycmd = new MySqlCommand("select images from transmaster where projectname='" + imageid + "' ", mycon);
        MySqlDataReader mydr = mycmd.ExecuteReader();
        mydr.Read();
        context.Response.BinaryWrite((Byte[])mydr[0]);
        mycon.Close();
        context.Response.End();
     
    }
 
    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.