Chapter 20 — Creating Web Projects

Chapter 20 — Creating Web Projects Microsoft Visual Basic .NET, Introduction to Programming

Important The projects –ASP.NET in this lesson can be in: • a Web server running Microsoft Internet Information Services (IIS) server • FTP server • Local File Drive.

Objectives • Create an ASP.NET Web Application project. • Mix both Web forms server controls and standard HTML controls on a Web page. • Work with grid layout and flow layout modes in the Web forms Designer. • Populate an HTML table with data generated from code in a Web page. • Manipulate dates.

Vocabulary • ASP.NET • Code-behind file • Grid layout mode • Flow layout mode • Platform • Server controls • Web forms • Web server

Putting Projects on the Web Hypertext Markup Language (HTML) is used to build Web pages. It is a language that is at the same time both simple and sophisticated. To get an idea of what HTML is like, open any Web page in Internet Explorer and click View | Source. The HTML source used to build the page you see in the browser is shown in a simple text editor. When you request a Web page, the HTML source is used by the Web server to build the page and send it to your machine. The Web server is the computer used to process Web page requests. The server is part of the network of computers thatform the Internet.

ASP.NET Microsoft’s solution for putting applications on the Web is built around ASP.NET. ASP stands for Active Server Pages. Active server pages are Web pages whose display is actively managed and altered by the Web server. ASP.NETis a platform from which Web applications are run. A platform is the combination of hardware and operating system on which applications are run. ASP.NET contains controls and objects with which to build Web pages, as well as a run-time system that executes the pages on the Web server. For database access, ASP.NET uses ADO.NET, the same system you have already used in this book to access databases.

Web Application To create a Web application using Visual Basic, open a new ASP.NET Web Application project using its template in the New Project window.

Web Forms A Web project is composed of static HTML pages, like the HTML file you created in Lesson 13, and Web forms. Web forms are built from the ASP.NET Page class. Objects created with this class are containers for controls and HTML. The controls placed on Web forms are part of the ASP.NET framework and provide the kind of functionality you are used to seeing in interactive Web pages. The controls and other graphic elements of the Web form are contained in an .aspx file. The code that runs the show is contained in a second file, a class file with extension .vb.

Grid Layout Mode The WYSIWYG (what you see is what you get) view, grid layout mode, is the actual appearance of the Web form. This view, although somewhat different from the environment you have used to create Windows applications, is the easiest to use. You position controls on the form just as you did for Windows forms.

Flow Layout Mode Flow layout mode shows the HTML code that’s executed from top to bottom to build the appearance of the Web page. You may work on the design of the form in either view or switch between the views. If you make a change in one view, the changes you make will be immediately visible when you switch to the other view.

Server Controls The controls added to a Web form are called server controls. These controls are similar to the Toolbox controls you add to a Windows form. However, server controls differ from those you add to a Windows form in that they are run on the Web server, Local Drive, FTP server after the Web page is posted to the client’s computer.

New Project Window Showing the Selection of ASP.NET Web Application

Solution Explorer Showing Files Created for the Amortization Table Web Application

Note Although the names of the HTML controls and the Web Forms server controls may seem to indicate overlapping functions, HTML controls are not executed by the server unless they are intentionally converted to server controls.

Note Click Build and Browse any time you want to see the effect of your changes on the current version of the Web page.

Note The color number, 9933cc, is expressed in base 16, hexadecimal notation. The first two digits, 99, refer to the amount of red in the color. The second two digits, 33, refer to the amount of green. The last two digits, cc, refer to the amount of blue. In base 16, the letter c represents the single digit number, 12. Each pair of digits can express values from 0 to 255, giving 256 levels of red, green, and blue. Each pair of hexadecimal digits is equivalent to 8 binary digits, or bits. Together, each color is specified as a 24-bit value.

Amortization Web Page Showing Final Placement of Controls

Amortization Web Page Displaying a Monthly Payment of $672.09

Amortization Web Page Running in a Browser

Adding a Table to a Web Page The <table> tag creates a table with no rows and no cells. Information in the table must appear in a cell which, in turn, must appear in a row. Like other Visual Basic controls, a table is built from a collection — a collection of rows. Each row is a collection of cells.

Tables The following statements would add a table to the Web page, but you would not be able to position the table on the page in any particular place. <table > <tr> <td> This is the first cell of Row 1 </td> <td> This is the second cell</td> </tr> </table>

Table Tag <table cellSpacing="2" cellPadding="4" width="635" border="10" >

Result of Adding a Few Attribute Values to the <table> Tag

Turning an HTML Control into a Server Control To turn an HTML table into a server control, add the following attributes to the <table> tag: id="tblAmort" runat="server"

Dealing with Dates The Date data type represents both dates and times. The range of possible dates is from January 1, the year 1 to December 31, the year 9999. To assign a particular date to a date variable, enclose the date of the form m/dd/year with number signs (#). Dim TodaysDate As Date TodaysDate = #5/27/2002#

Dealing with Dates The first statement below shows the declaration and initialization of CurrentDate, the date variable. The second line writes the current date into the innerText property of the HTML Cell. Dim CurrentDate As Date = Now tCell1.InnerText = Format(CurrentDate, "long date")

Programming Skills To create a new project, but reuse an existing Web page, first delete the default Web page from the new project by right-clicking the page in the Solution Explorer and clicking Delete. Select Project | AddExisting Item from the menu bar and navigate to the wwwroot directory where server pages are kept. Find the project that contains the existing Web page you want to add to the new project, click Open to add the item, then close the Add Existing Item dialog box. In the Solution Explorer, right-click the newly added Web page (it should have an .aspx extension) and click Set As Start Page.

Note The position and spacing of the attributes does not effect the interpretation of the HTML code. Often, each attribute is listed on a separate line. This enhances readability and does not effect the execution of the code.

The Amortization Table Project

Summary • Web servers are computer hardware and special software used to respond to user requests for Web pages. • When a Web page is requested by a user, the Web server uses the page's HTML code to build the page and then sends the page to the user's machine. • ASP.NET is the platform from which Web applications are run. ASP.NET includes the controls and objects from which Web pages are built, as well as the run-time system needed to execute the code on the pages created. ASP.NET is part of the .NET framework and thus has access to everything available within that framework, including ADO.NET, which is used to access databases.

Summary • A Web form is a container for controls and other graphic elements. It is built from the ASP.NET Page class. • Server controls are controls placed on a Web form. When a client calls on the control to execute code, the code is executed on the Web server. • Turn an HTML control into a server control by including the attribute runat = "server" in the control’s opening tag. To refer to the server control in program code, the control's ID property must be set.

Summary • The DateAdd(DateInterval, Interval (as Integer), Date Variable) function adds an interval to a date and returns a date value.

Chapter 20 — Creating Web Projects