Creating WebDisk, we first should
know what we are building; so what follows are some screenshots and descriptions
of the WebDisk sample. The application essentially
consists of three crucial screens: the main page screen, uploading file screen,
and the searching screen.
Browsing the online storage system
Figure 1 shows the main page screen, Default.aspx.
Here we grab file-related information from the client site and persist it into
the database, WebDiskDB, on the server side.
Figure 1: The run-time view of the main page Default.aspx
This page includes a GridView control named DiskView for displaying the hark disk information, two
DropdownList controls named DirList and MoveDirList for showing folder information, and two Button
controls named ReturnBtn for returning to the parent
folder and MoveBtn for moving files or folders.
Also, we add two hyperlinks, namely New
folder for linking to page NewFolder.aspx and Search files for linking to page SearchFile.aspx.
In fact, using an online storage system is very much like
operating a local file system except for the things associated with network
connection and database persistence. From the screenshot in Figure 1 you may
find this.
Uploading files
The next screen, uploading file screen, is shown in Figure
2. On this screen we should fulfill two different functions—uploading a single file to the server and
uploading multiple ones. From the screenshot we can see that this page is
pretty easy, on which there are a file uploading control named File , two buddy Button controls—addFile
and SureBtn, and a simple button control, ReturnBtn. Here we use control File
to browse and select the files to upload, while we use control addFile to add a new FileUpload control for multiple files
uploading, and finally use button SureBtn to perform
the uploading task.
Figure 2: The run-time view of page UploadFile.aspx
Note that when you click the button Upload
file on the main page Default.aspx it will
lead you to this page. And also, we should notice that here we browse files to
upload by using a HTML INPUT control with type="file" rather than the
ASP.NET server-side control FileUpload for the easier JavaScript programming in
the client-side. Now let us focus on uploading. This is done when the user
clicks the Upload all files button, which will
trigger the event handler SureBtn_Click(object sender,
EventArgs e) inside which function UploadFiles
servers to upload the files onto the hard disk on the server and persist them
into the database. Below we enumerate the detailed steps for function UploadFiles() to achieve uploading:
1.
Get all the files to upload from the current Request object of
HttpContext and save them into a collection fileList.
2.
Obtain each file inside the collection and attach it to a HttpPostedFile
object.
3.
Acquire the corresponding file name and save it onto the hard disk of
the server site.
4.
Persist the gathered information of the uploaded files into the database.
5.
Exhibit details for the uploaded files on the page.
Please see the downloadable source code at the end of the
article for detailed programming.
Searching files
Lastly, we come to the third important part of the
application: the Searching files screen is also a
typical one (see Figure 3).
Figure 3: The run-time view of page SearchFile.aspx
Just as nearly all the web pages in this application, this
screen is also laid out using tables. There are more controls on this page. Let
us enumerate their functions.
·
GridView FileView—for listing the detailed info of the matched
files
·
DropdownList DirList—for displaying directory structure info
·
RequiredFieldValidator rfN—for checking whether the key words entered
by the user are empty
·
TextBox Name—for entering the key words used to search for files
·
Button ReturnBtn—for navigating to the main page Default.aspx
·
Button SearchBtn—for performing the searching work
Now that we have an overview the whole online storage system
and its main functions, let us make further detailed research into each part of
the solution!
