ASP.NET設計網絡硬盤之查看文件夾實現代碼

就像操作本地的計算機一樣，需要為每個網絡用戶提供各自的一塊硬盤空間，用戶登錄後便可以對自己的空間進行管理。管理是多方面的，首先用戶應該能看到自己文件夾下的所有內容，另外需要提供多級文件夾目錄的支持。

　　下面要介紹的實例包括“網上硬盤”的許多功能，將一步步為大家進行介紹。首先創建工程實例，然後進行主界面的設計，最後對各個功能的實現分別進行介紹。

　　新工程創建

　　新工程創建的步驟如下：

　　(1) 打開MicroSoft Visual Studio.NET應用程序。

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


圖1 新建項目設置
　　(3) 工程創建完後，將直接打開一個創建好的Web頁面，名稱為WebForm1.aspx。選擇“視圖”|“解決方案資源管理器”命令，將打開“解決方案資源管理器”對話框。在這裡可以對工程的所有資源進行統一管理，並可以看到剛才已經提到的WebForm1.aspx。

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


圖2 “添加新項”對話框

 

　　主界面設計

　　創建好工程和新項後，就要進行功能主界面的設計。為了使用戶界面更為友好易用，就需要使用很多服務器控件。如圖3所示的是設計好的功能界面圖，下面將通過一系列步驟進行說明。

圖3 “網絡硬盤”主界面設計圖
　　(1) 選擇“視圖”|“工具箱”命令，將打開“工具箱”對話框。

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

　　(3) 選擇“工具箱”|HTML命令，雙擊該目錄下的Flow Layout Panel控件，按圖3所示放置該對象，並在其中添加文字“網絡硬盤—— 您的個人移動秘書”。

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

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

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

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

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

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

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

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

　　注意：

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

　　另外還要為File Field控件增加id標識。在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"＞
　　這樣就就完成了主界面的設計工作。友好的界面風格必須得到相應的代碼支持。下面馬上就要轉入後台程序的編碼。