Deleting Dynamically Populated images from a Directory (NOT GridView) ASP.NET (VB)

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

@Tim Schmelter - Fairly new to asp.net, would you be able to share some code on how to do this? Thanks... — James, May 31 '11 at 19:05

score 2 · Accepted Answer · answered May 31 '11 at 20:08

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

Sorry, I was being lazy with my answer. This is a much better answer. — Kendrick, Jun 01 '11 at 17:10

score 0 · Answer 2 · answered May 31 '11 at 19:07

This would be an excellent example of where using a data aware would make your life a lot easier.

That said, if you didn't want to use a server-side control, you could assign an ID to each checkbox (i.e. DeleteImage_1) and then store the ID and associated image name in the viewstate on the page. Go through the checked checkboxes and refer back to the viewstate for the name that goes with each ID when they click the delete button.

Deleting Dynamically Populated images from a Directory (NOT GridView) ASP.NET (VB)

2 Answers2