Creating Web Sites and Web Pages by Using Visual Web Developer and ASP.NET

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 contains an About tab that explains how the program works. 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 can create your first ASP.NET Web site, you need to make sure your computer is set up properly. To perform ASP.NET programming, you need to have Visual Web Developer installed. Visual Web Developer is a component of Visual Studio 2010 Professional, Premium, and more advanced editions. You can also download Visual Web Developer 2010 Express at http://www.microsoft.com/express/Web/, and it contains almost all the features described in this chapter (I’ll point out any differences as we go). If you are using Visual Web Developer 2010 Express, be sure to set the settings to Expert by clicking the Tools menu, clicking Settings, and then clicking Expert Settings. This will ensure that the steps in this chapter more closely match your software.

Visual Studio 2010 and Visual Web Developer include their own local Web server, so setting up and configuring a Web server with Microsoft Internet Information Services (IIS) and the .NET Framework is not required. Having a local Web server makes it easy to create and test your ASP.NET Web sites, and you’ll see it described below as the ASP.NET Development Server.

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

• Your own computer (via the ASP.NET Development Server)

• 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. 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.

Create a new Web site

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

   NOTE

   If you don’t see the New Web Site command on the File menu, then you don’t have Visual Web Developer installed. To download Visual Web Developer Express, visit http://www.microsoft.com/express/Web/ and follow the installation instructions.

   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:

   

   Click to view larger image

   In this dialog box, you can select the Web site or application template, 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 or Microsoft Visual C#). You can also identify the version of the .NET Framework that you want to target with your Web application. (Version 4 offers the most features, but there are times that you may need to design specifically for platforms with an earlier version of the .NET Framework. However, Visual Web Developer 2010 Express does not provide the option of targeting a specific version of the .NET Framework.)

2. In the New Web Site dialog box, verify that Visual Basic is the selected language and that ASP.NET Web Site is the selected template.

3. In the Web Location list, make sure that File System is selected.

4. Type C:\Vb10sbs\MyChap20 in the File Name text box.

   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 up front. The “my” prefix in the path will avoid a conflict with the solution Web site in the practice files (C:\Vb10sbs\Chap20) that I’ve built for you.

5. Click OK to accept your selections.

   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.

6. If you don’t see Default.aspx open in the Web Page Designer, double-click Default.aspx in Solution Explorer now to open it.

7. At the bottom of the Web Page Designer, click the Design tab.

   Your screen looks something like the one shown in the following screen shot:

   

   Click to view larger image

   Unlike the Windows Forms Designer, the Web Page Designer displays the Web page in three possible views in the IDE, and three tabs at the bottom of the Designer (Design, Split, and Source) allow you to change your view of the Web page.

   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 basic template page (“My ASP.NET Application”) 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.

   On the Source tab, you can view and edit the HTML and ASP.NET markup that’s used to display the Web page in a Web browser. If you’ve used Microsoft Expression Web, you’ll be familiar with these two ways of displaying a Web page and perhaps also with some of the HTML tags that control how Web pages are actually displayed. The Split tab offers a composite view of the Design and Source tabs.

   A few additional differences between the Windows Forms Designer and the Web Page Designer are worth noting at this point. The Toolbox now contains several collections of controls used exclusively for Web programming. Solution Explorer also contains a different list of project files for the Web site you’re building, as shown in the following screen shot. In particular, notice the Default.aspx file in Solution Explorer; this file contains the UI code for the active Web page. Nested under the Default.aspx file, you’ll find a file named Default.aspx.vb. A configuration file named Web.config and a master page file named Site.master are also listed.

   

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