[2005] Want to display several images from DB

I worked out this code in another thread (thanks Mendhak!)

Code:

---

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dcn As New SqlConnection
        dcn.ConnectionString = "Server=fps-lap-sz\sqlexpress; Initial Catalog=Stufiles; Integrated Security=SSPI"
        Try
            dcn.Open()
            Dim drc As New SqlCommand
            drc.Connection = dcn
            drc.CommandType = Data.CommandType.StoredProcedure
            drc.CommandText = "GetStuPhoto_P"
            drc.Parameters.Add(New SqlParameter("@StuId", Data.SqlDbType.VarChar, 255, Data.ParameterDirection.Input _
                                        , False, 0, 0, "", Data.DataRowVersion.Default, Request.QueryString("imageid")))
            Dim bytArrayContent As Byte() = DirectCast(drc.ExecuteScalar, Byte())
            'bytArrayContent = CType(dr.Item("ImageField"), Byte())
            Response.ContentType = "image/jpeg"
            Response.OutputStream.Write(bytArrayContent, 0, bytArrayContent.Length)
            Response.End()
            txtMessage.Text = "Student Displayed!"
        Catch ex As Exception
            txtMessage.Text = "Student Not Found!"
        End Try

---

Just to prove that I could display images from a database.

Now I want to change it so that the stored procedure GetStuPhoto_P returns many images.

I would like to display several horizontally on the page (like 3 maybe) and then repeat each row until all images are show.

With maybe the student name under each image.

So I started changing this to have an IMAGE CONTROL - thinking that would be needed. But I've got no idea how to bind that to a datareader - there is no DATASOURCE property.

And the REPEATER info in the VS help files is not too clear (I've never done web/asp work - so this is all new to me).

Any help or direction would be appreciated.

The GetImages page from the previous thread writes directly to the Response stream. It is not a Web Page as you would normally think of one. IE it doesn't have any controls/GUI, think of it more as calling a Function.

If your website has a page called ShowImages the ImageURL properties of all ASP Image Controls would call the GetImages page. For example, if you had 3 image controls, the ImageURL properties might be ~/GetImages.aspx?imageid=1, ~/GetImages.aspx?imageid=2, ~/GetImages.aspx?imageid=3.

However, it is only until ShowImages.aspx is being downloaded does the web browser call the GetImages.aspx page. In the above scenario it is called 3 times.

In order to use GetImages with a Repeater or DataList in the ShowImages page, you could create a datasource that contains just a list of Student id's. Once the DataBind method is called the ItemCreated and ItemDataBound events are fired for each Id in the list. At this point ASP.NET dynamically creates and adds the controls you have specified in then ItemTemplate section. In the ItemDataBound method you get a reference to this control and then set the ImageURL property accordingly.

Code:

---

   
'ShowImages.aspx.vb code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'load some student ids
        Dim pics As New System.Collections.ArrayList
        pics.Add(1)
        pics.Add(2)
        pics.Add(3)

        Repeater1.DataSource = pics
        Repeater1.DataBind()

    End Sub


    Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
        Dim img As System.Web.UI.WebControls.Image

        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            img = DirectCast(e.Item.FindControl("image1"), System.Web.UI.WebControls.Image)
            img.ImageUrl = "~/GetImages.aspx?imageid=" & e.Item.DataItem.ToString
        End If
    End Sub

'ShowImages.aspx code
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" />
            </ItemTemplate>
        </asp:Repeater>

---

Hope this helps (and makes some sense).

Yes - that makes some sense (80% maybe ;) )

How does what you describe use the GetStuPhoto_T stored proc?

Could I at least return TOP 3 ... Where STUID>lastid processed so that I visit the DB less often in the getimages.aspx?

And does my showing the student name under the image control also make sense with what you have described?

Quote:

---

Originally Posted by szlamany

How does what you describe use the GetStuPhoto_T stored proc?

---

It doesn't, not directly. ShowImages.aspx will have a repeater on it. It will call a new stored procedure that does something like

SELECT TOP 3 ImageID FROM Students

You then bind the repeater control. The repeater control contains an image control. For each row returned from the new stored procedure, one instance of the image control will be rendered to the page. You will specify the URL of the images for each instance by looking at the ID and doing something like

theImg.ImageUrl = "GetImage.aspx?imageid=" & intImageID.ToString()

Quote:

---

Could I at least return TOP 3 ... Where STUID>lastid processed so that I visit the DB less often in the getimages.aspx?

---

Unfortunately, no. This is a 'side effect' of storing images in a database, when it comes to displaying it, you can do one call at a time. So if you show 20 images, there will be 20 calls. However, you're in a little luck, because there is something known as data caching - in GetImage.aspx you can cache the byte array you got from the database for say 2 hours so that every request to a given ID gives that correct Byte Array. That's for afterwards, you need to do the repeater right now.

Quote:

---

And does my showing the student name under the image control also make sense with what you have described?

---

Modify your new stored procedure to return the id and the student name. In the Repeater control's ItemDataBound event, you can write anything you want to each instance.

So in your case you modify the ItemTemplate first

Code:

---

<ItemTemplate>
                <asp:Image ID="Image1" runat="server" /><br /><asp:Label id="StudentName" runat="server"></asp:Label>
</ItemTemplate>

---

Then you modify the ItemDataBound event.

Code:

---

Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
        Dim img As System.Web.UI.WebControls.Image
Dim lbl As Label

        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            img = DirectCast(e.Item.FindControl("image1"), System.Web.UI.WebControls.Image)
lbl = DirectCast(e.Item.FindControl("StudentName"),Label)
            img.ImageUrl = "~/GetImages.aspx?imageid=" & CType(e.Item.DataItem,DataRow)("imageid").ToString()
lbl.Text = CType(e.Item.DataItem,DataRow)("studentname").ToString()
        End If
    End Sub

---

Wow - this is so different then VB that I'm just lost...

I totally understand how the "image" will link to the "page" that feeds the image to it.

But I cannot even place a repeater on the .aspx page and follow what to do from there. It says "switch to source view to edit the control's templates" - I can't even find out how to do that.

I can't work the IDE properly - it's driving me nuts.

Any help would be greatly appreciated.

At the bottom of the tab that displays your page are two buttons Design and Source.

Ok - I looked down and found the SOURCE view button...

Are you two guys suggesting different methods to do this?

Your REPEATER stuff looks different.

At any rate - let me clarify first - so that we don't all waste our time.

I was hoping ask the user for a GRADE or HOMEROOM or HOUSE - for instance.

Then have all the student images for that WHERE clause come back.

That should only be one visit to the database.

But I guess since the IMAGEURL has to specify the ID - then I cannot actually bring all the images in one shot.

So I think what BRUCEVDE was doing was loading up student id's into an array list. Does this PERSIST? Seems these webpages are just firing and going away - isn't that correct.

I just moved the logic for the images to a GETIMAGE page - and put three image controls on the SHOWIMAGE page.

For testing I did this:

Code:

---

Partial Class showimage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        imgStudent1.ImageUrl = "~/getimage.aspx?imageid=222"
        imgStudent2.ImageUrl = "~/getimage.aspx?imageid=223"
        imgStudent3.ImageUrl = "~/getimage.aspx?imageid=224"
    End Sub
End Class

---

And it really does call the getimage.aspx and returns two images (the third is intentionally passed as a bad id # - it displayed nothing in that image control.

Quote:

---

So I think what BRUCEVDE was doing was loading up student id's into an array list.

---

I used the ArrayList as an example. In .NET you have many options when binding to a DataSource property. Datasets, Custom Business Objects, Arrays, Collections etc... The Array does not persist.

Quote:

---

Seems these webpages are just firing and going away - isn't that correct.

---

Yes. Basically once the IIS sends the page to the browser everything gets deleted. IIS will automatically do some caching and there are programming options to cache different items (like datasets).

Our Repeater code is essentially the same. Mendhak showed you how to include a Label control for the caption.

Welcome to Web programming...

Ok - so I want three image controls - side by side.

I want to repeat all three. Row after row of these...

Do I do them separately and hope they role to the next row on three?

Or do I hide some control somewhere on the page that remembers what column to drop an image into?

Ok - I got a bit further

Code:

---

Imports System.Data.SqlClient

Partial Class showimage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dcn As New SqlConnection
        Dim drc As New SqlCommand
        Dim dr As SqlDataReader

        dcn.ConnectionString = "Server=fps-lap-sz\sqlexpress; Initial Catalog=Stufiles; Integrated Security=SSPI"
        'dcn.ConnectionString = "Server=FPSSQL05; Initial Catalog=Stufiles; Integrated Security=SSPI"
        Try
            dcn.Open()
            drc.Connection = dcn
            drc.CommandType = Data.CommandType.Text
            drc.CommandText = "Select Top 5 StuId From StuPhoto_T"
            dr = drc.ExecuteReader
        Catch ex As Exception
            Throw New HttpException(404, "Student Not Found!")
        End Try


        repeater1.DataSource = dr
        repeater1.DataBind()
    End Sub

    Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles repeater1.ItemDataBound
        Dim img As System.Web.UI.WebControls.Image

        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            img = DirectCast(e.Item.FindControl("imgStudent1"), System.Web.UI.WebControls.Image)
            img.ImageUrl = "~/GetImage.aspx?imageid=" & e.Item.DataItem.ToString

        End If
    End Sub

End Class

---

I'm just selecting the top 5 student id's from the photo table.

I bind this DATAREADER to the REPEATER.

I get 5 rows repeated - why the same student id in each one??

I'm guessing I need to CTYPE the DATAITEM

But when I try DATAROW it's not defined

img.ImageUrl = "~/GetImage.aspx?imageid=" & CType(e.Item.DataItem.ToString, datarow)("StuId").tostring

In this case e.Item.DataItem is a DBDataRecord object (ie a single record) and it's ToString method would return "System.Data.Common.DbDataRecord". You would use DataRow if the control is bound to a DataTable.

Check your stored procedure because the following statement is incorrect.

img.ImageUrl = "~/GetImage.aspx?imageid=" & e.Item.DataItem.ToString

You would end up with

~/GetImage.aspx?imageid=System.Data.Common.DbDataRecord

Code:

---

    Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim img As System.Web.UI.WebControls.Image
            Dim rec As System.Data.Common.DbDataRecord
            rec = e.Item.DataItem

            img = DirectCast(e.Item.FindControl("Image1"), System.Web.UI.WebControls.Image)
            img.ImageUrl = "~/GetImage.aspx?imageid=" & rec.GetInt32(0).ToString

        End If
    End Sub

---

Quote:

---

Or do I hide some control somewhere on the page that remembers what column to drop an image into?

---

You might want to switch to a DataList control which is similar to the Repeater control. It has properties which allow you to "repeat" the controls Horizontally X number of times.

I got this working nicely - here's what I did

Code:

---

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dcn As New SqlConnection
        Dim drc As New SqlCommand
        Dim dr As SqlDataReader

        dcn.ConnectionString = "Server=fps-lap-sz\sqlexpress; Initial Catalog=Stufiles; Integrated Security=SSPI"
        'dcn.ConnectionString = "Server=FPSSQL05; Initial Catalog=Stufiles; Integrated Security=SSPI"
        Try
            dcn.Open()
            drc.Connection = dcn
            drc.CommandType = Data.CommandType.Text
            drc.CommandText = "Select AV.StuId From ActiveStudent_V AV Left Join Student_T ST on ST.StuId=AV.StuId" _
                                    & " Where AV.Yr=2008 and AV.Bldg=30 and AV.Grade='12'" _
                                    & " Order by ST.Gender, ST.StuName"
            dr = drc.ExecuteReader
        Catch ex As Exception
            Throw New HttpException(404, "Student Information not Found!")
        End Try

        Dim strL1 As String = ""
        Dim lngL1 As Long = 0

        Dim pics As New System.Collections.ArrayList

        Do While dr.Read
            If strL1 <> "" Then strL1 = strL1 & "~"
            strL1 = strL1 & dr(0).ToString
            lngL1 = lngL1 + 1
            If lngL1 = 3 Then
                pics.Add(strL1)
                strL1 = ""
                lngL1 = 0
            End If
        Loop

        If lngL1 <> 0 Then pics.Add(strL1)

        dr.Close()
        drc.Dispose()
        dcn.Close()
        dcn.Dispose()

        repeater1.DataSource = pics
        repeater1.DataBind()
    End Sub

---

I built up 3 "ids" at a time and loaded them into an arraylist - then I bound the arraylist to the repeater.

Code:

---

    Protected Sub Repeater1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles repeater1.ItemDataBound
        Dim img As System.Web.UI.WebControls.Image
        Dim txt As System.Web.UI.WebControls.TextBox

        Dim strl1 As String = e.Item.DataItem.ToString

        Dim lstId() As String = strl1.ToString.Split("~")

        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            img = DirectCast(e.Item.FindControl("imgStudent1"), System.Web.UI.WebControls.Image)
            txt = DirectCast(e.Item.FindControl("textbox1"), System.Web.UI.WebControls.TextBox)
            If lstId.Length >= 1 Then
                img.ImageUrl = "~/GetImage.aspx?imageid=" & lstId(0)
                txt.Text = "Student Id " & lstId(0)
            Else
                img.Visible = False
                txt.Visible = False
            End If

            img = DirectCast(e.Item.FindControl("imgStudent2"), System.Web.UI.WebControls.Image)
            txt = DirectCast(e.Item.FindControl("textbox2"), System.Web.UI.WebControls.TextBox)
            If lstId.Length >= 2 Then
                img.ImageUrl = "~/GetImage.aspx?imageid=" & lstId(1)
                txt.Text = "Student Id " & lstId(1)
            Else
                img.Visible = False
                txt.Visible = False
            End If

            img = DirectCast(e.Item.FindControl("imgStudent3"), System.Web.UI.WebControls.Image)
            txt = DirectCast(e.Item.FindControl("textbox3"), System.Web.UI.WebControls.TextBox)
            If lstId.Length >= 3 Then
                img.ImageUrl = "~/GetImage.aspx?imageid=" & lstId(2)
                txt.Text = "Student Id " & lstId(2)
            Else
                img.Visible = False
                txt.Visible = False
            End If

        End If
    End Sub

---

Then I split up those id's in the repeater and processed each one - nicely cleaning up the last row if there was not 3 id's.

How does this all look?

Am I breaking any webby rules??

I'm wondering, why are you having to explicitly hide your images in the last row? I don't think you should really need to. Show us the code of your repeater. That'll be the stuff in the <asp:repeater> tags.

This is what I have

Code:

---

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;&nbsp;<br />
        <asp:Repeater ID="repeater1" runat="server">
            <ItemTemplate>
                <asp:Image ID="imgStudent1" runat="server" Height="273px" Width="211px" />
                <asp:Image ID="imgStudent2" runat="server" Height="273px" Width="211px" />
                <asp:Image ID="imgStudent3" runat="server" Height="273px" Width="211px" /><br />
                <asp:TextBox ID="TextBox1" runat="server" Width="206px"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server" Width="206px"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server" Width="206px"></asp:TextBox></div>
            </ItemTemplate>
        </asp:Repeater>
    </form>
</body>
</html>

---

I don't repeat a single image box - I repeat a row-of-3-image-boxes.

Before I was hiding the image/textboxes the last row - if it had 2 students - would show an empty image box with that silly [X] symbol in the upper-left.

btw - what's with the poor placement of my DIV's - I must of broke something. What does a DIV do anyway???

Oh, you went the other way round. You could have done this using the Repeater's REPEATDIRECTION property and REPEATCOLUMNS property.

You can set RepeatDirection to Horizontal and RepeatColumns to 2.

Code:

---

<asp:Repeater ID="repeater1" runat="server" RepeatDirection="Horizontal" RepeatColumns="2"> 
....

---

Then, in the ItemTemplate, just have one image and one textbox.

Good to know - thanks!

I was very concerned about spacing and size and width - since ultimately the admin folks at the schools are going to print these to paper.

But I guess if it was repeating 3 across it would be the same...

I kind of like the fact that I'm reading the entire list of id's into an ARRAYLIST and then closing the reader, command and connection immediately - before starting the calls to GETIMAGE.ASPX.

That satisfies the database half of my brain (might be more like 95% ;)

DIVs... hmm, you may have just cracked open a can of worm-hornest hybrids, web developers often argue (and never agree) on how the HTML should be created for any given thing.

HTML markup has several tags and it is considered 'proper' to use the right markup for corresponding content being displayed.

A <div> usually acts as a default content unit, but it's not always necessary, as you can use <table> to represent data.

I see what you're doing in your repeater, you're having to insert div tags to get it to move to the next line. Since it seems to be that you're displaying data (an image and corresponding text) then you can actually use tables. But in the end, since this is your first asp.net page, it's best you just get it working the way you want. :)