Chapter 9Programming

with Web Forms

Programming In

Visual Basic.NET

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9- 2

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.9- 3

Client/Server Web Applications

Server Client(Browser)

Request

Response

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

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.9- 5

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.9- 6

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

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.9- 8

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

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.9- 10

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.9- 11

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.9- 12

Visual Studio IDE - Web Form

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9- 13

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.9- 14

Design Toolbar

• Displays while you are creating the user interface

Display BordersShow DetailsLock Elements

Show GridSnap to Grid

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9- 15

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.9- 16

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.9- 17

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.9- 18

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.9- 19

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.9- 20

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.9- 21

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.9- 22

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:

http://localhost/Ch09WebHello/WebForm1.aspx

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9- 23

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.9- 24

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.9- 25

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.9- 26

Adding Tables

• Add Table Control from ToolboxOR

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

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.9- 28

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.9- 29

Validator Controls (cont.)

• RequiredFieldValidator

• CompareValidator

• RangeValidator

• RegularExpressionValidator

• ValidationSummary

See Table 9.2, p 388

© 2001 by The McGraw-Hill Companies, Inc. All rights reserved.9- 30

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.9- 31

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.9- 32

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.9- 33

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.9- 34

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.9- 35

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.9- 36

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