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
Top Related