Question

The code below displays a thumbnail of each image in a specific server directory and when I click on the image it pops up a nice full sized picture. It works perfectly.

I would however, like to be able to delete an image. I first thought I could have a button at the bottom of the page with a checkbox next to each image, giving it a uniqueID as per the filename but as they are dynamically created I couldn’t figure how to handle the Click Event on the button for a randomly named Checkbox ID. Then I tried adding a button next to each item and then tried an OnClick & OnServerClick to call a Sub but this didn’t work either.

Any/All suggestions welcomed 🙂

Private Sub ImageList()
        If Directory.Exists(Server.MapPath("JobImages\" & DBC_JOB_JobID.Text)) Then
            Dim MySB As New StringBuilder
            Dim dirInfo As New DirectoryInfo(Server.MapPath("JobImages\" & DBC_JOB_JobID.Text))
            MySB.Append("<ul class=""clearfix"">")
            MySB.AppendLine()
            For Each File In dirInfo.GetFiles()
                MySB.Append("<li><a rel=""jobpic"" href=""JobImages\" & DBC_JOB_JobID.Text & "\" & File.Name & """><img src=""JobImages\" & DBC_JOB_JobID.Text & "\Thumbs\" & File.Name & """ width=""150"" height=""100"" /> <span class=""size"">" & File.Name & " </span></a></li>")
                MySB.AppendLine()
            Next
            MySB.Append("</ul>")
            MySB.AppendLine()
            lblMyPictures.Text = MySB.ToString
        End If
    End Sub

Answer 1

OK what Kendrick is talking about (basically) is using server side controls to keep track of which file to delete. What you are doing right now is dumping markup into a Label control, which on postback won’t fire an event on the server side. However you can accomplish this easily with server side controls.

The basic idea is you use a container control such as a Panel and add each child control to it. Then you hook events to each row with data identifying that row (such as filename).

Markup:

    <asp:Panel ID="pnlList" runat="server">
    </asp:Panel>

Code-Behind:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Directory.Exists(Server.MapPath("Files")) Then
        Dim objDirInfo As New DirectoryInfo(Server.MapPath("Files"))
        For Each objFile As FileInfo In objDirInfo.GetFiles()
            Dim objLabel As New Label
            objLabel.Text = objFile.Name

            Dim objLinkButton As New LinkButton
            objLinkButton.Text = "Delete"
            objLinkButton.CommandName = "Delete"
            objLinkButton.CommandArgument = objFile.Name
            AddHandler objLinkButton.Command, AddressOf DeleteFile

            Dim objLiteral As New LiteralControl
            objLiteral.Text = "<br/>"

            pnlList.Controls.Add(objLabel)
            pnlList.Controls.Add(objLinkButton)
            pnlList.Controls.Add(objLiteral)
        Next
    End If

End Sub

Public Sub DeleteFile(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.CommandEventArgs)
    If e.CommandName = "Delete" Then
        Dim strFileName As String = Server.MapPath("Files\" & e.CommandArgument)
        If File.Exists(strFileName) Then
            Dim objFile As New FileInfo(strFileName)
            objFile.Delete()
        End If
    End If
End Sub