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

Creating HelloWorld

After you've named your new web application and chosen a place to host it, the IDE will look more or less like Figure 1-4. This is where you do the real work of putting your site together.

Tip

Which exact windows you see and how they are presented may be influenced by options you've chosen. In your IDE, you can always open new windows from either the View or Window menu and you can undock, move, and redock the various windows using the mouse and the on-screen docking indicators.

Initial IDE screen for HelloWorld. This is what you'll see after you've named your web site, chosen a language, and created a directory for it.

Figure 1-4. Initial IDE screen for HelloWorld. This is what you'll see after you've named your web site, chosen a language, and created a directory for it.

In Figure 1-4, you see the main window, which shows the page markup: HTML plus ASP.NET declarations and controls. Also note the two tabs at the bottom of this pane, labeled Design and Source. You'll be using these two tabs a lot as you create your pages.

To start, click on the Design tab. When you click this tab, the middle window of your IDE becomes the design surface. On the design surface, you can drag and drop items such as buttons, text fields, labels, and so on from the Toolbox, which you'll see in a moment, where they automatically become part of your application. Each item that you can drag onto the design surface is called a control. You'll be reading more about controls in Chapter 2 and throughout this book.

Next, click on the Source tab. This view allows you to see the same controls, but displayed as HTML and ASP.NET markup. When you drag a control onto the design surface, the IDE automatically adds the appropriate markup to make that control part of the page. You can view and adjust that markup from the Source tab and even drag controls from the Toolbox directly onto the Source view. As you switch back and forth between Source and Design view, they will remain consistent with one another as they are two views of the same information.

Tip

Many working programmers and even Microsoft itself will refer to markup as source code. Other programmers draw a distinction between markup (HTML, ASP.NET controls, XML, etc.) on the one hand, and source code (C#, VB.NET, JavaScript) on the other. This can, and does cause confusion, and all ASP.NET programmers learn to differentiate as best we can by context. The Source tab shows markup or HTML source code. The "code-behind" page, discussed below, shows C# or VB.NET source code. Not a perfect naming system, but there you have it. In practice, markup and ASP.NET source code have become synonymous.

Again, referring to Figure 1-4, the window at the right edge of the screen displays the Solution Explorer, which is used for navigating and working with the files that make up your web site. The Database Explorer tab (at the bottom of the Solution Explorer window) allows you to create and work with data connections.

Below the Solution Explorer window is the Properties window, which displays the properties for the currently selected object on the page. Properties are settings that are specific to each control, so the content of this window changes, depending on what control you've clicked on. You'll be reading a lot more about properties in the discussion on controls in Chapter 2.

On the left edge of the Main window, click on the Toolbox tab to display the Toolbox. Inside the Toolbox, you'll find a number of expandable categories that contain just about every control you'd want to use on your web page. If the Toolbox tab is not visible, click on View → Toolbox to display it. Initially it will be displayed in expanded view, as shown on the left side of Figure 1-5. Click on the + or − icon to collapse or expand each section.

The Toolbox provides quick access to just about everything you'd want to put on your page. Here, the Toolbox is shown expanded on the left, and collapsed on the right.

Figure 1-5. The Toolbox provides quick access to just about everything you'd want to put on your page. Here, the Toolbox is shown expanded on the left, and collapsed on the right.

You can "pin" any of the auxiliary windows in place, keeping them visible, by clicking the pushpin icon in the title bar of the window. When "unpinned," they will auto-hide, showing only their tab. Clicking on a tab while unpinned will make them temporarily visible.

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