How to Develop a One-Page Web Application

How to work with ASP.NET web sites

This chapter starts by showing you how to start a new web application, how to work with the Visual Studio IDE, how to add folders and files to an application, and how to close and re-open an application. Once you’re comfortable with those skills, you’ll be ready to learn how to build your first ASP.NET application.

How to start a new web site

In Visual Studio 2005, a web application is called a web site, and figure 2-1 shows the dialog box for starting a new web site. After you open the New Web Site dialog box, you select the language you want to use for the web site and you specify the location where the web site will be created.

The Location drop-down list gives you three options for specifying the location of the web site. The simplest method is to create a file-system web site. This type of web site can exist in any folder on your local hard disk, or in a folder on a shared network drive. You can run a file-system web site using either Visual Studio’s built-in development server or IIS. You’ll learn how to do that later in this chapter.

You use the HTTP option to create a web site that runs under IIS on your local computer or on a computer that can be accessed over a local area network. To use this option, you must specify the IIS server where you want to create the web site. In addition, you must select or create the IIS directory that will contain the files for the web site, or you must select or create a virtual directory for the web site.

The third option, FTP, lets you create a web site on a remote server by uploading it to that server using FTP. To create this type of web site, you must specify at least the name of the FTP server and the folder where the web site resides. You’ll learn more about how to use the HTTP and FTP options in chapter 4.

By default, Visual Studio 2005 creates a solution file for your web site in My Documents\Visual Studio 2005\Projects. This solution file is stored in this folder regardless of the location of the web site itself. To change the location where solutions are stored by default, choose Tools->Options. Then, expand the Projects and Solutions node, select the General category, and enter the location in the Visual Studio Projects Location text box.

In the dialog box in this example, I’m starting a new file-system web site named Ch02FutureValue in the ASP.NET 2.0 Web Sites folder on my own PC. Then, when I click the OK button, Visual Studio creates the folder named Ch02FutureValue and puts the starting files for the web site in that folder. It also creates a solution file in the default folder for those files.

The folders and files that are used for developing a web site can be referred to as a web project. So in practice, web sites are often referred to as web projects, and vice versa. In a moment, you’ll see that Visual Studio often uses the term project in the commands for working with web sites.

The New Web Site dialog box

Figure 2-1.  How to start a new web site

Three location options for ASP.NET web sites

Description

1. An ASP.NET web application is called a web site under ASP.NET 2.0, so you use the File->New Web Site command to create a new ASP.NET 2.0 web site.
   
2. A web project is a project that’s used for the development of a web site. In practice, web sites are often referred to as web projects, and vice versa.
   
3. Unlike previous versions of ASP.NET, ASP.NET 2.0 web sites don’t use project files. Instead, they use web.config files to store project information.
   
4. When you start a new web site, Visual Studio creates a solution file for the web site in the default location for solution files, which is normally My Documents\Visual Studio 2005\Projects.

How to work with the Visual Studio IDE

When you start a new web site, ASP.NET provides the starting folders and files for the site, including two files for the first web form of the site. The file named Default.aspx contains the HTML and asp code that defines the form, and the file named Default.aspx.vb contains the Visual Basic code that determines how the form works. Then, Visual Studio displays the aspx file for the web form as shown in figure 2-2.

If you’ve used Visual Studio for building Windows applications, you should already be familiar with the Toolbox, Solution Explorer, and Properties window, as well as the Standard toolbar. They work much the same for web applications as they do for Windows applications. The Solution Explorer, for example, shows the folders and files of the web site. In this example, the Solution Explorer shows one folder named App_Data, plus the two files for the default web form.

To design a web form, you use the Web Forms Designer that’s in the center of this Integrated Development Environment (IDE). When you start a new web site, this Designer is displayed in Source view, which shows the starting HTML code for the first (or only) web form of the application. Normally, though, you’ll do most of the design in Design view, which you can switch to by clicking on the Design button at the bottom of the Designer window.

If you have your environment settings set to Web Developer, you’ll notice that different toolbars are displayed depending on what view you’re working in. In Source view, the Standard and HTML Source Editing toolbars are displayed. In Design view, the Standard and Formatting toolbars are displayed. This is typical of the way the Visual Studio IDE works. By the way, to change the environment settings, you use the Tools->Import and Export Settings command.

As you go through the various phases of building a web site, you may want to close, hide, or size the windows that are displayed. You’ll see some examples of this as you progress through this chapter, and this figure presents several techniques that you can use for working with the windows.

After you’ve designed a web form, you’ll need to switch to the Code Editor, which replaces the Web Forms Designer in the center of the screen. Then, you can write the Visual Basic code in the code-behind file for the form. One way to switch to the Code Editor is to double-click on the code-behind file in the Solution Explorer. If, for example, you double-click on the file named Default.aspx.vb, you’ll switch to the Code Editor and the starting code for that file will be displayed. Later in this chapter, you’ll learn other ways to switch between the Web Forms Designer and the Code Editor.

As you work with Visual Studio, you’ll see that it commonly provides several ways to do the same task. Some, of course, are more efficient than others, and we’ll try to show you the best techniques as you progress through this book. Often, though, how you work is a matter of personal preference, so we encourage you to review and experiment with the toolbar buttons, the buttons at the top of the Solution Explorer, the tabs at the top of the Web Forms Designer or Code Editor, the shortcut menus that you get by right-clicking on an object, and so on. 

The starting screen for a new web site

Figure 2-2.  How to work with the Visual Studio IDE

How to work with views and windows

1. To change the Web Forms Designer from one view to another, click on the Design or Source button.
   
2. To close a window, click on the close button in the upper right corner. To redisplay it, select it from the View menu.
   
3. To hide a window, click on its Auto Hide button. Then, the window is displayed as a tab at the side of the screen, and you can display it by moving the mouse pointer over the tab. To restore the window, display it and click on the Auto Hide button again.
   
4. To size a window, place the mouse pointer over one of its boundaries and drag it.

Description

1. When you start a new web site, the primary window in the Visual Studio IDE is the Web Forms Designer window, or just Web Forms Designer. The three supporting windows are the Toolbox, the Solution Explorer, and the Properties window.
   
2. You use the Web Forms Designer to design a web form. Later, to write the Visual Basic code for the form, you use the Code Editor as shown in figure 2-14.
   
3. Visual Studio often provides several different ways to accomplish the same task. In this book, we’ll try to show you the techniques that work the best.

How to add folders and files to a web site

Right after you start a new web site, it often makes sense to add any other folders and existing files that the application is going to require. To do that, you can use the shortcut menus for the project or its folders in the Solution Explorer as shown in figure 2-3. As you can see, this menu provides a New Folder command as well as an Add Existing Item command.

For the Future Value application, I first added a folder named Images. To do that, I right-clicked on the project at the top of the Solution Explorer, chose the New Folder command, and entered the name for the folder. Then, I added an existing image file named MurachLogo.jpg to the Images folder. To do that, I right-clicked on the folder, chose Add Existing Item, and then selected the file from the dialog box that was displayed.

Those are the only other folders and files that I needed for the Future Value application, but often you’ll need others. For instance, the application in the next chapter requires two existing business classes, an Access database, and a number of image files.

The Future Value project as a new folder is being added

Figure 2-3.  How to add folders and files to a web site

How to add a folder to a web site

• To add a standard folder, right-click on the project or folder you want to add the folder to in the Solution Explorer and choose New Folder. Then, type a name for the folder and press Enter.
  
• To add a special ASP.NET folder, right-click on the project in the Solution Explorer and choose Add ASP.NET Folder. Then, select the folder from the list that’s displayed.

How to add an existing item to a web site

• In the Solution Explorer, right-click on the project or on the folder that you want to add an existing item to. Then, select Add Existing Item and respond to the resulting dialog box. 

1. When you create a new web form, Visual Studio generates the starting HTML for the form and displays it in Source view of the Web Forms Designer.
   
2. Before you start designing the first web form of the application, you can use the Solution Explorer to add any other folders or files to the web site.

How to open or close an existing web site

Figure 2-4 presents three ways to open an existing web site. The Open Project and Recent Projects commands are the easiest to use, but the Open Web Site command provides more flexibility. In the Open Web Site dialog box, you can use the icons on the left to identify the type of web site that you’re opening so you can open a web site directly from the web server on which it resides.

To close a project, you use the Close Project command. After you close a project for the first time, you’ll be able to find it in the list of projects that you see when you use the Recent Projects command.

The Open Web Site dialog box

Figure 2-4.  How to open or close an existing web site

Three ways to open a web site

1. Use the File->Open Project command.
   
2. Use the File->Recent Projects command.
   
3. Use the File->Open Web Site command.

How to use the Open Web Site dialog box

1. To open a file-system web site, select File System on the left side of the dialog box, then use the File System tree to locate the web site.
   
2. If a web site is managed by IIS on your own computer, you can open it by using the File System tree. Or, if you prefer, you can click Local IIS and select the web site from a list of sites available from IIS.
   
3. The other icons on the left of the Open Web Site dialog box let you open web sites from an FTP site or from a remote IIS site.

How to close a project

• Use the File->Close Project command.

• The Recent Projects list and the Open Project and Open Web Site commands are also available from the Start page.

Please check back next week for the continuation of this article.