Visual Studio .NET is a full-featured IDE that provides all sorts of productivity tools for developing .NET applications, both for the Windows desktop and for the Web. These features include:

All of these features, and more, will be covered in subsequent chapters. For now, you will use the IDE to create a simple Hello World web page.

Open Visual Studio .NET. You should see a window similar to Figure 2-4.

Figure 2-4. Start page in Visual Studio .NET

Click on the New Project button in the middle of the screen. This brings up the New Project dialog box shown in Figure 2-5.

Figure 2-5. New Project dialog box in Visual Studio .NET

The left side of this dialog box allows you to choose the type of project. In Figure 2-5, Visual C# Projects is selected. You could click on Visual Basic Projects or Visual C++ Projects if you would rather work in either of those languages. The example will be shown in C# and VB.NET; as you will see, it is virtually identical in both languages.

The right side of the dialog box lists the various project templates to choose from. Select ASP.NET Web Application.

The Name and Location edit fields will contain default values. Change the Name, by editing the Location field, from WebApplication1 to HelloWorld. As you do so, you will see the label below the Location edit field change to:

Project will be created at HTTP://localhost/HelloWorld.

By default, localhost corresponds to the physical directory c:inetpubwwwroot. This line tells you that it will create this new web application in the physical directory c:inetpubwwwrootHelloWorld. Click OK.

Visual Studio .NET will now present a design surface in the middle of the screen. Before proceeding any further, change the pageLayout mode from GridLayout to FlowLayout. This will make the resulting HTML simpler and more in line with our previous examples. To do so, click anywhere on the design surface. The Properties Window, visible in the lower right of the screen, should be visible with the word DOCUMENT showing in the edit field at the top of the Properties Window. If the Properties Window is not visible, choose Properties Window from the View menu or press F4.

In the Properties Window, slide down until the pageLayout property is visible. Click on the displayed value, GridLayout. A drop-down arrow will appear. Click on it and select FlowLayout. Immediately, the design surface changes appearance. The results will look something like Figure 2-6.

Figure 2-6. Setting FlowLayout in Visual Studio .NET

Now you want to add some labels. Notice that the Toolbox on the left edge of the screen currently displays Web Forms controls. You will use those in a moment. For now, you want to place some HTML controls, so click on the HTML button near the bottom of the Toolbox.

Click on the Label control and drag it to the design surface. It will automatically go to the upper-left corner of the design surface and contain the word Label. Click on the control, backspace over the word Label, and type the words Hello World. It will look something like Figure 2-7.

Figure 2-7. Placing an HTML label in Visual Studio .NET

Notice the drop-down lists in the toolbar just above the design surface, one of which displays the word Normal. These are part of the Formatting menu. If they are not visible, choose Toolbars from the View menu and click on Formatting.

The drop-down containing the word Normal displays the available block formats. Click on the down arrow and select Heading 1. Then click and drag on the resizing handles to stretch the control so that the phrase does not wrap. The screen should look something like Figure 2-8.

Figure 2-8. Resizing an HTML label in Visual Studio .NET

Now add two more HTML labels. To get to the next line on the design surface, click on the design surface outside the Hello World label and press the Enter key. The cursor will move to the next line.

Drag another HTML Label control onto the design surface, change its text to ASP.NET Style, change its block format to Heading 1, and then resize it.

Move to the next line and create one more HTML label with the words Using Visual Studio .NET. Set its block format to Heading 2 and resize it. When you are done, the screen should look something like Figure 2-9.

Figure 2-9. HTML labels in Visual Studio .NET

Now it’s time to place a control that will display the date and time. To do this, move to the next line on the design surface by clicking on the design surface at the end of the last control and pressing Enter. Then click on the Web Forms button on the Toolbox.

Drag a Label control onto the design surface. It will contain the text Label. If you look at the Properties Window, the object will have an ID of Label1.

Look at the Solution Explorer on the right side of the screen. If the Solution Explorer is not visible, choose Solution Explorer from the View menu, or press Ctrl+Alt+L.

Right-click on WebForm1.aspx and select View Code. A code window will appear where the design surface was. The tab at the top of the code window will be labeled WebForm1.aspx.cs*.

Slide down the code window until you see the Page_Load method. In C#, this will look like:

private void Page_Load(object sender, System.EventArgs e)
{
   // Put user code to initialize the page here
}

and in VB.NET, it will look like:

Private Sub Page_Load(ByVal sender As System.Object, _
                      ByVal e As System.EventArgs) Handles MyBase.Load
    'Put user code to initialize the page here
End Sub

Put your cursor at the end of the comment line (after the word here) and press the Enter key. This will move the cursor to the beginning of the next line, properly indented, ready to type. If you are working in C#, enter the following lines of code:

Label1.Text = "The date and time is " +
   DateTime.Now.ToString(  );

If you are working in VB.NET, enter these lines of code:

Label1.Text = "The data and time is " & _
      DateTime.Now.ToString(  )

When you type the period after Label1, you see a drop-down of all the possible methods and properties that are valid in this context. (If you don’t see the drop-down list, verify that the label name is spelled properly and, if using C#, that the casing is correct.) This is the IntelliSense technology at work.

You can either scroll down and select the proper method or function by pressing Tab or any other key, or start typing the desired method or function to narrow the search. When you get to the desired selection, press Tab or any other key. The Tab key enters that selection into your code without your having to type the entire word; pressing any other key enters the selection into your code followed by the key you pressed.

The completed Page_Load method in the code window should look like the following in C#:

private void Page_Load(object sender, System.EventArgs e)
{
   // Put user code to initialize the page here
   Label1.Text = "The date and time is " +
      DateTime.Now.ToString(  );
}

and like this in VB.NET:

Private Sub Page_Load(ByVal sender As System.Object, _
                      ByVal e As System.EventArgs) Handles MyBase.Load
   'Put user code to initialize the page here
    Label1.Text = "The date and time is " & _
      DateTime.Now.ToString(  )
End Sub

Press F5 to run the web application. When either the C# or VB.NET version is run it will look like the browser shown in Figure 2-10.

Figure 2-10. Hello World in Visual Studio .NET

You have now learned how to write an extremely simple ASP.NET web application. The remaining chapters will show you, in greater detail, how to develop rich, robust web applications using many of the controls and tools available from ASP.NET.