Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Building an ASP.NET Web Application

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - ASP.NET 2.0 and ASP.NET Ajax

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Building an ASP.NET Web Application

Now that we have presented the ASPX file, the code-behind file and the resulting web page sent to the web browser, we show the steps we used to create this application in Visual Web Developer.

Building an ASP.NET Web Application

 

Now that we have presented the ASPX file, the code-behind file and the resulting web page sent to the web browser, we show the steps we used to create this application in Visual Web Developer.

 

Step 1: Creating the Website

In Visual Web Developer, select File > New Web Site... to display the New Web Site dialog (Fig. 25.4). In this dialog, select ASP.NET Web Site in the Templates pane. Below this pane, there are two fields in which you can specify the type and location of the web appli

cation you are creating. If it is not already selected, select HTTP from the drop-down list closest to Location. This indicates that the web application should be configured to run as an IIS application using HTTP (either on your computer or on a remote computer). We want our project to be located in  http://localhost, which is the URL for IIS’s root di-rectory (this URL normally corresponds to the C:\InetPub\wwwroot directory on your machine). The name localhost indicates that the server resides on local computer. If the web server were located on a different computer, localhost would be replaced with the appropriate IP address or hostname. By default, Visual Web Developer sets the location where the website will be created to  http://localhost/WebSite, which we change to  http://localhost/WebTime.

 

If you do not have IIS on your computer or do not have permission to access it, you can select File System from the drop-down list next to Location to create the web applica-tion in a folder on your computer. You will be able to test the application using Visual Web Developer’s internal ASP.NET Development Server, but you will not be able to access the application remotely over the Internet.

 

The Language drop-down list in the New Web Site dialog allows you to specify the language (i.e., Visual Basic, Visual C# or Visual J#) in which you will write the code-behind file(s) for the web application. Change the setting to Visual Basic. Click OK to create the website. This creates the directory C:\Inetpub\wwwroot\WebTime (in IIS) and makes it accessible through the URL  http://localhost/WebTime. This action also creates a WebTime directory in the directory My Documents\Visual Studio 2005\Projects in which the project’s solution files (e.g., WebTime.sln) are stored.

 

Step 2: Examining the Solution Explorer of the Newly Created Project

The next several figures describe the new project’s content, beginning with the Solution Explorer shown in Fig. 25.5. Like Visual Basic 2005 Express, Visual Web Developer cre-ates several files when you create a new project. It creates an ASPX file (i.e., Web Form) named Default.aspx for each new ASP.NET Web Site project. This file is open by default in the Web Forms Designer in Source mode when the project first loads (we discuss this momentarily). As mentioned previously, a code-behind file is included as part of the project. Visual Web Developer creates a code-behind file named Default.aspx.vb. To open the ASPX file’s code-behind file, right click the ASPX file and select View Code or click the View Code button (  ) at the top of the Solution Explorer. Alternatively, you can


expand the node for the ASPX file to reveal the node for the code-behind file (see Fig. 25.5). You can also choose to list all the files in the project individually (instead of nested) by clicking the Nest Related Files button—this option is turned on by default, so clicking the button toggles the option off.

 

The Properties and Refresh buttons in Visual Web Developer’s Solution Explorer behave like those in Visual Basic 2005 Express. Visual Web Developer’s Solution Explorer also contains the buttons View Designer, Copy Web Site and ASP.NET Configuration. The View Designer button allows you to open the Web Form in Design mode, which we discuss shortly. The Copy Web Site button opens a dialog that allows you to move the files in this project to another location, such as a remote web server. This is useful if you are devel-oping the application on your local computer, but want to make it available to the public from a different location. Finally, the ASP.NET Configuration button takes you to a web page called the Web Site Administration Tool, where you can manipulate various settings and security options for your application. We discuss this tool in greater detail in Section 25.6.

 

Step 3: Examining the Toolbox in Visual Web Developer

Figure 25.6 shows the Toolbox displayed in the IDE when the project loads. Figure 25.6(a) displays the beginning of the Standard list of web controls, and Fig. 25.6(b) displays the remaining web controls, and the list of Data controls used in ASP.NET. We discuss specific controls in Fig. 25.6 as they are used throughout the chapter. Notice that some controls in the Toolbox are similar to Windows controls.



Step 4: Examining the Web Forms Designer

 

Figure 25.7 shows the Web Forms Designer in Source mode, which appears in the center of the IDE. When the project loads for the first time, the Web Forms Designer displays the autogenerated ASPX file (i.e., Default.aspx) in Source mode, which allows you to view and edit the markup that comprises the web page. The markup listed in Fig. 25.7 was created by the IDE and serves as a template that we will modify shortly. Clicking the De-sign button in the lower-left corner of the Web Forms Designer switches to Design mode (Fig. 25.8), which allows you to drag and drop controls from the Toolbox onto the Web Form and see the controls. You can also type at the current cursor location to add text to the web page. We demonstrate this shortly. In response to such actions, the IDE generates the appropriate markup in the ASPX file. Notice that Design mode indicates the XHTML element where the cursor is currently located. Clicking the Source button returns the Web Forms Designer to Source mode, where you can see the generated markup.




Step 5: Examining the Code-Behind File in the IDE

 

The next figure (Fig. 25.9) displays Default.aspx.vb—the code-behind file generated by Visual Web Developer for Default.aspx. Right click the ASPX file in the Solution Explor-er and select View Code to open the code-behind file. When it is first created, this file con-tains nothing more than a partial class declaration. We will add the Page_Init event handler to this code momentarily.


Step 6: Renaming the ASPX File

Now that you’ve seen the contents of the default ASPX and code-behind files, let’s rename these files. Right click the ASPX file in the Solution Explorer and select Rename. Enter the new filename WebTime.aspx and press Enter. This updates the name of both the ASPX file and the code-behind file. The IDE also updates the Page directive’s CodeFile attribute in WebTime.aspx.

 

Step 7: Renaming the Class in the Code-Behind File and Updating the ASPX File

 

Although renaming the ASPX file causes the name of the code-behind file to change, this action does not affect the name of the partial class declared in the code-behind file. Open the code-behind file and change the class name from _Default (line 2 in Fig. 25.9) to WebTime, so the partial class declaration appears as in line 3 of Fig. 25.2. Recall that this class is also referenced by the Page directive in the ASPX file. Using the Web Forms De-signer’s Source mode, modify the Inherits attribute of the Page directive in WebTime.as-px, so it appears as in line 4 of Fig. 25.1. The value of the Inherits attribute and the class name in the code-behind file must be identical; otherwise, you’ll get errors when you build the web application.

 

Step 8: Changing the Title of the Page

Before designing the content of the Web Form, we change its title from the default Untitled Page (line 9 of Fig. 25.7) to A Simple Web Form Example. To do so, open the ASPX file in Source mode and modify the text in the title element—i.e., the text between the tags <title> and </title>. Alternatively, you can open the ASPX file in Design mode and modify the Web Form’s Title property in the Properties window. To view the Web Form’s properties, select DOCUMENT from the drop-down list in the Properties window; DOCUMENT represents the Web Form in the Properties window.

 

Step 9: Designing the Page

Designing a Web Form is as simple as designing a Windows Form. To add controls to the page, drag-and-drop them from the Toolbox onto the Web Form in Design mode. Like the Web Form itself, each control is an object that has properties, methods and events. You can set these properties and events visually using the Properties window or programmati-cally in the code-behind file. However, unlike working with a Windows Form, you can type text directly on a Web Form at the cursor location or insert XHTML elements from the Toolbox.

 

Controls and other elements are placed sequentially on a Web Form, much as text and images are placed in a document using word-processing software like Microsoft Word. Controls are placed one after another in the order in which you drag-and-drop them onto the Web Form. The cursor indicates the point at which text and XHTML elements will be inserted. If you want to position a control between existing text or controls, you can drop the control at a specific position within the existing elements. You can also rearrange existing controls using drag-and-drop actions. By default, controls flow based on the width of the page. An alternate type of layout is known as absolute positioning, in which con-trols are located exactly where they are dropped on the Web Form. You can enable absolute positioning in Design mode by selecting Layout > Position > Auto-position Options…., clicking the first checkbox in the Positioning options pane of the Options dialog that appears, then selecting the appropriate positioning option from the drop-down menu.

In this example, we use one piece of text and one Label. To add the text to the Web Form, click the blank Web Form in Design mode and type Current time on the Web server:. Visual Web Developer is a WYSIWYG (What You See Is What You Get) editor—whenever you make a change to a Web Form in Design mode, the IDE creates the markup (visible in Source mode) necessary to achieve the desired visual effects seen in Design mode. After adding the text to the Web Form, switch to Source mode. You should see that the IDE added this text to the div element that appears in the ASPX file by default. Back in Design mode, highlight the text you added. From the Block Format drop-down list (see Fig. 25.10), choose Heading 2 to format this text as a heading that will appear bold in a font slightly larger than the default. This action encloses the text in an h2 element. Finally, click to the right of the text and press the Enter key to start a new para-graph. This action generates a p (paragraph) element in the ASPX file’s markup. The IDE should now look like Fig. 25.10.

 

You can place a Label on a Web Form either by dragging-and-dropping or by double clicking the Toolbox’s Label control. Ensure that the cursor is in the new paragraph, then add a Label that will be used to display the time. Using the Properties window, set the (ID) property of the Label to timeLabel. In the Text property, delete timeLabel’s text—this text will be set programmatically in the code-behind file. When a Label does not con-tain text, its name is displayed in square brackets in the Web Forms Designer (Fig. 25.11) as a placeholder for design and layout purposes. This text is not displayed at execution time. We set timeLabel’s BackColor, ForeColor and Font-Size properties to Black, Yellow and XX-Large, respectively. To change the Label’s font properties, select the Label, expand the Font node in the Properties window and change each relevant property.


As the Label’s properties are set, Visual Web Developer updates the ASPX file’s contents. Figure 25.11 shows the IDE after setting these properties.

 

Next, set the Label’s EnableViewState property to False. Finally, select DOCUMENT from the drop-down list in the Properties window and set the Web Form’s EnableSes-sionState property to False. We discuss both of these properties later in the chapter.



Step 10: Adding Page Logic

 

Now that you’ve designed the user interface, you’ll add Visual Basic code to the code-be-hind file to obtain the server’s time. Open WebTime.aspx.vb by double clicking its node in the Solution Explorer. In this example, we add a Page_Init event handler (lines 7–11 of Fig. 25.2) to the code-behind file. Recall that Page_Init handles the Init event and con-tains code to initialize the page. The statement in line 10 of Fig. 25.2 sets timeLabel’s text to the server’s current time.

 

Step 11: Running the Program

 

After creating the Web Form, you can view it several ways. First, you can select Debug > Start Without Debugging, which runs the application by opening it in a browser window. If you created the application on your local IIS server (as we did in this example), the URL shown in the browser will be  http://localhost/WebTime/WebTime.aspx (Fig. 25.2), indicating that the web page (the ASPX file) is located within the virtual directory WebTime on the local IIS web server. IIS must be running to test the website in a browser. IIS can be started by executing inetmgr.exe from Start > Run..., right clicking Default Web Site and selecting Start. [Note: You might need to expand the node representing your computer to display the Default Web Site.]

 

If you created the ASP.NET application on the local file system, the URL shown in the browser will be  http://localhost:PortNumber/WebTime/WebTime.aspx, where Port -Number is the number of the randomly assigned port on which Visual Web Developer’s built-in test server runs. The IDE assigns the port number on a per-solution basis. This URL indicates that the WebTime project folder is being accessed through the root directory of the test server running at localhost:PortNumber. When you select Debug > Start Without Debugging, a tray icon appears near the bottom-right of your screen next to the computer’s date and time to show that the ASP.NET Development Server is running. The test server stops when you exit Visual Web Developer.

 

To debug your application, you can select Debug > Start Debugging to view the web page in a web browser with debugging enabled. You cannot debug a web application unless debugging is explicitly enabled by the Web.config file—a file that stores configura-tion settings for an ASP.NET web application. You will rarely need to manually create or modify Web.config. The first time you select Debug > Start Debugging in a project, a dialog appears and asks whether you want the IDE to modify the Web.config file to enable debugging. After you click OK, the IDE enters Running mode. You can exit Running mode by selecting Debug > Stop Debugging in Visual Web Developer or by closing the browser window in which the ASPX file is displayed.

 

To view a specific ASPX file, you can right click either the Web Forms Designer or the ASPX filename (in the Solution Explorer) and select View In Browser to load the page in a web browser. Right clicking the ASPX file in the Solution Explorer and selecting Browse With… also opens the page in a browser, but first allows you to specify the web browser that should display the page and its screen resolution.

 

Finally, you can run your application by opening a browser window and typing the web page’s URL in the Address field. When testing an ASP.NET application on the same computer running IIS, type  http://localhost/ProjectFolder/PageName.aspx, where ProjectFolder is the folder in which the page resides (usually the name of the project), and PageName is the name of the ASP.NET page. If your application resides on the local file system, you must first start the ASP.NET Development Server by running the application using one of the methods described above. Then you can type the URL (including the PortNumber found in the test server’s tray icon) in the browser to execute the application.

Note that all of these methods of running the application compile the project for you. In fact, ASP.NET compiles your web page whenever it changes between HTTP requests. For example, suppose you browse the page, then modify the ASPX file or add code to the code-behind file. When you reload the page, ASP.NET recompiles the page on the server before returning the HTTP response to the browser. This important new behavior of ASP.NET 2.0 ensures that clients always see the latest version of the page. You can man-ually compile a web page or an entire website by selecting Build Page or Build Site, respec-tively, from the Build menu in Visual Web Developer.

 

Windows Firewall Settings

 

If you would like to test your web application over a network, you may need to change your Windows Firewall settings. For security reasons, Windows Firewall does not allow remote access to a web server on your local computer by default. To change this, open the Windows Firewall utility in the Windows Control Panel. In Windows XP, Click the Ad-vanced tab and select your network connection from the Network Connection Settings list, then click Settings…. On the Services tab of the Advanced Settings dialog, ensure that Web Server (HTTP) is checked. In Windows Vista click the Change settings link, then click Continue in dialog that appears. Select the Exceptions tab and place a check next to World Wide Web Services (HTTP).

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.