ASP.NET设计网络硬盘之查看文件夹实现代码
程序员文章站
2024-03-05 18:36:01
就像操作本地的计算机一样，需要为每个网络用户提供各自的一块硬盘空间，用户登录后便可以对自己的空间进行管理。管理是多方面的，首先用户应该能看到自己文件夹下的所有内容，另外需要...
就像操作本地的计算机一样，需要为每个网络用户提供各自的一块硬盘空间，用户登录后便可以对自己的空间进行管理。管理是多方面的，首先用户应该能看到自己文件夹下的所有内容，另外需要提供多级文件夹目录的支持。
下面要介绍的实例包括“网上硬盘”的许多功能，将一步步为大家进行介绍。首先创建工程实例，然后进行主界面的设计，最后对各个功能的实现分别进行介绍。
新工程创建
新工程创建的步骤如下：
(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 “网络硬盘”主界面设计图
(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"＞
这样就就完成了主界面的设计工作。友好的界面风格必须得到相应的代码支持。下面马上就要转入后台程序的编码。
下面要介绍的实例包括“网上硬盘”的许多功能，将一步步为大家进行介绍。首先创建工程实例，然后进行主界面的设计，最后对各个功能的实现分别进行介绍。
新工程创建
新工程创建的步骤如下：
(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"＞
这样就就完成了主界面的设计工作。友好的界面风格必须得到相应的代码支持。下面马上就要转入后台程序的编码。