Building a Web Site by Using Visual Web Developer

The best way to learn about Visual Web Developer and ASP.NET is to get some hands-on practice. In the exercises in this chapter, you'll create a simple car loan calculator that determines monthly payments and displays an HTML page containing Help text. Later in the chapter, you'll use the GridView control to display a table of data on a Web page in the same Web site. You'll begin by verifying that Visual Studio is properly configured for ASP.NET programming, and then you'll create a new Web site project. Next you'll use the Web Page Designer to create a Web page with text and links on it, and you'll use controls in the Visual Web Developer Toolbox to add controls to the Web page.

Considering Software Requirements for ASP.NET Programming

Before you create your first ASP.NET Web site, you need to consider the type of environment that you want to run your Web site in. A useful improvement in Visual Studio 2005 is that you no longer need to develop your Web site on a computer that is fully configured to act as a Web server. In Visual Studio .NET 2002 and 2003, your development system needed to host or have access to a Web server running Microsoft Windows 2000, Microsoft Windows XP Professional, or Microsoft Windows Server 2003 that also contained an installation of Internet Information Services (IIS), the Microsoft FrontPage 2000 Server Extensions, and the .NET Framework libraries. This meant that if you were running Microsoft Windows XP Home Edition, you were potentially out of luck, because Windows XP Home Edition does not include or support IIS and the FrontPage 2000 Server Extensions. (The only workaround was to access a properly configured remote Web server.)

In Visual Studio 2005, you can create and run your Web site in one of three locations:

Your own computer (the local file system)
An HTTP server that contains IIS and related components
An FTP site (a remote file server)

The first location is the option we'll use in this book, because it requires no additional hardware or software. If you have Visual Studio 2005 and the .NET Framework, you have what you need to create the sample Web sites. In addition, when you develop your Web site on the local file system, all the Web site files are stored in one location. When you're finished testing the application, you can deploy the files to a Web server of your choosing.

NOTE
If you want to develop your Web site on a Web server, use the Control Panel now to see whether IIS and the FrontPage 2000 Server Extensions are installed on your system. (Click the Add Or Remove Programs category in Control Panel, click Add/Remove Windows Components, and then browse for these programs.) Traditionally, Microsoft has required that you install these Web server components before the .NET Framework and Visual Studio because the .NET Framework registers extensions with IIS. If you install IIS after Visual Studio and run into problems, this could be the reason.

Create a new Web site

Start Visual Studio, and click the New Web Site command on the File menu.

Although you might have seen the New Web Site command before, we haven't used it yet in this book. This command starts Visual Web Developer and prepares Visual Studio to build a Web site. You see a New Web Site dialog box similar to the following:

In this dialog box you can select the Web site or application template that you want to use, the location for the Web site (local file system, HTTP server, or FTP site), and the programming language that you want to use (Visual Basic, Visual C#, or Visual J#).
In the New Web Site dialog box, verify that ASP.NET Web Site is the selected template, and that Visual Basic is the selected language.
Click File System in the Location box, click Browse, and then specify c:\vb05sbs\mychap20 as the folder location.

You'll notice that the Choose Location dialog box is a little different than the Project Location dialog box you've been using so far. And although you have been specifying the folder location for projects after you have built the projects in this book, in Visual Web Developer projects are saved upfront. The “my” prefix in the pathname will avoid a conflict with the solution Web site in the practice files (c:\vb05sbs\chap20) that I've built for you.
Click OK to finalize your changes.

Visual Studio loads Visual Web Developer and creates a Web page (Default.aspx) to contain the user interface and a code-behind file (Default.aspx.vb) that will store the code for your Web page. The HTML source code for the Web page is displayed on the Source tab of the Web Page Designer. (If you don't see the Web Page Designer, double-click Default.aspx in Solution Explorer now.) Your screen looks something like the one shown on the next page.

Unlike the Windows Forms Designer, the Web Page Designer displays the Web page in two possible modes in the IDE, and two tabs at the bottom of the designer (Design and Source) allow you to change your view of the Web page. Depending on how your system has been configured and used, you might see either the Design tab or the Source tab now. (The illustration shows the Design tab.)

On the Source tab, you can view and edit the HTML code that's used to display the Web page in a Web browser. If you've used Microsoft Visual InterDev or Microsoft FrontPage, you'll be familiar with these two ways of displaying a Web page and perhaps with some of the HTML formatting tags that control how Web pages are actually displayed.

The Design tab shows you approximately how your Web page will look when a Web browser displays it. When the Design tab is selected, a white page appears in the Designer with the result of source-code formatting, and you can add controls to your Web page and adjust how objects on the page are arranged. (In Visual Studio .NET 2003, a grid appeared on the Web page by default, but that grid has been removed.)

A few additional changes in Visual Web Developer are worth noting at this point. The Toolbox now contains several collections of controls used exclusively for Web programming. (This is a change from Visual Studio .NET 2003, where Web programming controls were located on the Web Forms and HTML tabs of the regular Visual Studio Toolbox.) Solution Explorer also contains a different list of project files for the Web site you're building. In particular, notice the Default.aspx file in Solution Explorer; this file contains the user interface code for the active Web page. A configuration file named Web.config is also listed.

Now you're ready to add some text to the Web page by using the Web Page Designer.