ASP. NET design network hard disk view folder implementation code

Just like operating a local computer, you need to provide each network user with a hard disk space. After logging on, you can manage your own space. Management is multidimensional. First, you should be able to see all the content in your folder. In addition, you need to provide support for multi-level folder directories.

The examples to be introduced below include many functions of "online hard disk", which will be introduced step by step. First, create a project instance, design the main interface, and finally introduce the implementation of each function.

　　Create a new project

To create a new project, follow these steps:

(1) Open the MicroSoft Visual Studio. NET application.

(2) Select "file" | "new" | "project" to open the "new project" dialog box, as shown in figure 1. Select and set: Select "Visual C # Project" in "project type", and then select "ASP.. NET Web application, and then change the position shown below the dialog box to http: // localhost/WebDisk. Click OK to create a new project.


Figure 1 New Project Settings
(3) After the project is created, a created Web page named WebForm1.aspx is opened. Select "View" | "solution Resource Manager" to open the "solution Resource Manager" dialog box. You can manage all the resources of the project in a unified manner, and you can see the WebForm1.aspx mentioned just now.

(4) Select "project"> "Add new project" to open the "Add new project" dialog box. Select "Web form" in "template" on the right, and rename the name NetWorkDisk. aspx in the lower left corner. Click the OPEN button to add a new item, as shown in Figure 16-2.


Figure 2 "Add new project" dialog box

 

　　Main Interface Design

After creating a project and a new item, you must design the main functional interface. Many server controls are required to make the user interface more user-friendly. 3 shows the designed functional interface, which is described in a series of steps below.

Figure 3 "Network hard drive" Main Interface Design
(1) Select "View"> "toolbox" to open the "toolbox" dialog box.

(2) double-click NetWorkDisk. aspx in "server resource manager" and select the "design" command in the lower left corner of the page. Then you can add the control.

(3) Select "toolbox" | HTML command, double-click the Flow Layout Panel control in the directory, and place the object as shown in figure 3, add the text "Network hard disk-your personal mobile secretary" to it ".

(4) Select the "toolbox" | "Web form" command, double-click the Label control under the directory, right-click the generated control object, and select the "property" command to set its properties: the (ID) name is set to Info, the (Text) attribute is set to null, and the (ForeColor) attribute is set to Red.

(5) similar to Step 4, add three Label controls and set their Text attributes to "directory browsing", "File Uploading", and "Directory Creation", respectively ", use the default settings for other attribute items.

(6) Select the "toolbox" | "Web form" command, double-click the ListBox control in the directory, and set the property of the generated control object: (ID) set the name to FileList, then place it at the position shown in figure 3.

(7) add two "Web Forms" controls of the Button type, set (ID) to BtnOpen and BtnDelete respectively, and set (Text) attributes to "open" and "delete" respectively ".

(8) Select "toolbox" | HTML command, double-click the File Field control in the directory, and locate it after "File Upload.

(9) Add a TextBox-type "Web form" control and set it to NewDirName after "new directory.

(10) As shown in figure 3, you also need to add the "Upload" and "add directory" buttons, which are divided into BtnUpLoad and BtnNewDir.

(11) Two "Web Forms" controls of the CheckBox type are added. The (ID) controls are set to chkReadOnly and chkHidden, and the (Text) controls are set to "read-only" and "hidden" respectively ".

Note:

The preceding section completes the addition of controls and page layout. In order to make the File Field control object work properly, you also need to make relevant settings in the HTML code. Click the HTML button in the lower left corner and find <form id = "WebForm1" method = "post" runat = "server">, modify it to <form id = "WebForm1" method = "post" runat = "server" EncType = "multipart/form-data">, because the File Field control takes effect only when the Enctype attribute of HtmlForm is set to multipart/form-data.

In addition, the id must be added for the File Field control. In the HTML code, find:

<INPUT runat = "server" style = "Z-INDEX: 107; LEFT: pixel PX; WIDTH: 490px; POSITION: absolute; TOP: 336px; HEIGHT: 22px "type =" file "size =" 62 ">
Modify it:

<INPUT runat = "server" style = "Z-INDEX: 107; LEFT: pixel PX; WIDTH: 490px; POSITION: absolute; TOP: 336px; HEIGHT: 22px "type =" file "size =" 62 "id =" WebFile "name =" WebFile ">
This completes the design of the main interface. The friendly interface style must be supported by the corresponding code. The following code will be transferred to the background program immediately.