Build a Web-based Briefcase: Part II

The User Interface





Build a Web-based Briefcase: Part II

The User Interface


By Bipin Joshi


In Part I of this series we kicked off developing our Web-based briefcase application. We created database tables and stored procedures. We also created two classes, Files and Folders, to manipulate files and folders, respectively. To wrap up our project we ll develop the user interface. The ASP.NET 2.0 TreeView control is a natural choice for displaying folder hierarchy. The files will be displayed in a GridView control.


The Briefcase User Interface

Before you develop the user interface of the briefcase application it is worthwhile to see how the application is going to look and function; Figure 1 shows the user interface.


Figure 1: The user interface of our briefcase project.


On the left side of the page we have a TreeView control that displays a list of folders. Upon selecting a folder, all the files contained in it are shown on the right side in a GridView control. The files can then be downloaded, deleted, or renamed with the help of appropriate buttons. Below the folder and file listing there is a task pane that allows us to perform tasks such as creating a folder, deleting a folder, and uploading files to a folder.


The Base Table

To begin designing the user interface, add an HTML table with four rows and two columns. Drag and drop a Label control in the top row. This Label is used to display any error messages while performing various operations. Drag and drop one Label control in both the cells of the second row. Set their Text properties to Folders and Files, respectively.


Designing the TreeView

Now drag and drop a Panel control in the first cell of the third row. This panel will house the TreeView. We use a Panel control so we can have horizontal and vertical scrollbars in this region. Set the Height and Width properties of the Panel to 300px and 150px, respectively. Also, set the ScrollBars property of the Panel to Auto (this indicates that the scrollbars will be displayed only when the context overflows the boundaries of the Panel).


Next, drag and drop a TreeView control inside the Panel control. The TreeView control is available in the Navigation node of the toolbox (see Figure 2).


Figure 2: The TreeView control in the toolbox.


Set the Width property of TreeView to 100% and the Font-Names property to Lucida Sans. Also, set the ShowLines property to True. This will cause the TreeView to show dotted lines showing the nesting levels between the tree nodes. Set SelectedNodeStyle of the TreeView in such a way that the selected folder is shown with some highlighted color. Figure 3 shows the complete mark-up of the Panel control and TreeView.


ScrollBars="Auto" Width="200px" Height="300px">

Font-Bold="True" Width="100%" Font-Names="Lucida Sans" 

ForeColor="Black" ShowLines="True">

Figure 3: Mark-up of Panel and TreeView.


Designing the GridView

Now drag and drop a GridView control in the second cell of the third row. Right-click on it and select Auto Format from the shortcut menu. In the Auto Format dialog box (see Figure 4) select some formatting scheme and click OK.


Figure 4: The Auto Format dialog box of GridView.


Set the Width property to 100% and the Font-Names property to Lucida Sans. Now it s time to add columns to the GridView. Open the smart tags of the GridView and select the Fields option. This will open the Fields dialog box (see Figure 5).


Figure 5: The Fields dialog box of the GridView control.


Using the Fields dialog box add two template fields, one button field, one command field, and two bound fields. The GridView columns listed in Figure 6.


Column for...

Column Type



Displaying file name


File Name


Displaying size of the file


Size (Bytes)


Displaying time stamp of the file


Created On


Displaying download buttons




Displaying delete buttons




Displaying rename buttons




Figure 6: Columns of the GridView control.


Set the ButtonType property of ButtonField and CommandField to Button so those columns will display push buttons instead of link buttons. Also, set the Text and CommandName properties of the ButtonField to Download. Further, set the EditText and UpdateText property of CommandField to Rename and Change, respectively. Uncheck the Auto-generate fields checkbox and close the dialog box.


If you are wondering why we created the File Name column as a template field instead of a bound field, it s because doing so will allow us to attach validation controls to it in edit mode. This way we can easily ensure that the user has entered a file name. Let s design the File Name template column now.


Right-click on the GridView and select the Edit Template menu option. Further, select the File Name template column. Doing so will open the GridView template designer, as shown in Figure 7.


Figure 7: Designing the File Name template.


Drag and drop a Label control inside the ItemTemplate region. This Label will display the file name in read-only mode of the GridView. Also, drag and drop a TextBox and a RequiredFieldValidator control inside the EditItemTemplate.


Now open the smart tag of the Label and choose the Edit Databindings option to open the data bindings editor shown in Figure 8.


Figure 8: Data binding a Label with the File Name column.


Select the Text property under the Bindable properties section; under the Custom binding section enter Eval( FileName ). The Eval function is a one-way data binding expression of ASP.NET and displays data from the data source into the control.


Similarly, open the data bindings editor of the TextBox control and bind its Text property with the File Name column. Because TextBox will be updating the file name we need to use the Bind function instead of Eval.


Figure 9: Data binding a TextBox with the File Name column.


Finally, select the RequiredFieldValidation control and set its ControlToValidate property to the ID of the TextBox. Also, set its ErrorMessage property to Please enter file name . This completes the design of the File Name template column. Right-click at the top of the designer and choose End template designer.


To design the delete template field, drag and drop a Button control into its ItemTemplate and set its Text property to Delete. Also, set its OnClientClick property to return ConfirmDelete; . We ll be writing the ConfirmDelete JavaScript function later that will ask for confirmation from the end user. If the user confirms the delete, the ConfirmDelete function returns true; otherwise, it returns false. Accordingly, the Click event of the Delete button is raised or cancelled. Now, open the data bindings editor and bind the CommandArguments property to the Id column (see Figure 10).


Figure 10: Data binding CommandArgument with the Id column.


The CommandArgument is used later to delete a file with an ID equal to the value of the command argument property. Your GridView should now resemble Figure 11. Figure 12 shows the complete mark-up of the GridView.


Figure 11: The GridView after completing the design.


 AutoGenerateColumns="False" CellPadding="4"

 DataKeyNames="Id" ForeColor="#333333" GridLines="None"

 Width="100%" Font-Names="Lucida Sans" Font-Size="12px">

 ForeColor="White" />

 Text='<%# Bind("FileName") %>'>

 runat="server" ControlToValidate="TextBox1"

 Display="Dynamic" ErrorMessage="Please enter file name"


 Text='<%# Eval("FileName") %>'>

 HeaderText="Size (Bytes)"

 ReadOnly="True" />

 HeaderText="Created On" ReadOnly="True" />

 CommandName="DownloadFile" Text="Download" />

 CausesValidation="False" CommandArgument='<%# Eval("Id") %>'

 CommandName="DeleteFile" OnClick="Button1_Click1"

 OnClientClick="return ConfirmDelete();"

 Text="Delete" />

 EditText="Rename" UpdateText="Change" />

 ForeColor="#333333" />

 HorizontalAlign="Center" />

 ForeColor="White" />

Figure 12: Mark-up of the GridView control.


Before deleting any file the user is prompted for confirmation. This is done with the help of a small JavaScript function (see Figure 13).


Figure 13: Confirming the delete operation.


The ConfirmDelete function is written in a