Create an ASP.NET Web application

1. Launch Visual Studio .NET using the techniques you learned in Chapter 1.

2. Open the New Project dialog box using one of the following methods:

   • Click the Create A New Project link on the Visual Studio .NET Start Page (displayed by default when you first open Visual Studio .NET).

   • Click the New Project button (shown in the following illustration), located on the standard toolbar.

     

   • From the File menu, select New, and then Project.

3. In the New Project dialog box (see the following illustration), under Project Types, select the Visual C# Projects folder, then select the appropriate template (ASP.NET Web Application). Type the location as http://localhost/Chapter_02, and then click OK.

   Visual Studio .NET will create a new Web application along with physical and virtual directories for the project.

   

That’s it! You’ve created your first ASP.NET Web application. Note that this application is separate from the Chapter_02 project included with the practice file installation, which is contained in the aspnetsbs solution. Next we’ll look at how to add new pages.

In your new Web application, you’ll notice that Visual Studio .NET has already added a page named WebForm1.aspx to the project for you and opened it in the editor. Your Visual Studio .NET screen should look similar to the following illustration. However, since one page is rarely enough for most sites, let’s look at how to add a new page to your Web application.

Create a new ASP.NET page (Web Form)

1. Add a new Web Form to your application.

   As with creating a new project, there are several ways to add a new ASP.NET page (Web Form) to your application. The method you choose depends largely on how you like to work. Here are three ways to accomplish this task, although there are others:

   • In the Solution Explorer window, right-click the application name, then select Add, and then select Add Web Form, as shown in the illustration on the following page.

     

   • On the Visual Studio .NET toolbar, click the Add New Item button (shown in the following illustration) and then select Web Form from the Templates list.

     

   • From the Project menu, select Add Web Form.

   Any of these methods will open the Add New Item dialog box, shown in the following illustration.

   

2. In the Add New Item dialog box, verify that the Web Form template is selected and name the new page Hello.aspx. Click Open.

   Visual Studio .NET creates the page, adds it to the project, and opens it in the Web Forms Designer, as shown in the following illustration.

   

   Tip

   While in the Add New Item dialog box, a brief description of each template is displayed along the bottom of the list window. If you decide to browse the different templates, don’t forget to select the proper one (Web Form) before clicking Open.

Modify Web Form properties

1. With the Web Form open in the Visual Studio .NET designer, click the Web Form page to ensure it is selected.

   When the page is selected, the word DOCUMENT should appear in the drop-down box at the top of the Properties window.

2. Select the pageLayout property from the Properties window, and then use the drop-down list to change its value to FlowLayout, as shown in the following illustration.

   

3. Save the page by selecting File, and then Save (or by clicking the Save button on the toolbar).

   Until you add controls (or HTML elements), the page will display the following message in Design view.

   

Add controls to a Web Form

1. With the Web Form open in Design mode, place your mouse over the Toolbox tab. (By default, it’s found to the left of the code editor/ designer window.)

2. When the Toolbox appears, ensure that the Web Forms palette is active. (The title bar of the active palette is shown immediately above the controls displayed in the Toolbox.) If it isn’t active, click on its title bar to activate it. Note that the Web Forms palette is available only when a page is in Design mode.

3. With the Web Forms palette active, double-click the Label control entry to add an ASP.NET Label control to the page. (You might have to let the toolbox hide itself by moving the mouse pointer away from it to see the label on the form.) Once you’ve added the label, it should be selected by default.

4. To make the Label control display the text you want, you need to change its Text property. Select the Text property in the Properties window, and then change the text (by default, Label) to Enter a name:, as shown in the following illustration.

   

5. Click the background of the page to place the cursor after the Label control you added to the page.

6. Using the Toolbox as in step 3, add a TextBox control to the page, and then add a Button control to the page.

7. Using the same technique as in step 4, change the Text property of the Button control to Submit.

8. Save the page by clicking the Save button (shown in the following illustration) on the toolbar. You can also save by selecting Save <filename> from the File menu.

   

Add event handler code

1. To make the page do anything useful, you need to add some code, so double-click the Button control.

   This will open up the code-behind module for the Web Form and create an event handler procedure called Button1_Click.

2. Add the following code to the Button1_Click procedure:

   Label1.Text = "Hello, " + TextBox1.Text + "!" TextBox1.Visible = false Button1.Visible = false;

3. Save the code-behind module, which should now look like the following illustration.

   

Test your page

1. Right-click the page in Solution Explorer and select View In Browser.

   The result should look like the following illustration. (You can close the Output window if you want to see more of a page.)

   

2. Enter your name in the text box and click Submit.

   The result should be similar to the following illustration. (Note that the Web toolbar shows the address of the page being browsed. You can enter this address in a browser window on your machine to view the page in a non-embedded browser window.)