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"＞
　　這樣就就完成了主介面的設計工作。友好的介面風格必須得到相應的代碼支援。下面馬上就要轉入背景程式的編碼。