Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

1.3 Hello World

It is a long-standing tradition among programmers to begin the study of a new language by writing a program that prints "Hello World" to the screen. In deference to tradition, our first web page will do just that.

The tool you are most likely to use when developing ASP.NET applications is an integrated development environment (IDE), such as Visual Studio .NET. However, you may use any editor you like even the venerable text editor Notepad.

There are a number of advantages to using an IDE such as Visual Studio .NET. The Visual Studio .NET editor provides indentation and color coding of your source code, the IntelliSense feature helps you choose the right commands and attributes, and the integrated debugger helps you find and fix errors in your code.

The disadvantage of using an IDE, however, is that it may do so much work for you that you don't get a good feel for what is going on in your application. It is like bringing your car in to the mechanic. He does all the work for you, but you never really learn how your engine works.

As a beginner, you may be better off doing more of the work yourself, giving up the support of the IDE in exchange for the opportunity to see how things really work. In this chapter, you will use a simple text editor to create the source code for the first several iterations. At the end of the chapter, you will use Visual Studio .NET to create the same web page. (For the remainder of the book, you will find both examples that are created using a text editor and examples that are developed in Visual Studio .NET.)

Back in the old days, before ASP and ASP.NET, web pages were created with simple HTML. To better appreciate the features of ASP.NET, you will first create the Hello World web page in HTML, then convert it to ASP, and finally convert it to ASP.NET.

A Word About the Samples in This Book

In real life, web sites run from a web server, which is typically a separate machine (or machines) running a web server program, such as Microsoft Internet Information Server (IIS). In that case, a browser makes a request to the server, which processes the request and sends HTML back to the browser.

If you have a web server available, you could certainly put the samples from this book on the server and run them that way. Suppose the server domain name is MyServer.com and the web page you want to test is HelloWorld.htm, which is located in the virtual root directory of the web server. The URL to be entered in your browser would be:

www.MyServer.com/HellowWorld.htm

It's easier to do your development and testing on a single machine, then deploy to a web server for final testing and production. You must have IIS set up on your local machine.

IIS (the name has evolved to Internet Information Services) is included with Windows 2000 Professional and Windows XP Professional. It is not installed by default, although it can be installed if a custom Win2K/WinXP installation is performed. It can also be installed at any time by going to Control Panel, selecting Add/Remove Programs, and clicking on the Add/Remove Windows Components button.

To access the virtual root of a local copy of IIS, the URL should refer to localhost. By default, localhost points to the physical directory c:\inetpub\wwwroot.

Typically, you will define other virtual directories using Internet Services Manager (found in Control Panel Administrative Tools). These virtual directories can be subdirectories anywhere on the local machine. If you have a directory defined on your C drive named c:\myProjects, you can define a virtual directory named projects that you "point" to that directory. If your HelloWorld.htm file is located in c:\myProjects, then the URL to enter in your browser would be:

localhost/projects/HelloWorld.htm

For now, you will create a subdirectory called c:\projects\Programming ASP.NET. Then you will use Internet Services Manager to define a virtual directory, called ProgAspNet, pointing to that location. If the HTML file you want to run, HelloWorld.htm, is in that directory, then the URL to enter in your browser will be:

localhost/ProgAspNet/HelloWorld.htm

1.3.1 The HTML Version

Straight HTML provides a means of creating and presenting static web pages. This book is not a tutorial on how to write HTML, and we assume you know enough HTML to follow the simple examples provided. For background reading, see HTML: The Definitive Guide, by Chuck Musciano and Bill Kennedy (O'Reilly). To get started, create a very simple Hello World HTML file, as shown in Example 1-1, and call it HelloWorld1.htm. The output is shown in Figure 1-2.

Example 1-1. Code listing for HelloWorld1.htm

<html>
   <body>

      <h1>Hello World</h1>

   </body>
</html>

Figure 1-2. Output from Example 1-1

The HTML page displays the static text, using the HTML heading1 format. If you want to include dynamic content, such as the results of a query against a database or even the current time, then a static HTML page is not the thing to use. For that you need some sort of server processing. There are a number of alternatives; we will focus on ASP and then on ASP.NET.

1.3.2 The ASP Version

ASP allows the programmer to intersperse scripting code snippets within the HTML code. This scripting code can be written in a scripting language such as JavaScript or VBScript. Adding embedded script to your sample web page allows you to insert dynamic content. Modify the previous code listing, converting it to ASP, by changing the filename extension to .asp and adding VBScript to display the current time, as shown in Example 1-2. The output is shown in Figure 1-3.

Example 1-2. Code listing for HelloWorld1.asp

<html>
   <body>

      <h1>Hello World</h1>
      <br/>
      <h2>The date and time is <% =Now%>.</h2>

   </body>
</html>

Figure 1-3. Output from Example 1-2

It may not look like much, but this represents a vast improvement over static HTML. ASP allows you to create web sites full of rich and dynamic content. The scripting allows for queries, reads and writes against databases, implementation of programming logic, control of the appearance of web pages in response to user actions or returned data, and a host of other features.

1.3.3 Hello World the ASP.NET Way

You will complete this evolutionary journey by changing your Hello World web page from ASP to ASP.NET. A key difference in ASP.NET is that you no longer use interpreted languages, but instead use compiled languages. Typically, ASP.NET applications are built using either C# or VB.NET. In either case, the performance will be a great improvement over script.

A significant theme of this book is that the choice between C# and VB.NET is purely syntactic. You can express any ASP.NET programming idea in either language. We suggest you write in whichever language you're more comfortable with. The transition from VBScript to VB.NET may be slightly easier than to C#, but much of the Microsoft and third-party documentation is in C#. In this book we will show most examples in both languages, though we confess to a slight preference for C# because it is a bit more terse.

For a full exploration of VB.NET, see Programming Visual Basic .NET, Second Edition, by Jesse Liberty (O'Reilly), and for C#, see Programming C#, Third Edition by Jesse Liberty (O'Reilly).

Example 1-3 shows vbHelloWorld1.aspx in VB.NET, and Example 1-4 shows the same program in C#.

Example 1-3. Code listing for vbHelloWorld1.aspx

<%@ Page Language="VB" %>
<html>
   <body>

      <h1>Hello World</h1>
      <h1>ASP.NET Style</h1>
      <h2>Using VB .NET</h2>

      <br/>
      <h2>The date and time is <% =DateTime.Now(  ) %>.</h2>

   </body>
</html>

Example 1-4. Code listing for csHelloWorld1.aspx

<%@ Page Language="C#" %>
<html>
   <body>

      <h1>Hello World</h1>
      <h1>ASP.NET Style</h1>
      <h2>Using C#</h2>

      <br/>
      <h2>The date and time is <% =DateTime.Now.ToString(  ) %>.</h2>

   </body>
</html>

Note that the changes required to convert the ASP page to ASP.NET are minimal:

Rename the file, changing the extension from .asp to .aspx.
Add a first line to the code, called a page directive, which tells the compiler which language to use for all in-line code. Page directives can also be used to pass a variety of configuration settings to the compiler and will be discussed in more detail later.
Change the script code to code written in the desired language.

The output from these changes is shown in Figure 1-4.

Figure 1-4. Output from Example 1-3

The ASP.NET version uses compiled code (either C# or VB.NET), which gives it a performance advantage. That advantage is meaningless in this simple example but can be very significant with larger and more complex programs.

1.3.4 Hello World Using Visual Studio .NET

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:

A Start page, which allows you to set user preferences for IDE behavior and provides easy access to new and existing projects.
Dynamic, context-sensitive help, which allows you to view topics and samples relevant to your current selection. You can also search the MSDN library from within the IDE.
IntelliSense technology and code completion, which allow you to enter code with fewer errors and much less typing. Syntax errors are flagged immediately, allowing you to fix problems as they are entered.
The tabbed document interface, which provides convenient access to multiple design and code windows.
All the languages use the same code editor for a shortened learning curve. Each language can have specialized features, but all benefit from features such as incremental search, code outlining, collapsing text, line numbering, and color-coded keywords.
The HTML editor, which provides both Design and HTML views that update each other in real time.
The Solution Explorer, which displays all the files comprising your solution (which is a collection of projects) in a hierarchical, visual manner.
The integrated Debugger, which allows you to set breakpoints and step through code, even across multiple languages.

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 1-5.

Figure 1-5. 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 1-6.

Figure 1-6. 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 1-6, Visual Basic Projects is selected. You could click on Visual C# 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:\inetpub\wwwroot. This line tells you that it will create this new web application in the physical directory c:\inetpub\wwwroot\HelloWorld. 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 1-7.

Figure 1-7. 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 1-8.

Figure 1-8. 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 1-9.

Figure 1-9. Resizing an HTML label in Visual Studio .NET

If you want to see or edit the HTML directly, click on the HTML tab at the bottom of the design surface. The Design and HTML tabs allow you to toggle between graphical design and code-editing modes.

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 1-10.

Figure 1-10. 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.

You are probably wondering about the differentiation between HTML controls and Web Forms controls. The reasons and de tails for this will fill the next several chapters. For now, suffice it to say that "classic" HTML controls are more resource-efficient, but the controls contained in the Web Forms toolbox allow for server-side processing.

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

If you are working in Visual Basic .NET, the tab will be labeled WebForm1.aspx.vb*. In either case, the asterisk indicates that the file has not yet been saved.

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
}

In VB.NET, it will look like this:

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 date 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(  );
}

It will look 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 1-11.

Figure 1-11. Hello World in Visual Studio .NET

Although the code is nearly identical between the two languages, there are some differences worth noting:

C# code is case-sensitive while VB.NET is not.
All C# statements must end with a semicolon.
While both languages mostly ignore whitespace outside of quotes, VB.NET statements cannot span multiple lines without using a line-continuation character (the underscore preceded by a space). C# statements can span multiple lines.

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.