Hi,

I am currently creating a .ascx file to make my own user control which will display images and works something like a dropdownlist. When user select the image, the selected image will be selected just like the dropdownlist. I will create the <input type="image"> for each image file in the specified folder. Which makes my user control dynamic.

I have 2 labels called: lblAll and lblDisplay. lblDisplay: Shows the selected image and lblAll: shows the rest of the remaining images. The <input type="image"> will be placed inside the lblAll and lblDisplay. I have used the <div> tags to expand and collaspe the labels accordingly.

The reason i decided to use <input type="image"> is because i would like a postback so that i can update the newly selected image.

My problem: How am i supposed to know which <input type="image"> was clicked/selected during postback? Thanks

Here's how I'd do it:
ASCX Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageSelect.ascx.cs" Inherits="ImageSelect" %>
<div>
 Selected Image:
 <br />
 <asp:Image ID="imgSelected" runat="server" /><br />
 <br />
 All Images:<br />
 <asp:Repeater ID="repImages" runat="server" OnItemDataBound="repImages_ItemDataBound">
  <ItemTemplate>
   <asp:ImageButton runat="server" ID="imgItem" OnClick="imgItem_Click" />
   <br />
  </ItemTemplate>
 </asp:Repeater>
</div>

Code behind:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class ImageSelect: System.Web.UI.UserControl
{
 protected void Page_Load(object sender, EventArgs e)
 {
  // Fill the repeater with the images. Replace the directory name, obviously.
  DirectoryInfo dirInfo = new DirectoryInfo("C:\\images\\");
  repImages.DataSource = dirInfo.GetFiles("*.*");
  repImages.DataBind();
 }
 protected void repImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
 {
  // As each item is added to the repeater, set it's URL to the name of the current file
  // (Can't use <%# DataBinder.Eval... %> in the ASCX code since it's a server control)
  RepeaterItem Item = e.Item;
  if ((Item.ItemType == ListItemType.Item) || (Item.ItemType == ListItemType.AlternatingItem))
  {
   Image MyImage = (Image)Item.FindControl("imgItem");
   System.IO.FileInfo MyFileInfo = (System.IO.FileInfo)Item.DataItem;
   MyImage.ImageUrl = "~/images/" + MyFileInfo.Name;
   // You can set any of the other attributes for the ImageButton control here (ALT text, etc)
  }
 }
 protected void imgItem_Click(object sender, ImageClickEventArgs e)
 {
  // Now we can use the sender parameter to access the individual control. It just needs to be cast to an ImageButton
  imgSelected.ImageUrl = ((ImageButton)sender).ImageUrl;
 }
}

(Hope I made my 1000th post a good one!!)

Wow! Your 1000th post is excellent! Well, i managed to complete it, however it is not as efficient as yours. I dont even know what is the use of asp:repeater lol. Thank you for taking your time to help me. I may consider switching to yours if i have the time, because im up to my neck with assignments.

Hopefully, you wont find my coding too simple for you. Actually, i kind of cheated a little. Lol ...

Client-Side Coding

<style>
.applyBorder {
	BORDER-RIGHT: blue 0.2cm solid; BORDER-TOP: blue 0.2cm solid; BORDER-LEFT: blue 0.2cm solid; BORDER-BOTTOM: blue 0.2cm solid
}
.removeBorder {
	BORDER-RIGHT: gainsboro 0.2cm solid; BORDER-TOP: gainsboro 0.2cm solid; BORDER-LEFT: gainsboro 0.2cm solid; BORDER-BOTTOM: gainsboro 0.2cm solid
}

.hidden{
display: none;
}
</style>

<script>
  function show(name,s)
  {
   
    if(s==true){
    window.document.getElementById(name).style.display = 'block';
    window.document.getElementById(name+1).style.display = 'none';
    }else{
    window.document.getElementById(name).style.display = 'none';
    window.document.getElementById(name+1).style.display = 'block';
    }
  }
</script>

<script language="javascript">
function Btn_onClick(){
var elements = window.document.getElementsByTagName("input");
var lbl;
var lblId=new String("");
var index=new Number(0);

for(index=0;index<=elements.length-1;index++){
	if(elements[index].id.split("_")[2]=="txtURL"){
	elements[index].value=window.event.srcElement.id;
	//window.alert(elements[index].value);
		}//end if
	}//end for
}//end function

</script>
<asp:label id="lblDisplay" Runat="server"></asp:label>

<div id='more' style="DISPLAY:none">
	<asp:label id="lblAll" runat="server"></asp:label>
	<a href="#" id="link2" name="link2" onClick="show('more', false)">Close</a>
</div>
<asp:TEXTBOX ID="txtURL" Runat="server" CssClass="hidden"></asp:TEXTBOX>

 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here

        If Page.IsPostBack = False Then
            getImage()
        Else
            lblDisplay.Text = ""
            lblAll.Text = ""
            getImage(txtURL.Text)
        End If
    End Sub

    Public ReadOnly Property getSelectedURL()
        Get
            Return txtURL.Text
        End Get
    End Property

    Public ReadOnly Property staffId()
        Get
            Return txtURL.Text.Split(".")(0)
        End Get
    End Property

    Public Property folderPath() As String
        Get
            Return strfolderPath
        End Get
        Set(ByVal Value As String)
            strfolderPath = Value
        End Set
    End Property

    Public Event folderDoNotExist(ByVal errorMsg As String)

    Private Sub getImage(Optional ByVal selectedImgURL As String = "")
        Dim count As Short
        Dim objFSO
        Dim firstImg As Boolean = False
        objFSO = Server.CreateObject("Scripting.FileSystemObject")

        'Get the folder object associated with the directory
        Dim objFolder
        'Dim imgPath As String = "F:\DIT\Year 3\BRCOM\Assignment\Web Project\BRCOM Assignment\Images"

        'Dim imgPath As String = "D:\DIT\Year 3\BRCOM\Assignment\Web Project\BRCOM Assignment\Images"
        Dim objFile
        Dim imgUrl As String
        If objFSO.FolderExists(strfolderPath) = True Then
            objFolder = objFSO.GetFolder(strfolderPath)
            'Loop through the Files collection
            For Each objFile In objFolder.Files
                If (LCase(Right(objFile.Name, 4)) = ".jpg" Or LCase(Right(objFile.Name, 4)) = ".gif") Then
                    'Display selected image

                    If (selectedImgURL <> "") Then
                        If (selectedImgURL <> objFile.Name) Then
                            lblAll.Text &= "<input type=""Image"" name=""imgBtn"" id=""" & objFile.Name & """ onclick=""Btn_onClick()"" src=Images/" & objFile.Name & _
                            " class=""removeBorder"" onmouseover=""this.className='applyBorder'"" onmouseout=""this.className='removeBorder'"" /><br><br>"
                        Else
                            lblDisplay.Text &= "<input type=""Image"" name=""imgBtn"" id=""" & objFile.Name & """ onclick=""Btn_onClick()"" src=Images/" & selectedImgURL & _
                            " class=""removeBorder"" onmouseover=""this.className='applyBorder'"" onmouseout=""this.className='removeBorder'"" />"
                            'create <div> tags to allow collaspe and expand
                            lblDisplay.Text &= "<div id=""more1"" style=""DISPLAY: block""><A id=""link1"" onclick=""show('more',true)"" href=""#"" name=""link1"">More</A></div><br><br>"
                        End If
                    Else
                        'load images for the first time
                        If (firstImg = False) Then
                            lblDisplay.Text &= "<input type=""Image"" name=""imgBtn"" id=""" & objFile.Name & """ onclick=""Btn_onClick()"" src=Images/" & objFile.Name & _
                            " class=""removeBorder"" onmouseover=""this.className='applyBorder'"" onmouseout=""this.className='removeBorder'"" /><br>"
                            lblDisplay.Text &= "<div id=""more1"" style=""DISPLAY: block""><A id=""link1"" onclick=""show('more',true)"" href=""#"" name=""link1"">More</A></div><br>"
                            firstImg = True

                        Else
                            lblAll.Text &= "<input type=""Image"" name=""imgBtn"" id=""" & objFile.Name & """ onclick=""Btn_onClick()"" src=Images/" & objFile.Name & _
                            " class=""removeBorder"" onmouseover=""this.className='applyBorder'"" onmouseout=""this.className='removeBorder'"" /><br><br>"
                        End If
                    End If
                End If
            Next
            'Clean up!
            firstImg = False
            objFolder = Nothing
            objFile = Nothing
            objFSO = Nothing
        Else
            RaiseEvent folderDoNotExist("Folder Path: " & strfolderPath & " cannot be found.")
        End If


    End Sub

It seems like you're going a very longwinded way about it...

Scripting.FileSystemObject is a COM object and is old hat ASP. In ASP.NET it has been replaced with the System.IO namespace that contains all the classes, functions, etc. that you need to work with files. It's best to use all ASP.NET code if you can.

A repeater control simply repeats it's contents for a given data source (or pretty much any sort of list or array in ASP.NET). As you can see in my example, I've used it to create a list of image buttons. You can see in the Page Load event that I've bound the data source of the repeater to the result of a DirectoryInfo's GetFiles() function, which returns an array of FileInfo objects. Since it's an array, it can be used by the repeater. (DirectoryInfo is part of the System.IO namespace, as you can see, native ASP.NET things fit really nicely together).

Usually with repeaters, you can just put in a bit of code in the ItemTemplate such as:
<%# DataBinder.Eval(Container.DataItem, "FieldName") %>
which will get directly substituted with whatever the "FieldName" column happens to be for the current item in the list or data source. Since we are setting the property of a Control and not sending the data directly to the output, we can't do it that way. Instead I used the repeater's ItemDataBound event (which gets fired for every item in the list).

Let me know if none of that made sense, or you want that same code in VB.NET (I'm well versed in both languages).

If you want more info on the Repeater control, have a look at the tutorials at www.asp.net - it's a great place to start.

(Strange conincidence that I happen to be working on almost exactly the same type of thing as you... mine's a forum, specifically the bit where a user can select one of a number of pre defined avatars)

- Mina

Is it possible to use <asp:repeater> to get images from the sql database? Do you have any simple codings to do this? Thanks

I am trying to integrate your code and mine as well. The filenames of the image files will be displayed to a textbox when user clicks on the imagebutton.

This textbox is not created in the user control, because i want to allow user to choose if they wish to retrieve the staffId when they click on the image button. The textbox is dragged on and dropped in the webform. Somehow, i cant get it to display the filename to the textbox in the webform.

And also, sometimes user may have other type of files in the folder, therefore i want to specify that only jpeg and gif images will be displayed. Is there anyway to check the extension of the file? Thanks

 Public Sub imgItem_Click(ByVal sender As System.Object, ByVal e As ImageClickEventArgs)
        Dim fileName As String
        imgSelected.ImageUrl = CType(sender, ImageButton).ImageUrl
        fileName = imgSelected.ImageUrl.Split("/")(2)
        strStaffId = fileName.Split(".")(0)
        Response.Write(strStaffId)
    End Sub

 Public Property staffId() As String
        Get
            Return strStaffId
        End Get

        Set(ByVal Value As String)
            strStaffId = Value
        End Set

    End Property

Is it possible to use <asp:repeater> to get images from the sql database? Do you have any simple codings to do this? Thanks

Is it only the filename that's stored in the database or is the entire image data stored as a BLOB field? If it's just the filename, then it's easy:

Dim MyConnection As New SqlConnection("Your Connection String")
Dim MyCommand As New SqlCommand("SELECT filename FROM table", Connection)
MyConnection.Open()
repImages.DataSource = MyCommand.ExecuteReader(CommandBehavior.CloseConnection)
repImages.DataBind()

You'll need to update OnItemDataBound to reflect the change. Instead of an array of FileInfo objects, the repeater has now been bound to am SqlDataReader so you'll need to cast e.Item.DataItem to System.Data.Common.DbDataRecord instead of System.IO.FileInfo.

And also, sometimes user may have other type of files in the folder, therefore i want to specify that only jpeg and gif images will be displayed. Is there anyway to check the extension of the file? Thanks

If the filenames are coming from a database, it's easy - just modify your SQL Statement:
SELECT filname FROM table WHERE filename LIKE '%.gif' OR filename LIKE '%.jpg'

As for my first method, just change the line:
repImages.DataSource = dirInfo.GetFiles("*.gif,*.jpg");

Thanks for your reply. Actually, i am thinking of retrieving the actual image and not the image path. The image is stored as "image" datatype in the SQL database.

Hmm personally I've never worked that way cos I try to avoid having huge chunks of data in my database - it can be a big performace issue.
I imagine it would be a case of having an ASPX page to act as the 'image' - i.e. retreive the image data and send it to the output stream, probably picking the image from the database based on a query string. Try searching Google for that one.

Actually, previously i retrieved the image from the database using another webform. For example, the <img src="getImage.aspx?imageid=1">. Something like this but more detailed.

But i wish to use something more efficient and do not wish to use another webform to get the image out. Because now i am currently working on like business layer, presentation layer, data access layer, etc. Anyway, thanks for your help.

Do not quite understand what you were trying to tell me. Could edit a piece of coding to show me instead?

You'll need to update OnItemDataBound to reflect the change. Instead of an array of FileInfo objects, the repeater has now been bound to am SqlDataReader so you'll need to cast e.Item.DataItem to System.Data.Common.DbDataRecord instead of System.IO.FileInfo.

And also, i somehow cant get the staffid to be displayed when a new image has been selected. Why is that so? Thanks

 Public Sub imgItem_Click(ByVal sender As System.Object, ByVal e As ImageClickEventArgs)
        Dim fileName As String
        imgSelected.ImageUrl = CType(sender, ImageButton).ImageUrl
        fileName = imgSelected.ImageUrl.Split("/")(2)
        strStaffId = fileName.Split(".")(0)
        Response.Write(strStaffId)
    End Sub

 Public Property staffId() As String
        Get
            Return strStaffId
        End Get

        Set(ByVal Value As String)
            strStaffId = Value
        End Set

    End Property

Btw, i used your coding which was previously mentioned and it does not work. I have 5 images inside the folder and it gives me a zero value. When i tried with original coding, it works.

Not Working

Response.Write(dirInfo.GetFiles("*.gif,*.jpg").Length))

Working

Response.Write(dirInfo.GetFiles("*.*").Length))

But i wish to use something more efficient and do not wish to use another webform to get the image out. Because now i am currently working on like business layer, presentation layer, data access layer, etc. Anyway, thanks for your help.

AFAIK, there's no way of doing it without another web form. (Unless you put the code in the same web form and got it to run when say, a caertain query string value was set, but that would just be silly) Having another web form wouldn't break the three teir rule, as long as you seperated the code as such. The code to get the image would sit in the data access layer, the business logic layer would call that code and perform any business logic on it, and the presentation layer (the web form) would output that image.

Do not quite understand what you were trying to tell me. Could edit a piece of coding to show me instead?

Ok on this line:

System.IO.FileInfo MyFileInfo = (System.IO.FileInfo)Item.DataItem;
FYI, in VB the same line would be:
Dim MyFileInfo as System.IO.FileInfo = CType(Item.DataItem, System.IO.FileInfo)

we are casting the current data item of the repeater (Item.DataItem) to System.IO.FileInfo becuase the Repeater contains a list of System.IO.FileInfo's (remember we bound it to dirInfo.GetFiles, GetFiles returns a list of System.IO.FileInfo's)
Well now we're binding it to SqlCommand.ExecuteReader() which doesn't return a list of FileInfo's, it returns an SqlDataReader which is pretty much a list of System.Data.Common.DbDataRecord's. So we use:

System.Data.Common.DbDataRecord MyRecord = (System.Data.Common.DbDataRecord)Item.DataItem;
FYI, in VB the same line would be:
Dim MyRecord as System.Data.Common.DbDataRecord = CType(Item.DataItem, System.Data.Common.DbDataRecord)

so now MyRecord contains the database record of whatever item the repeater is currently dealing with.

But i wish to use something more efficient and do not wish to use another webform to get the image out. Because now i am currently working on like business layer, presentation layer, data access layer, etc. Anyway, thanks for your help.

AFAIK, there's no way of doing it without another web form. (Unless you put the code in the same web form and got it to run when say, a caertain query string value was set, but that would just be silly) Having another web form wouldn't break the three teir rule, as long as you seperated the code as such. The code to get the image would sit in the data access layer, the business logic layer would call that code and perform any business logic on it, and the presentation layer (the web form) would output that image.

Do not quite understand what you were trying to tell me. Could edit a piece of coding to show me instead?

Ok on this line:

System.IO.FileInfo MyFileInfo = (System.IO.FileInfo)Item.DataItem;
FYI, in VB the same line would be:
Dim MyFileInfo as System.IO.FileInfo = CType(Item.DataItem, System.IO.FileInfo)

we are casting the current data item of the repeater (Item.DataItem) to System.IO.FileInfo becuase the Repeater contains a list of System.IO.FileInfo's (remember we bound it to dirInfo.GetFiles, GetFiles returns a list of System.IO.FileInfo's)
Well now we're binding it to SqlCommand.ExecuteReader() which doesn't return a list of FileInfo's, it returns an SqlDataReader which is pretty much a list of System.Data.Common.DbDataRecord's. So we use:

System.Data.Common.DbDataRecord MyRecord = (System.Data.Common.DbDataRecord)Item.DataItem;
FYI, in VB the same line would be:
Dim MyRecord as System.Data.Common.DbDataRecord = CType(Item.DataItem, System.Data.Common.DbDataRecord)

so now MyRecord contains the database record of whatever item the repeater is currently dealing with.

Sorry, for the late response. I did not receive any email notification. How am i able to load the first image file in the directory to my imgSelected control? And load the remaining images to the repeater? Another weird thing i have encountered is that only after a postback will i be able to display the text in txtURL to appear in a textbox in my presentation webform? Do you know why?

Your this coding to retrieve ".jpg,.gif" file is not working. Do you know why? Thank you so much for all your help!

repImages.DataSource = dirInfo.GetFiles("*.gif,*.jpg")

Front-end

<asp:Image ID="imgSelected" Runat="server"></asp:Image>
<asp:label id="lblDisplay" Runat="server"></asp:label>
<div id="more" style="DISPLAY: none">All Images:<br>
	<asp:repeater id="repImages" runat="server" OnItemDataBound="repImages_ItemDataBound">
		<ItemTemplate>
			<asp:ImageButton runat="server" ID="imgItem" OnClick="imgItem_Click" />
			<br>
		</ItemTemplate>
	</asp:repeater><A id="link2" onclick="show('more', false)" href="#" name="link2">Close</A>
</div>
<asp:textbox id="txtURL" Runat="server"></asp:textbox>

Back-end

Protected Sub repImages_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles repImages.ItemDataBound
        Dim Item As RepeaterItem = CType(e.Item, RepeaterItem)
        Dim MyImage As New Image
        Dim firstImg As Boolean
        Dim fullFilePath As String
        MyImage = Item.FindControl("imgItem")
        Dim MyFileInfo As System.IO.FileInfo

        If ((Item.ItemType = ListItemType.Item) Or (Item.ItemType = ListItemType.AlternatingItem)) Then

        End If

        MyFileInfo = CType(Item.DataItem, System.IO.FileInfo)
        fullFilePath = strFolderPath & "\" & MyFileInfo.Name
        MyImage.ImageUrl = strFolderPath & "\" & MyFileInfo.Name
        
        ' You can set any of the other attributes for the ImageButton control here (ALT text, etc)

    End Sub

Oh yeah, another is that after i select the images in the repeater, i only would it to appear in the imgSelected control and disappear from the repeater. Is there anyway to specify which image file i do not wish to load in the repeater?

Yup. In the repImages_ItemDataBound routine, check if the current item is the image you don't want to display, something like:

If (strFolderPath & "\" & MyFileInfo.Name) = imgSelected.ImageUrl Then MyImage.Visible = False

The above code works. But when i click on the image i have selected, it does go to repImages_ItemDataBound again does it? Is there anyway to make it go through this repImages_ItemDataBound instead of databinding it all over again?

Sorry to be such a nag but this coding does not work:

repImages.DataSource = dirInfo.GetFiles("*.gif,*.jpg")

Thanks

It depends what you have in your Page_Load and imgItem_Click events. If it's not happening already, you'll need to re-bind the data to the repeater item:

repImages.DataSource = dirInfo.GetFiles("*.gif,*.jpg")
repImages.DataBind()

probably in imgItem_Click

Yeah, i put in the below code to my imgItem_Click.

Dim dirInfo As New DirectoryInfo(strFolderPath)
        repImages.DataSource = dirInfo.GetFiles("*.*")
        repImages.DataBind()

I tried your coding below but does not work. No image files are shown. You know how to fix this? This is the only problem i have so far, displaying ".gif" and ".jpg" images only.

repImages.DataSource = dirInfo.GetFiles("*.gif,*.jpg")
repImages.DataBind()