就像操作本地的計(jì)算機(jī)一樣，需要為每個(gè)網(wǎng)絡(luò)用戶提供各自的一塊硬盤空間，用戶登錄后便可以對(duì)自己的空間進(jìn)行管理。管理是多方面的，首先用戶應(yīng)該能看到自己文件夾下的所有內(nèi)容，另外需要提供多級(jí)文件夾目錄的支持。

　　下面要介紹的實(shí)例包括“網(wǎng)上硬盤”的許多功能，將一步步為大家進(jìn)行介紹。首先創(chuàng)建工程實(shí)例，然后進(jìn)行主界面的設(shè)計(jì)，最后對(duì)各個(gè)功能的實(shí)現(xiàn)分別進(jìn)行介紹。

　　新工程創(chuàng)建

　　新工程創(chuàng)建的步驟如下：

　　(1) 打開(kāi)MicroSoft Visual Studio.NET應(yīng)用程序。

　　(2) 選擇“文件”|“新建”|“項(xiàng)目”命令，將打開(kāi)“新建項(xiàng)目”對(duì)話框，如圖1所示。進(jìn)行以下選擇和設(shè)置：在“項(xiàng)目類型”中選擇“Visual C#項(xiàng)目”，隨后在右邊“模板”中選擇“ASP.NET Web應(yīng)用程序”，然后把對(duì)話框下面顯示的位置改為http://localhost/WebDisk，單擊“確定”按鈕完成新項(xiàng)目創(chuàng)建。


　　(3) 工程創(chuàng)建完后，將直接打開(kāi)一個(gè)創(chuàng)建好的Web頁(yè)面，名稱為WebForm1.aspx。選擇“視圖”|“解決方案資源管理器”命令，將打開(kāi)“解決方案資源管理器”對(duì)話框。在這里可以對(duì)工程的所有資源進(jìn)行統(tǒng)一管理，并可以看到剛才已經(jīng)提到的WebForm1.aspx。

　　(4) 選擇“項(xiàng)目”|“添加新項(xiàng)”命令，將打開(kāi)“添加新項(xiàng)”對(duì)話框。在右邊“模板”中選擇“Web窗體”，并將左下角名稱更名為NetWorkDisk.aspx。單擊“打開(kāi)”按鈕完成新項(xiàng)的添加，如圖16-2所示。

 

　　主界面設(shè)計(jì)

　　創(chuàng)建好工程和新項(xiàng)后，就要進(jìn)行功能主界面的設(shè)計(jì)。為了使用戶界面更為友好易用，就需要使用很多服務(wù)器控件。如圖3所示的是設(shè)計(jì)好的功能界面圖，下面將通過(guò)一系列步驟進(jìn)行說(shuō)明。

　　(1) 選擇“視圖”|“工具箱”命令，將打開(kāi)“工具箱”對(duì)話框。

　　(2) 在“服務(wù)器資源管理器”中雙擊NetWorkDisk.aspx，在頁(yè)面左下角選擇“設(shè)計(jì)”命令。然后就可以對(duì)控件進(jìn)行添加了。

　　(3) 選擇“工具箱”|HTML命令，雙擊該目錄下的Flow Layout Panel控件，按圖3所示放置該對(duì)象，并在其中添加文字“網(wǎng)絡(luò)硬盤—— 您的個(gè)人移動(dòng)秘書(shū)”。

　　(4) 選擇“工具箱”|“Web窗體”命令，雙擊該目錄下的Label控件，右鍵單擊生成的控件對(duì)象選擇“屬性”命令，對(duì)其屬性進(jìn)行設(shè)置：其中(ID)名稱設(shè)為Info，(Text)屬性設(shè)為空，(ForeColor)屬性設(shè)為Red。

　　(5) 和步驟4類似，再添加3個(gè)Label控件，把其Text屬性分別設(shè)置為“目錄瀏覽”、“文件上傳”和“目錄新建”，其他屬性項(xiàng)采用默認(rèn)設(shè)置。

　　(6) 選擇“工具箱”|“Web窗體”命令，雙擊該目錄下的ListBox控件，對(duì)生成的控件對(duì)象屬性進(jìn)行設(shè)置：(ID)名稱設(shè)為FileList，再按圖3的位置放置。

　　(7) 添加兩個(gè)Button類型的“Web窗體”控件，(ID)分別設(shè)置為BtnOpen和BtnDelete，(Text)屬性分別設(shè)為“打開(kāi)”和“刪除”。

　　(8) 選擇“工具箱”|HTML命令，雙擊該目錄下的File Field控件，將其位置定位于“文件上傳”之后。

　　(9) 新增一個(gè)TextBox類型的“Web窗體”控件，(ID)設(shè)置為NewDirName，位置位于“新建目錄”之后。

　　(10) 如圖3所示還需增加“上傳”和“新增目錄”兩個(gè)Button控件，(ID)分設(shè)為BtnUpLoad和BtnNewDir。

　　(11) 新增兩個(gè)CheckBox類型的“Web窗體”控件，(ID)分別設(shè)置為chkReadOnly和chkHidden，(Text)分別設(shè)為“只讀”和“隱藏”。

　　注意：

　　上面完成了控件的添加和頁(yè)面布置工作。為了使File Field控件對(duì)象能夠正常工作，還需要在HTML代碼中進(jìn)行相關(guān)的設(shè)置。單擊左下角的HTML按鈕，找到＜form id= "WebForm1" method="post" runat="server"＞，將其修改為＜form id= "WebForm1" method="post" runat="server" EncType="multipart/form-data"＞，因?yàn)镕ile Field控件只有在HtmlForm 的 Enctype屬性設(shè)置為multipart/form-data時(shí)才起作用。

　　另外還要為File Field控件增加id標(biāo)識(shí)。在HTML代碼中找到：

＜INPUT runat="server" style="Z-INDEX: 107; LEFT: 131px; WIDTH: 490px; POSITION: absolute; TOP: 336px; HEIGHT: 22px" type="file" size="62"＞
　　將其修改為：

＜INPUT runat="server" style="Z-INDEX: 107; LEFT: 131px; WIDTH: 490px; POSITION: absolute; TOP: 336px; HEIGHT: 22px" type="file" size="62" id="WebFile" name="WebFile"＞
　　這樣就就完成了主界面的設(shè)計(jì)工作。友好的界面風(fēng)格必須得到相應(yīng)的代碼支持。下面馬上就要轉(zhuǎn)入后臺(tái)程序的編碼。