O'Reilly logo

Learning ASP.NET 2.0 with AJAX by Dan Hurwitz, Jesse Liberty, Brian MacDonald

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making the HelloWorld Web Site Interactive

You've created your web page, but it doesn't do much of anything right now. To make your page come alive, you need to add some controls to it. Everything that you'll find in the Toolbox is a control, and you can add controls to your pages simply by dragging them onto either the design surface or into the Source view.

For this first program, you'll add a button and a label to your page, making it look like what you saw back in Figure 1-1. Follow these steps:

  1. Click the Design tab at the bottom of the main window to ensure that you are in Design view.

  2. If the Toolbox window is not already pinned in place, click on the pushpin icon in its title bar to pin it in place.

  3. If the Standard category of the Toolbox is not expanded, click on the plus symbol and expand it. You should be able to see a number of basic controls listed in the Toolbox, such as "Label," "TextBox," and "Button."

  4. Click on a Button control in the Toolbox, and drag it onto the design surface.

  5. Click on a Label control in the Toolbox, and drag that onto the design surface next to the button.

At this point, your IDE should appear similar to Figure 1-6.

After you've added the button and label to your HelloWorld application, the design view should look like this.

Figure 1-6. After you've added the button and label to your HelloWorld application, the design view should look like this.

This is a good time to stop and run your program, to see what it does so far. There are three ways to do so:

  • Click on the menu item Debug → Start Debugging

  • Press the F5 keyboard shortcut

  • Click on the Start Debugging icon (

    After you've added the button and label to your HelloWorld application, the design view should look like this.

    ) on the toolbar

Because this is the first time you've run the program, the IDE will detect that your web.config file is not set to allow debugging and will offer to make that adjustment for you, as shown in Figure 1-7.

You'll see this Debugging Not Enabled dialog box the first time you run your application. Just select the first option and click OK to keep going.

Figure 1-7. You'll see this Debugging Not Enabled dialog box the first time you run your application. Just select the first option and click OK to keep going.

It's not important to know what a web.config file is right now, but we'll explain it later. For now, click OK to allow the IDE to modify the configuration file.

After clicking OK, your application begins, your default browser opens, and your button is displayed, as shown in Figure 1-8.

This is what HelloWorld looks like in the browser before you do any coding. The button doesn't do anything yet, though.

Figure 1-8. This is what HelloWorld looks like in the browser before you do any coding. The button doesn't do anything yet, though.

Click the button. Unfortunately, nothing happens. In the status bar of the browser, you may see evidence that the page is sent back to the server—this is called a post back, which we'll describe in Chapter 2. For now, close the browser to end the application; then return to the Design view in the IDE.

All web applications are "event-driven," meaning that for anything to happen—for any of your controls to take any action in the page—an event must fire. Then, behind the scenes, a block of code called an event handler is called to handle that event. All of this firing of events and calling event handlers is automatically wired in by ASP.NET, and is far easier to set up than it is to describe, so don't panic!

Not surprisingly, all buttons have a built-in event called Click. The Click event is automatically fired whenever the user clicks a button. At the moment, when you click the button on your web page, the event is fired, but there's no event handler yet, so nothing happens.

Creating the event handler for the Click event is easy. In Design view, double-click the button control. This instructs the IDE to create an event handler and name it. The IDE will name your event handler as follows: the ID of the control, followed by an underscore, followed by the name of the event. If you do not explicitly name the ID for this button (we'll discuss naming events and event handlers later), the IDE will apply the default ID of Button1. Thus, the name of the event handler will be set to Button1_Click.

The IDE then displays the code-behind page and an event handler stub for you to complete. Here you can add your own custom code to specify the operations you want the handler to perform when it's called.

Give it a try. Switch to Design view and double-click on the button. The code-behind file containing your newly created event handler will open, as shown in Figure 1-9.

Because the IDE gave your button a default name of Button1, the click event handler is named Button1_Click by default. Later you'll see how to name your own buttons, and if you wish, name your own event handlers.

In this event handler, whenever the user clicks the button, you want to set the Text property of the Label control, which the IDE named Label1, to the phrase "Hello World." To do that, you need to assign that string of letters to the Text property of the Label. The event handler for Button1_Click appears as shown in Example 1-1.

Example 1-1. The Button1_Click event handler in HelloWorld, before you change it

Protected Sub Button1_Click( _
       ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click
End Sub
When you double-click the button in HelloWorld, you'll be taken to the code-behind page, where you can modify the event handler yourself.

Figure 1-9. When you double-click the button in HelloWorld, you'll be taken to the code-behind page, where you can modify the event handler yourself.

Tip

Please note that in this listing, and in other listings throughout this book, we've reformatted the code to fit the width of the printed page. In Visual Basic, the line continuation character is the underscore (as seen at the end of the first three lines, used here and elsewhere to make legal VB code). Your IDE, or you, may place many of these commands on a single line without the continuation character(s).

To assign the text string to the label, click inside the event handler, and then type the following code:

	Label1.Text = "Hello World"

When you're done, the event handler should look like Example 1-2.

Example 1-2. The Button1_Click event handler, after your addition

Protected Sub Button1_Click( _
       ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click
             Label1.Text = "Hello World"
End Sub

After you've added the code to your event handler, run the program again. When the page opens in your browser, click the button. Your event handler is working now, so you should see the text label change to "Hello World," as displayed back in Figure 1-1.

What has happened is that when you click the button, the page is sent back to the server, where your event handler is evaluated, and the string "Hello World" is assigned to the Text property of the Label control. A new page was created by the server and sent back down the "wire" to the browser as pure HTML, and then displayed on your screen. Close your browser to stop the application and return to the IDE.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required