Chapter 5: Building Web Applications

The Location Drop-down

Wondering what’s implied by setting Location to File System? Earlier, we mentioned that Visual Web Developer contains a built-in web server. When you’re working with a web site project that’s saved to the file system, Visual Web Developer’s web server is used to execute the project.

You can create a new web project in IIS by changing the Location to HTTP. In that case, you’d need to specify an HTTP location, such as http://localhost/Dorknozzle. If you did so, Visual Web Developer would create a new folder named Dorknozzle in the web server’s root directory. We’ll take a look at IIS (or Cassini) a bit later.

Meeting the Features

Once you click OK, your project will be created, along with a few default files, and you’ll be presented with the first page of your project. It should look something like the one shown in Figure 5.4.

Figure 5.4. Your new Dorknozzle web application

148

Meeting the Features

Don’t be daunted by the many forms and windows around your screen—each has something to offer! Visual Web Developer is very flexible, so you can resize, relocate, or regroup the interface elements that appear. We’ll spend the next few pages taking a brief tour of these windows, though we’ll discover even more as we progress through the chapters of this book.

The Solution Explorer

The Solution Explorer, which by default is located in the upper right-hand part of the Visual Web Developer window, provides the main view of your project, and displays the files of which your project is composed. As Figure 5.5 shows, the root node is the location of your project; beneath the root node you can see that Visual Web Developer has already created other elements for you.

Figure 5.5. The Solution Explorer

The files that are created for you will differ depending on the type of project you’re working on, and the language you’ve chosen. If you’re using C#,

Web.config won’t appear in your list. Don’t worry—we’ll create this file later.

Let’s review the functions of the three child nodes shown in Figure 5.5:

App_Data is a special folder that ASP.NET uses to store database files. You’ll learn more about this folder in Chapter 13.

Default.aspx is the default web form that Visual Web Developer creates for you. If you look closely, you’ll see that you can expand the Default.aspx node by clicking the + sign to its left. If you expand the node, you’ll find a code-behind file named Default.aspx.vb, or Default.aspx.cs, depending on the language you selected when you started the project. Visual Web Developer can work with web forms that use a code-behind file, as well as with those that don’t.

149

Chapter 5: Building Web Applications

Web.config is your web application’s configuration file. By editing Web.config, you can set numerous predefined configuration options for your project (for instance, you can enable debug mode). You can also define your own custom project-wide settings that can then be read from your code (such as the administrator’s email address, the project name, your favorite color, or any other simple value you’d like to store in a central place). We’ll come back to this file later in the chapter.

An icon sits beside each node, reflecting its type. If you right-click on each node, a list of options that are specific to that particular node type will appear. For example, right-click on the root node, and you’ll see a list of options that affect the project as a whole. Double-click on a file, and that file will open in an appropriate editor (for instance, double-clicking on a web form will open that file in the Web Forms Designer).

The Web Forms Designer

The Web Forms Designer is the place where you’ll spend most of your time working with Visual Web Developer. The Web Forms Designer is a very powerful tool that allows you to edit web forms, web user controls, and master pages. You can edit these files in Source View, where you can see their code, or in Design View, which provides a WYSIWYG (what you see is what you get) interface.

By default, when you start a new web site project, the Web Forms Designer will display the contents of Default.aspx, as illustrated in Figure 5.6.

Tabbed quick links to the currently open files or windows appear at the top of the interface. In Figure 5.6, only Default.aspx, and the Start Page (the window that was initially loaded when Visual Web Developer started) are open. Each kind of file is opened by a different editor or designer, so when you open a database table, for example, you’ll see a different view from the one shown in Figure 5.6.

If you click the Design button at the bottom of the Web Forms Designer, you’ll see a WYSIWYG interface that’s similar to those of Dreamweaver, FrontPage, and other similar tools. Since there’s no content in the page as yet, you’ll see an empty window, but you can populate it by typing text, or dragging controls from the Toolbox (which we’ll discuss in a moment) onto the page. In Figure 5.7, I’ve typed Hello World! into the Design View.

Now, if you switch back to Source View, you’ll see that the text you just entered into the visual editor has been inserted into the page’s source for you. If you’ve

150

Meeting the Features

Figure 5.6. Viewing Default.aspx in Web Forms Designer’s Source

View

Figure 5.7. Editing your form in Design View

worked with other tools, you’ll appreciate that Visual Web Developer applies minimal reformatting to the code you typed.

The Code Editor

As well as editing web forms, web developers commonly edit those forms’ codebehind files. You’ll work with code-behind files as you build the Dorknozzle project—in particular, they help us to keep a clear separation between the layout and logic of nontrivial projects.

151

Chapter 5: Building Web Applications

If you’ve opened a web form in the Web Forms Designer, you can easily switch to its code-behind file: click the View Code icon in the Solution Explorer, rightclick the Web Form in Solution Explorer, and select View Code; alternatively, expand the Web Form’s node in Solution Explorer and double-click its code-be- hind file.

Do this to open the code-behind file for Default.aspx. If you chose VB as your preferred language when you created the project, the code-behind file will be called Default.aspx.vb, and will look like the one shown in Figure 5.8.

Figure 5.8. Editing Default.aspx.vb

Figure 5.9. Editing Default.aspx.cs

152