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

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

　　新工程創(chuàng)建

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

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

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


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

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

 

　　主界面設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

　　注意：

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

　　另外還要為File Field控件增加id標(biāo)識。在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è)計工作。友好的界面風(fēng)格必須得到相應(yīng)的代碼支持。下面馬上就要轉(zhuǎn)入后臺程序的編碼。

最新評論