Asp. NET Design Network hard disk View folder

asp.net| Design | network | Hard disk is like operating a local computer, the need for each network user to provide their own hard disk space, users can log in after their own space management. Management is multifaceted, first users should be able to see all the content under their own folders, in addition to provide multi-level folder directory support.

The following examples include many of the features of the online hard drive, which will be introduced in a step-by-step way. First, we create an engineering example, then the main interface design, and finally the realization of each function is introduced separately.

New Project Creation

The steps to create the new project are as follows:

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

(2) Select "File" | " New "|" Project command, the New Project dialog box opens, as shown in Figure 1. Make the following selections and settings: Select Visual C # project in Project type, then select ASP.net Web application in template on the right, then change the position shown below the dialog box to Http://localhost/WebDisk, and click OK button to complete the new project creation.


Figure 1 New Project Settings
(3) After the project is created, a Web page will be opened directly with the name WebForm1.aspx. Select "View" | " Solution Explorer command, the Solution Explorer dialog box opens. Here you can manage all the resources for the project and see the WebForm1.aspx that have just been mentioned.

(4) Select "Project" | " Add New Item command, the Add New Item dialog box opens. In the right template, select Web Form and rename the lower-left corner name to Networkdisk.aspx. Click the Open button to complete the addition of the new item, as shown in Figure 16-2.


Figure 2 "Add New Item" dialog box


Main interface Design

After creating the project and the new item, it is necessary to design the functional main interface. To make the user interface more user-friendly, you need to use many server controls. As shown in Figure 3, the design of the functional interface diagram is described below through a series of steps.


Figure 3 "Network hard disk" main interface design diagram
(1) Select "View" | " Toolbox command, the Toolbox dialog box opens.

(2) In Server Explorer, double-click networkdisk.aspx to select the design command in the lower-left corner of the page. You can then add the control to it.

(3) Select "Toolbox" | HTML command, double-click the Flow Layout Panel control in the directory, place the object as shown in Figure 3, and add the text "network hard disk-your personal mobile Secretary".

(4) Select "Toolbox" | " Web Forms command, double-click the label control in the directory, right-click the generated control object, select Properties, and set its properties: where (ID) name is set to info, (Text) property is set to NULL, (ForeColor) property is set to red.

(5) Similar to step 4, add 3 label controls and set their Text property to directory browsing, file upload, and directory new, with the default settings for other property items.

(6) Select "Toolbox" | " Web Forms command, double-click the ListBox control in the directory to set the generated control object properties: (ID) name FileList, and then place in Figure 3.

(7) Add two button types of Web Forms control, (ID) set to Btnopen and Btndelete respectively, (Text) property set to open and delete respectively.

(8) Select "Toolbox" | HTML command, double-click the File field control in the directory to position it after file upload.

(9) A new TextBox type, "Web Forms" control, (ID) is set to Newdirname, and the location is after new directory.

(10) as shown in Figure 3, also add the "Upload" and "New Catalog" two button controls, (ID) are divided into Btnupload and Btnnewdir.

(11) Add two checkbox types of Web Forms control, (ID) respectively set to Chkreadonly and Chkhidden, (Text) respectively set to read-only and hide.

Attention:

The above completes the control's addition and the page layout work. In order for the File field control object to work correctly, you also need to make related settings in the HTML code. Click the HTML button in the lower left corner to find the <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 works only if the HtmlForm enctype property is set to Multipart/form-data.

Additional ID IDs are added for the File field control. Found in the HTML code:

<input runat= "Server" style= "z-index:107; left:131px; width:490px; Position:absolute; top:336px; height:22px "type=" file "size=" 62 "
Modify it to:

<input runat= "Server" style= "z-index:107; left:131px; width:490px; Position:absolute; top:336px; height:22px "type=" file "size=" id= "WebFile" name= "WebFile"
This completes the design work of the main interface. The friendly interface style must be supported by the appropriate code. The following code will be transferred to the background program immediately.