ASP.NET设计网络硬盘之查看文件夹(2)

     主界面设计
  
  　　创建好工程和新项后，就要进行功能主界面的设计。为了使用户界面更为友好易用，就需要使用很多服务器控件。如图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"＞
  
  　　这样就就完成了主界面的设计工作。友好的界面风格必须得到相应的代码支持。下面马上就要转入后台程序的编码。