Displaying the Files in a Directory using a DataGrid, Part 2

By Scott Mitchell

In Part 1 we saw how to create a DataGrid that listed the contents of the files in a directory. In this part we'll augment this example to allow users to delete a file from the list by simply clicking a button.

- continued -

Adding a Delete Button to the DataGrid

Imagine that we wanted to enhance our previous example as to allow the user to delete a file from the directory. To accomplish this we can add a ButtonColumn titled "Delete" to the DataGrid. The following DataGrid declaration shows the DataGrid after the "Delete" button has been added:

After examining the above code sample, be sure to note the following three things:

A ButtonColumn has been added to the DataGrid, which displays a "Delete" button.
The ButtonColumn's CommandName property has been set to Delete. This has the effect of having the DataGrid's DeleteCommand event fire when this button is clicked.
The DataGrid has been placed inside a Web form (the <form runat="server">...</form>). This is requires since the DataGrid now contains a ButtonColumn.

Now, we need to wire up an event handler for the DataGrid's DeleteCommand. This event handler will fire whenever one of the DataGrid's row's "Delete" buttons is clicked, so the code in the event handler must first determine the path of the file that we wish to delete, and then actually delete the file.

In order to determine the file that the user wants to delete, let's set the DataGrid's DataKeyField to the FullName property of the FileInfo class. Doing so will mean that we can easily determine the full file path of the row whose "Delete" button was clicked. To accomplish this simply set the DataKeyField property to FullName, like so:

<form runat="server"> <asp:DataGrid runat="server" id="articleList" ... DataKeyField="FullName"> <Columns> ... </Columns> </asp:DataGrid> </form>

All that remains is to create an event handler for the DataGrid's DeleteCommand event. In this event handler, we need to determine the file to delete and then delete it via the File.Delete() method. The final code example can be seen below, and contains a live demo. In addition to the code to delete the file, the sample code also contains a means for adding a client-side confirmation popup box so that when the user clicks a "Delete" button they are prompted as to whether or not they want to, indeed, delete the file. (A thorough discussion on adding such client-side events to a DataGrid's ButtonColumn can be found in: An Extensive Examination of the DataGrid Web Control: Part 8!)

<%@ Import Namespace="System.IO" %> <script language="VB" runat="server"> Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then Dim dirInfo as New DirectoryInfo(Server.MapPath("")) articleList.DataSource = dirInfo.GetFiles("*.aspx") articleList.DataBind() End If End Sub Sub articleList_ItemDataBound(sender as Object, e as DataGridItemEventArgs) ' First, make sure we're NOT dealing with a Header or Footer row If e.Item.ItemType <> ListItemType.Header AND _ e.Item.ItemType <> ListItemType.Footer then 'Now, reference the Button control that the Delete ButtonColumn 'has been rendered to Dim deleteButton as Button = e.Item.Cells(0).Controls(0) 'We can now add the onclick event handler deleteButton.Attributes("onclick") = "javascript:return " & _ "confirm('Are you sure you want to delete the file " & _ DataBinder.Eval(e.Item.DataItem, "Name") & "?')" End If End Sub Sub articleList_DeleteFile(sender as Object, e as DataGridCommandEventArgs) 'First, get the filename to delete Dim fileName as String = articleList.DataKeys(e.Item.ItemIndex) lblMessage.Text = "You opted to delete the file " & _ fileName & ".<br />" & _ "This file could be deleted by calling: " & _ "<code>File.Delete(fileName)</code><p>" 'You would want to rebind the Directory's files to the DataGrid after 'deleting the file... End Sub </script> <form runat="server"> <asp:label runat="server" id="lblMessage" Font-Italic="True" ForeColor="Red" /> <asp:DataGrid runat="server" id="articleList" Font-Name="Verdana" AutoGenerateColumns="False" AlternatingItemStyle-BackColor="#eeeeee" HeaderStyle-BackColor="Navy" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="15pt" HeaderStyle-Font-Bold="True" DataKeyField="FullName" OnItemDataBound="articleList_ItemDataBound" OnDeleteCommand="articleList_DeleteFile"> <Columns> <asp:ButtonColumn Text="Delete" ButtonType="PushButton" CommandName="Delete" /> <asp:HyperLinkColumn DataNavigateUrlField="Name" DataTextField="Name" HeaderText="File Name" /> <asp:BoundColumn DataField="LastWriteTime" HeaderText="Last Write Time" ItemStyle-HorizontalAlign="Center" DataFormatString="{0:d}" /> <asp:BoundColumn DataField="Length" HeaderText="File Size" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:#,### bytes}" /> </Columns> </asp:DataGrid> </form>

[View a Live Demo!]

Conclusion

In this article we saw how to use the .NET Framework's file system-related classes, and how to use a DataGrid to display the files in a given directory. In addition, we looked at enhancing the DataGrid so that it included a column of "Delete" buttons, thereby allowing the user to delete a file displayed in the list of files. All of this was accomplished with a minimal amount of code and development time...

Happy Programming!

By Scott Mitchell

Displaying the Files in a Directory using a DataGrid, Part 2

Adding a Delete Button to the DataGrid

Conclusion

Further Reading: