Saturday, 16 April 2011

Display Images in Datalist Controll Images From Database

Hi this is Basic Idea  to Show Images in Datalist Controll ,Here Images are stored in Database as in Byte Format , Now i want to Display Images  in Datalist  one Simple Method is Using Generic Handlers we can Convert the Images from Bytes to Image Format Using memoryStream.There are So many ways to Display Images but i'm used this Simple method.


InForm:


<asp:DataList ID="dlImages" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%"
 CellPadding="2" CellSpacing="0" >
 <ItemTemplate>
 <table><tr><td>
     <asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton1_Click" ImageUrl='<%#"~/ProductMaster.ashx?ProductMasterID="+Eval("ProductMasterID") %>' style="border:1px solid gray;" />
  </td></tr>
  <tr><td>Name:
   <asp:Label ID="Label1" runat ="server"
    Text=' <%# Eval("ProductName") %>'></asp:Label>
 </td></tr>
 <tr><td>MRP Rs:
   <asp:Label ID="Label2" runat ="server"
    Text=' <%# Eval("UnitPrice")%>' ForeColor="Red" ></asp:Label>
 </td></tr>
 <tr><td>
   <asp:Label ID="lblEmpCode" runat ="server"
    Text=' <%# Eval("Description") %>'></asp:Label>
 </td></tr>
 </table>
 </ItemTemplate>
</asp:DataList>



In C#:

Here write Your Code to Get the Data from database and Bind it to the DataList



In Handler (.ashx):


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

using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Collections.Specialized;

public class ProductMaster : IHttpHandler
{
    ConnectToDB condb = new ConnectToDB();
    public void ProcessRequest (HttpContext context)
    {
        string id = context.Request.QueryString["ProductMasterID"];
        if (id != null)
        {

            MemoryStream memoryStream = new MemoryStream();

            ConnectToDB condb = new ConnectToDB();

            condb.sqlquery = "Select  Photo  from ProductMaster  where ProductMasterID='" + id + "'";
            DataSet dsnew = new DataSet();
            dsnew = condb.ExecuteQuery();

            if (dsnew.Tables[0].Rows.Count > 0)
            {
                if (dsnew.Tables[0].Rows[0][0].ToString() != "")
                {
                    byte[] file = (byte[])dsnew.Tables[0].Rows[0][0];
                    memoryStream.Write(file, 0, file.Length);
                    context.Response.Buffer = true;
                    if (file.Length > 0)
                    {
                        context.Response.BinaryWrite(file);
                        memoryStream.Dispose();
                    }
                }
                else
                {

                }
            }
            else
            {

            }
        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}



OutPut:

Conclusion: 

Here , the Above Image contains only one Image i snipped from My Actual Output.

8 comments:

  1. Thank you. i am not able to display images in datalist (from database). this article solved my problem thank you.

    ReplyDelete
  2. very gud article..........

    ReplyDelete
  3. how to Get the image from database and Bind it to the DataList..

    ReplyDelete
  4. Hi,
    In the Above Example i Explained display Images in Datalist, The Image Coming from DataBase in Byte Format not a Physical Image Path, in Based on WebHandler u will bind the Binary Image to DataList Image controlles.

    ReplyDelete
  5. Could someone explain how to extract images of image datatype from database and bind it to a datalist?

    ReplyDelete
  6. Hello,
    Instead of Using Image dataType in Sql Server, Use varbinary(max) for Storing Large amount of Bytes(Big Images also).

    When u are Fetching the Data from SQl server assign the Column data to Byte and Convert that to Memory Stream and assign to Imageurl Using handler in the Above code it is Clearly Mentioned.



    ReplyDelete
  7. Thanks for your reply but I made a mistake of using image datatype and I have already populated my database using image datatype. That's some 100 rows and i don't want to create a new database. So if you could provide the logic for binding image datatype to DataList it would be much appreciated. From now onwards i'll use varbinary datatype.

    ReplyDelete