Visual Studio .NET

It’s certainly possible to create ASP.NET Web applications in Notepad or another text editor, but if you’re doing serious ASP.NET or component development, you’ll probably want to work within the Visual Studio .NET environment. The advantages of Visual Studio .NET over simple text editors include

• Robust management of project files and multiple projects

• Integration with the Microsoft Visual SourceSafe source-code control environment

• Visual Tools for working with Web services, Web Forms server controls, and database tools

• Packaging and deployment services for Web applications

• Support for multiple languages within a single IDE, including cross language inheritance and debugging

That’s just a brief list. There’s much more to the tool than can be covered in a single chapter. So without further ado, let’s look at how to create projects and pages in the Visual Studio .NET environment.

Creating Applications

One of the first things you’re going to want to do in order to work with ASP.NET in Visual Studio .NET is create a new project, or in Visual Studio .NET parlance, a Web application.

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 Basic 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 following illustration.

     

   • 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.

Adding Server Controls

Now that you’ve created a page for your new application, what can you do with it? Well, let’s begin by making it display a “Hello World!” greeting to the client. By default, Web Forms are opened in GridLayout mode. Since GridLayout relies on cascading style sheets (CSS), which are not supported in all browsers, you might want to change the page layout to FlowLayout mode.

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 filename, where filename is the name of the file you’re currently editing (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. If not, click the control to select it.

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 = FalseButton1.Visible = False

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

   

Building and Testing Your Page

Because you modified the code-behind module for the Web Form, you need to build your project before you can browse the page. (You’ll learn more about code-behind in later chapters.) Building is the process of compiling all of the code modules in the project so they’ll be available to the pages and modules that call them. To build the project, from the Build menu, select Build Chapter_02 (or Build Solution, which will build all projects in the solution).

Once you’ve saved the Web Form page and its code-behind module and built the application, you can test the page.

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.)