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:
Click the Design tab at the bottom of the main window to ensure that you are in Design view.
If the Toolbox window is not already pinned in place, click on the pushpin icon in its title bar to pin it in place.
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."
Click on a
Button control in the
Toolbox, and drag it onto the design surface.
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.
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 (
) 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.
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.
After clicking OK, your application begins, your default browser opens, and your button is displayed, as shown in Figure 1-8.
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
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
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
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
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
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.
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.