<asp:DataList id="PictureFiles" Runat="Server"
  RepeatColumns="4"
  RepeatDirection="Horizontal"
  CellPadding="3"
  GridLines="Both"
  OnItemCommand="Delete_File">

  <ItemTemplate>
    <asp:Image ImageUrl='<%# "../BookPictures/" & Container.DataItem %>'
      Width="45" ImageAlign="Left" Runat="Server"/>
    <asp:Label Text='<%# Container.DataItem %>' Runat="Server"/><br/>
    <asp:Button Text="Delete" Runat="Server"
      Font-Size="7pt"
      CommandName='<%# Container.DataItem %>'/>
  </ItemTemplate>

</asp:DataList>

Binding Files to a Display Control

Files cannot be bound to a DataList or to other display controls. There is no data source control for file binding as there is for database binding. An intermediate step is needed, then, to import file names into a data structure that, in turn, can be bound to the control. A Visual Basic array is a common way to store file names that can serve as a binding source for a display control.

In the following script that accompanies the example DataList control, a list of file names is taken from the c:\eCommerce\BookPictures directory and assigned to an array. This array is then bound to the DataList as properties for the Image, Label, and Button controls to display and delete these files. This binding is coded in a separate Bind_Picture_Files subprogram since it takes place on two different occasions. File names are bound to the control when the page first loads; rebinding takes place after a file is deleted.

<%@ Import Namespace="System.IO" %>

<SCRIPT Runat="Server">

Sub Page_Load

  If Not Page.IsPostBack Then
    Bind_Picture_Files
  End If

End Sub

Sub Bind_Picture_Files

  Dim FileArray() As String 
  FileArray = Directory.GetFiles(Server.MapPath("../BookPictures"), "*.jpg")

  Dim i As Integer
  For i = 0 to UBound(FileArray)
    FileArray(i) = Replace(FileArray(i), Server.MapPath("../BookPictures/"), "")
  Next

  PictureFiles.DataSource = FileArray
  PictureFiles.DataBind()

End Sub

Sub Delete_File (Src As Object, Args As DataListCommandEventArgs)

  File.Delete(Server.MapPath("../BookPictures/") & Args.CommandName)
  Bind_Picture_Files

End Sub

</SCRIPT>

Accessing Directories and Files

In the above Bind_Picture_Files subprogram, an array named FileArray() is declared and becomes the target for the Directory.GetFiles() method. This method produces an array of paths to the files in the BookPictures directory, restricted to files with the ".jpg" extension.

Once an array of data values exists, it can be bound to a display control. In the current example, however, only the file names are needed, not the full paths appearing in FileArray(). Therefore, the file paths are converted to file names by iterating the array and replacing the path portion of the strings with a null character. This iteration produces an array of file names for all the .jpg files in the BookPictures directory.

Binding an Array to a Display Control

An array is bound to an output control by assigning it as the DataSource property of the control and calling the control's DataBind() method. Binding of array values takes a binding expression in the following format.

<%# Container.DataItem %>

The Container.DataItem expression is the array equivalent to the Eval() and Bind() expressions used in database binding. For each element in the array, a row is produced in the output control.

In the present example, the 30 elements in FileArray() produce 30 ItemTemplates in the DataList. FileArray() values (picture file names) are bound to the ImageUrl property of the Image controls, to the Text property of the Label controls, and to the CommandName property of the "Delete" Buttons. This ItemTemplate portion of the DataList is repeated in the following listing.

<ItemTemplate>
  <asp:Image ImageUrl='<%# "../BookPictures/" & Container.DataItem %>'
    Width="45" ImageAlign="Left" Runat="Server"/>
  <asp:Label Text='<%# Container.DataItem %>' Runat="Server"/><br/>
  <asp:Button Text="Delete" Font-Size="7pt" Runat="Server"
    CommandName='<%# Container.DataItem %>'/>
</ItemTemplate>

Deleting Picture Files

A DataList, like other bound controls such as a GridView or DetailsView, recognizes Command events to which subprograms can be attached. Notice in the following partial listing that the DataList traps for this event with its OnItemCommand event handler which calls subprogram Delete_Picture when a Command event is triggered. This event takes place whenever a DataList button is clicked, in this case when the "Delete" Button associated with a picture is clicked.

Sub Delete_File (Src As Object, Args As DataListCommandEventArgs)

  File.Delete(Server.MapPath("../BookPictures/") & Args.CommandName)
  Bind_Picture_Files

End Sub

<asp:DataList id="PictureFiles" Runat="Server"
  OnItemCommand="Delete_File">
  ...

The subprogram receives the button's CommandName through its DataListCommandEventArgs argument list. Since button CommandNames are the names of picture files, the subprogram receives the name of a file to delete through its Arg.CommandName argument. This argument is used in the Directory class' File.Delete() method, supplying the full path to the file to delete. Since the contents of the BookPictures directory change with a deletion, the Bind_Picture_Files subprogram is called to re-bind the directory listing to the DataList.