How can i render the multiple images from database?

[bilal788]

Hi i am newbie in asp.net i am having problem regarding rendering multiple images from database.
Here is my code for single image retreivation.
''''

Partial Public Class dspimg
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.ContentType = "image/jpg"
        Using dbcon As New SqlConnection("Data Source=localhost\sqlexpress;Initial Catalog=Employee;Integrated Security=True;")
            Dim id As Integer
            Dim sqlCom As New SqlCommand
            Integer.TryParse(Request.QueryString("ID"), id)
            sqlCom.Connection = dbcon
            sqlCom.CommandType = CommandType.Text
            sqlCom.CommandText = "SELECT img FROM PIC" + "WHERE id=@ImageID"
            sqlCom.Parameters.Add("@ImageID", SqlDbType.Int).Value = id
 
 
            ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
 
            Try
 
                dbcon.Open()
                Dim imgContents As Byte() = DirectCast(sqlCom.ExecuteScalar(), Byte())
 
                'Now that we have the image, writing it to the Response's Output Stream 
                Response.BinaryWrite(imgContents)
 
            Catch ex As Exception
                MsgBox(ex.Message)
                'Something went wrong connecting to the Database 
            Finally
                'Ensuring that the database connection is closed 
                'Even if something went wrong 
                dbcon.Close()
            End Try
        End Using
    End Sub

*Below is my database Script.

USE [Employee]
GO
/****** Object:  Table [dbo].[PIC]    Script Date: 12/05/2011 03:29:09 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[PIC](
    [id] [numeric](18, 0) NULL,
    [img] [image] NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

[bilal788]

Its my humble request to experts that kindly reply me.

[Frinavale]

You can't return multiple images to the browser because it won't know how to display them. You have to return one image at a time.

I would use a Repeater or a GridView for this.

For example, I would have this simple repeater in my page:

<asp:Repeater ID="imageDisplayer" runat="server">
    <ItemTemplate>
        <asp:Image ImageUrl='<%#Eval("ImageURL") %>' runat="server"/>
    </ItemTemplate>
</asp:Repeater>

This Repeater will use an Image Control for each row of data that it is bound to. That Image Control is bound to a column called "ImageURL" which contains the URL to the Image that the Image Control is going to display.


In my C# code for the page I would bind this repeater to the list of images.

Like this:

private System.Data.DataTable dataSource;
 
protected void Page_Load(object sender, EventArgs e)
{
    if (Session["dataSource"] == null)
    {
        dataSource = GenerateDataSource();
        Session["dataSource"] = dataSource;
    }
    else
    {
        dataSource = (System.Data.DataTable)Session["dataSource"];
    }
    this.Page.PreRender += new EventHandler(Page_PreRender);
}
 
void Page_PreRender(object sender, EventArgs e)
{
    imageDisplayer.DataSource = dataSource;
    imageDisplayer.DataBind();
}
 
private System.Data.DataTable GenerateDataSource()
{
//In here you want to retrieve all of the IDs of the
//images in your database instead of using file names
//you want to pass this ID to the aspx page that retrieves the
//individual image to display in the image control.
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.Add(new System.Data.DataColumn("ImageURL"));
    string[] filenames = { "1.png", "2.png", "3.png", "4.png", "5.png", "6.png" };
    foreach (string fileName in filenames)
    {
        System.Data.DataRow dr = dt.NewRow();
        dr[0] = "Images/" + fileName;
        dt.Rows.Add(dr);
    }
 
    return dt;
}

In your case you want the Image URL to point to the ASP.NET page that retrieves the image from the database. You want to add the ID of the image you want to display to the QueryString so that you can retrieve the image from your database with this ID in the ASPX page that retrieves the image for you.

-Frinny