Chapter 9 Programming with Web Forms Programming In Visual Basic.NET

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Forms Thus far, your projects have been based on Windows Forms Use Web Forms when programming for the Internet Web Forms display as document in a browser Use Mobile Internet Toolkit and mobile Web Forms for mobile devices like cell phones and PDAs

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Client/Server Web Applications Require a server and a client –Server send the Web Pages to the Client –Client displays the Web Pages in Browser

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Servers Remote Web Server OR Local machine set up as a Web Server by installing IIS and FrontPage 2000 Server Extensions before installing VB

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Clients Browsers display pages written in hypertext markup language (HTML) –Microsoft Internet Explorer –Netscape Navigator Pages may also contain program logic in the form of a script written in –JavaScript –VBScript –JScript –Java Applets

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Pages Stateless –Do not store any information about its contents from one invocation to the next Methods for working around Stateless –Cookies stored on Local User Machine –Sending state info to server as part of the page's address, Uniform Resource Locator (URL)

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Visual Basic and ASP.NET ASP.NET is the latest Web programming technology from Microsoft When using Web Forms in VB.NET you are actually using ASP.NET Each Web Form has 2 distinct pieces –HTML,.aspx –VB code,.aspx.vb (CodeBehind Module) Visual Studio IDE automatically generates the HTML

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Creating Web Forms New Project dialog, select ASP.NET Web Application Folder on your machine set up by IIS

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Creating Web Forms (cont.) Name box is disabled Name your project by modifying the location to include the ProjectName in place of WebApplication1 The ProjectName will become a new folder located in the Inetpub\wwwroot folder on your local machine As project opens, connection to Web Server is established

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Forms versus Windows Forms Based on a completely different class Properties, Methods, and Events differ considerably Completely different set of controls –Many of the controls have the same names –However, their properties and methods will be different Toolbar, Toolbox and lists of files in Solutions Explorer are different

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Forms - Specific Differences Web controls have ID property rather than a Name property Form inherits from System.Web.UI.Page Button control inherits from System.Web.UI.WebControls. Button

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Visual Studio IDE - Web Form

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved HTML Code and VB Code Tabs at bottom of the form in the Designer allow you to switch between the HTML code and VB code Do not worry about the HTML since it is automatically generated for you

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Design Toolbar Displays while you are creating the user interface Display Borders Show Details Lock Elements Show Grid Snap to Grid

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Types of Controls HTML Controls –Standard HTML Client Side elements HTML Server Controls –All the attributes of HTML (client) Controls –Added capability of object-oriented, event-driven, server-side programming Web Server Controls (ASP.NET Controls) –Most powerful controls –Rendered differently for different Browsers

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Converting HTML Controls To convert an HTML Client-side control to and HTML Serve-side control –Right-click the control –Select Run as Server Control

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Controls In Toolbox Includes Tabs for selecting control type –Web Forms –Components for Web Server controls –HTML

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Identifying Client-Side and Server-Side Controls VS Designer adds a small green arrow in the upper-left corner of server controls Server-side Control Client-side HTML Control

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Event Handling Events are written in the same way as you did for Windows controls Events may actually occur –Client –Server Events are somewhat different than for Windows Forms –Example: Page_Load versus Form_Load

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Files (see Table 9.1, p 381).aspx file –Holds specifications for the user interface.aspx.vb (CodeBehind File) –VB code written to respond to events Styles.css –Cascading Style Sheet for positioning and formatting text and elements on the Web Page

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Files (cont.) Web.config –Configuration info about each URL resource.dll –Generated by compiler –Contains compiled code –When a request for the Web page is made by accessing the URL of the Web page, the.dll file produces the HTML output for the page

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Testing In Other Browsers By default, Your Web projects are tested in Microsoft Internet Explorer To test in another Browser –Launch the Browser, Netscape Navigator –Type the URL of the page into the Address Bar –Example:

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Laying Out Web Forms Factors that will effect the layout of page –Browsers –Browser User Preferences –Screen Sizes –Screen Resolutions –Window Sizes Methods for better control of layout –Page Layout Property –HTML Tables

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Page Layout Property Determines how and where the controls on a Web page appear Choices –Grid Layout (default) Determine exact placement based on an X and Y Grid –Flow Layout Similar to adding text in a word processor When user resizes window in Browser controls move to fit window

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Using Tables for Layout HTML Tables contain rows and columns Add controls and text to the table cells to align the columns Most useful in a Flow Layout Table is an HTML control, requiring no server-side programming

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Adding Tables Add Table Control from Toolbox OR Table menu, Insert, Table –Dialog allows specification for Number of Rows and Columns Table Width Background Color Border Size and Color Cell Alignment

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Manipulating Tables Add/Delete Row –Right-click a row and use shortcut menu Add/Delete Column –Right-click a column and use shortcut menu Move Table –Grid Layout - select table and drag –Flow Layout - insert spaces

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Validator Controls Client-side controls that automatically validate input data Steps for using –Add a validator control –Attach it to an input control, such as a text box –Set the error message to be used for invalid data

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Validator Controls (cont.) RequiredFieldValidator CompareValidator RangeValidator RegularExpressionValidator ValidationSummary See Table 9.2, p 388

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Managing Web Projects Successfully moving Web Projects is not easy! Visual Studio IDE saves solution files,.sln and.suo, in the default folder that you select in Tools/Options/Environment All other files (EXCEPT the solution files) are stored in the new folder created beneath Inetpub/wwwroot

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved File Locations Example Create a new project named MyWebProject VB creates 2 new folders named MyWebProject –Under default project folder (solution files) –Under Inetpub/wwwroot (all other files)

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved File Location Problem Problem –If you move your project to a different machine you must remember to move both project folders Recommendation –As soon as you create a new Web Project, select the solution file in Solution Explorer, File menu, Save As, save in project folder under Inetpub/wwwroot

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Moving a Project Move all files to folders with same name and same location Either –Create a Virtual Directory using the Internet Services Manager OR –Web Share the Project Folder from My Computer

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Creating a Virtual Directory Start, Settings, Control Panel, Administrative Tools, Internet Services Manager Expand node for computer and default Web site Right-click Default Web site icon, select New, Virtual Directory In Virtual Directory Creation Wizard enter your project folder name as the alias and enter the folder and path

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Web Sharing the Project Folder Select the Project folder in My Computer Right-click, select Properties, Web Sharing, activate Share This Folder In Edit Alias dialog click OK Note: This is not the preferred method since it may create security problems on the network!

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved Deleting a Web Project Project in IIS Virtual Directory –Delete the directory Project in Web Shared Folder –Unshare it from Properties dialog –Either Reboot Computer or Stop and Restart IIS –Delete Folder