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

After completing this chapter, you will be able to:

• Start Visual Web Developer and create a new Web site.

• Use Visual Web Developer tools and windows, including the Web Page Designer.

• Use the Visual Web Developer Toolbox to add server controls to Web pages.

• Add text, formatting effects, and Visual Basic code to a Web page that calculates loan payments for a car loan.

• Create a Web page that displays Help information.

• Use the HyperLink control to link one Web page to another on a Web site.

• Use the GridView control to display a table of database information on a Web page.

• Set the Title for a Web page and edit the master page.

In this chapter, you’ll learn how to build Web sites and Web pages by using the Visual Web Developer tool included with Microsoft Visual Studio 2010. Visual Web Developer has the look and feel of the Visual Studio Integrated Development Environment (IDE), but it is customized for Web programming and Microsoft ASP.NET 4, the Microsoft.NET Framework component designed to provide state-of-the-art Internet functionality. Although a complete description of Web programming and ASP.NET isn’t possible here, there’s enough in common between Web programming and Windows programming to allow you to do some useful experimentation—even if you have little or no experience with Hypertext Markup Language (HTML). Invest a few hours in this chapter, and you’ll see how quickly you can build a Web site that calculates loan payments for car loans, create a Web page with Help information, and display loan prospects from a Microsoft Access database by using the GridView control.

Inside ASP.NET

ASP.NET 4, Microsoft’s Web development platform, has been enhanced in this release. Some of the improvements include how Web pages are created in the Web Page Designer; various feature enhancements to ASP.NET Web pages and ASP.NET MVC; support for recently introduced browsers and handheld devices; a new ASP.NET Chart server control; enhancements to the FormView, ListView, and QueryExtender controls; new dynamic data controls and enhancements; and improvements to the AJAX (Asynchronous JavaScript and XML) programming model. Although ASP.NET has some similarities with an earlier Web programming technology named Active Server Pages (ASP), ASP.NET has been significantly enhanced since its first release in Visual Studio .NET 2002, and continues to evolve as new features are added to the .NET Framework and Visual Studio software. Visual Web Developer is the tool that you use to create and manage ASP.NET user interfaces, commonly called Web pages or (in a more comprehensive sense) Web sites.

By using Visual Web Developer, you can create a Web site that displays a user interface, processes data, and provides many of the commands and features that a standard application for Windows might offer. However, the Web site you create is viewed in a Web browser, such as Internet Explorer, Mozilla Firefox, Apple Safari, or even one of the new mobile device types, including Google Chrome, the Research in Motion BlackBerry smart phone, and the Apple iPhone. These Web sites are typically stored on one or more Web servers, which use Microsoft Internet Information Services (IIS) to display the correct Web pages and handle most of the computing tasks required by your Web site. (In Visual Studio 2010, Web sites can also be located and run on a local computer that does not require IIS, giving you more options for development and deployment.) This distributed strategy allows your Web sites to potentially run on a wide range of Internet-based or stand-alone computers—wherever your users and their rich data sources are located.

To create a Web site in Visual Studio 2010, you click the New Web Site command on the File menu, and then use the Visual Web Developer to build one or more Web pages that will collectively represent your Web site. Each Web page consists of two pieces:

• A Web Forms page, which contains HTML, ASP.NET markup, and controls to create the user interface.

• A code-behind file, which is a code module that contains program code that “stands behind” the Web Forms page.

This division is conceptually much like the Windows Forms you’ve been creating in Microsoft Visual Basic—there’s a UI component and a code module component. The code for both of these components can be stored in a single .aspx file, but typically the Web Forms page code is stored in an .aspx file, and the code-behind file is stored in an .aspx.vb file.

In addition to Web pages, Web sites can contain code modules (.vb files), HTML pages (.htm files), configuration information (Web.config files), global Web application information (Global.asax files), cascading style sheet (CSS) information, scripting files (JavaScript), master pages, and other components. You can use the Web Page Designer and Solution Explorer to switch back and forth between these components quickly and efficiently.

Web Pages vs. Windows Forms

What are the important differences between Web pages and Windows Forms? To begin with, Web pages offer a slightly different programming paradigm than Windows Forms. Whereas Windows Forms use a Windows application window as the primary user interface for a program, a Web site presents information to the user through one or more Web pages with supporting program code. These pages are viewed through a Web browser, and you can create them by using the Web Page Designer.

Like a Windows Form, a Web page can include text, graphic images, buttons, list boxes, and other objects that are used to provide information, process input, or display output. However, the basic set of controls you use to create a Web page is not the set on the Common Controls tab of the Toolbox. Instead, ASP.NET Web sites must use controls on one of the tabs in the Visual Web Developer Toolbox, including Standard, Data, HTML, and many others. Each of the Visual Web Developer controls has its own unique methods, properties, and events, and although there are many similarities between these controls and Windows Forms controls, there are also several important differences. For example, the Visual Studio DataGridView control is called GridView in Visual Web Developer and has different properties and methods.

Many Web page controls are server controls, meaning that they run on the Web server. Server controls have an “asp” prefix in their tag. HTML controls (located on the HTML tab of the Visual Web Developer Toolbox) are client controls by default, meaning that they run only within the user’s browser. For now, however, you simply need to know that you can use server controls, HTML controls, or a combination of both in your Web site projects. As you gain experience in Web programming, you may want to investigate AJAX programming in Visual Studio, which can enhance the efficiency of your Web applications and add advanced user-interface elements for users.

Server Controls

Server controls are more capable than HTML controls and function in many ways like the Windows Forms controls. Indeed, many of the server controls have the same names as the Windows Forms controls and offer many of the same properties, methods, and events. In addition to simple controls such as Button, TextBox, and Label, more sophisticated controls such as Chart, FileUpload, LoginView, and RequiredFieldValidator are provided on a number of tabs in the Toolbox; Visual Studio 2010 has added a number of controls to the list. The screen shot on the following page shows a sample of the server controls in the Visual Web Developer Toolbox. (Dynamic Data and Reporting controls are not shown.)

Click to view larger image

HTML Controls

The HTML controls are a set of older user interface (UI) controls that are supported by all Web browsers and conform closely to the early HTML standards developed for managing UI elements on a typical Web page. They include Button, Text, and Checkbox—useful basic controls for managing information on a Web page that can be represented entirely with HTML code. Indeed, you might recognize these controls if you’ve coded in HTML before. However, although they’re easy to use and have the advantage of being a “common denominator” for Web browsers, they’re limited by the fact that they have no ability to maintain their own state. (In other words, the data that they contain will be lost between views of a Web page.) The following screen shot shows the HTML controls offered on the HTML tab of the Toolbox in Visual Web Developer: