McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved.

Programming with Visual Web Developer

Chapter 9

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

Objectives

• Explain the functions of the server and the client in Web programming.

• Create a Web Form and run it in a browser.

• Describe the differences among the various types of Web controls and the relationship of Web controls to controls used on Windows forms.

• Understand the event structure required for Web programs.

• Design a Web Form using tables.

• Validate Web input using the validator controls.

• Define ASP, XML, WSDL, and SOAP.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-3

Visual Basic and Web Programming

• In VB.NET, Web Forms are used to create the user interface for Web projects.

• Web Forms display as a document in a browser.

• Create documents that display on mobile devices such as cell phones and personal digital assistants (PDAs).

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-4

Client/Server Web Applications

• Require a server and a client– Server sends the Web Pages to the Client.– Client displays the Web Pages in Browser.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-5

Web Servers

To develop Web applications use either a

• Remote Web Server

--OR--

• Local machine set up as a Web Server by installing IIS before installing VB

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-6

Web Clients

• Browsers display pages written in hypertext markup language (HTML).

• Microsoft Internet Explorer

• Netscape

• Pages may also contain program logic in the form of • Java Applets

• Script

–JavaScript

–VBScript

–JScript

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-7

Web Pages

• Stateless•Does not store any information about its

contents from one invocation to the next

• Techniques for working around Stateless•Cookies stored on local machine

•Sending state information to server as part of the page's address, uniform resource locator (URL)

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-8

ASP.NET

• ASP.NET 3.5 is the latest Web programming technology from Microsoft.

• ASP.NET provides libraries, controls, and programming support for programs that:

• Interact with the user

• Maintain state, render controls

• Display data, and generate appropriate HTML

• When using Web Forms in VB .NET you are using ASP.NET.

• Object-oriented event-driven Web applications can be created using VB and ASP.NET.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-9

Visual Basic and ASP.NET

• Each Web Form has two distinct pieces• HTML and instructions needed to render the page• VB code

• Web Form generates a file with an .aspx extension for HTML and .aspx.vb extension for the VB code.

• Visual Studio IDE automatically generates the HTML.• HTML tags can be viewed and modified in the Visual

Studio editor.

• VB code contains the program logic to respond to events called the “code-behind” file.

• VB code is not compiled into an .exe file as it is for Windows applications.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-10

Types of Web Sites

• Web applications are referred to as Web sites in VS 2008.

• There are four types of Web sites

• File System Web sites

• IIS Web sites

• FTP sites

• Remote sites

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-11

Creating a Web Site (1 of 2)

• Select New Web Site from the File menu — in the New Web Site dialog box, selections can be made for template, location, and language.

• A new Web site automatically contains one Web page called Default.aspx.

• A second file, Default.aspx.vb, the code-behind file, holds the VB code for the project.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-12

Creating a Web Site (2 of 2)

Begin a new Web project by entering the location and project name on the New Web Site dialog box.

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

Web Forms in the Visual Studio IDE

• As Web project opens, connection to Web Server is established.

• Web Forms are based on a completely different class.

• Web Forms have different • Controls • Properties, Methods, and Events• Toolbar, Toolbox, and lists of files in Solution

Explorer

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-14

Visual Web Developer with New Web Site

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

Viewing the HTML Code

• Design and Sources tabs at bottom of the form in the Designer allow you to switch between the HTML code and VB code.

• Click on the Source tab to view the static HTML code.

• HTML creates the visual elements on the page and is automatically generated.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-16

Controls

• Several types of controls are available for Web Forms and can be mixed on a single form.

• Very often used are the Standard (ASP.NET server controls) — provided by ASP.NET and the .NET framework.

• Web server controls don’t directly correspond to HTML controls but are rendered differently for different browsers to achieve desired look/feel.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-17

ToolBox Controls

• Toolbox includes tabs for selecting control type.

• VS Designer adds a small green arrow in the upper-left corner of server controls.

ASP Server ControlClient-side HTML Control

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-18

Event Handling

• Events are written in the same way as for Windows controls.

• Events may actually occur on

• Client

• Server

• Process of capturing an event, sending it to the server, and executing the required methods is all done automatically.

• Events of Web Forms are somewhat different than for Windows Forms.

• Example: Web Form has a Page_Load rather than Form_Load.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-19

Files

Files in a Web application differ greatly from those in a Windows application.

Two files make up the form:

• .aspx file• Holds specifications for the user interface

• .aspx.vb (“code-behind” file)• VB code written to respond to events

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-20

Debugging

• IDE does not automatically generate code necessary for debugging a Web application — debugging functions need to be added <compilation debug="true" />.

• If running without debugging enabled in the Web.config file, an error message is received.

• There are two options:

• Run without debugging

• Add Web.config file

• After creating the Web.config file breakpoints, single-step execution, and display, the contents of variable and properties can be set.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-21

Add Web.config File

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-22

Testing In Other Browsers

• By default, Web projects are tested in Microsoft Internet Explorer.

• To test in another browser• Right-click on the project name

• Select Browse With

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

Laying Out Web Forms

• Factors that will effect the layout of page:• Browsers

• Screen Sizes

• Screen Resolutions

• Window Sizes

• ASP.NET generates appropriate HTML to render the page in various browsers but cannot be aware of the screen size, resolution, or window size on the target machine.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-24

Using Tables for Layout

• HTML Tables contain rows and columns.

• Add controls and text to the table cells to align the columns.

• Table is an HTML control, requiring no server-side programming.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-25

Entering Controls or Text in a Table

• Controls can be added to a table cell or type text in a cell during design time.

• Add a label and give it an ID to be able to refer to the text in a cell at run time. –OR—

• Type text directly into the cell.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-26

Including Images on Web Pages

• Use the Image control to add graphics to a Web page.

• Concept is similar to the PictureBox control on Windows Forms but the graphic file is connected differently due to the nature of the Web applications.

• Each Image control has an ImageUrl property that specifies the location of the graphic file.

• To place an image on a Web page, the graphic should first be copied into the Web site folder.

• Image controls can be added to a cell in a table or directly on a Web page.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-27

Table and Image

Place images, text, andcontrols where you want themby using a table.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-28

Navigating Web Pages

• Add a HyperLink to allow user to navigate to another site or page.

• Enter a Text property for the text to display for the user.

• Enter a NavigateUrl property to specify the URL to which to navigate; the Select URL dialog box displays.

• Select the page from a list.

• If wanting to navigate to another Web site, type the Web address as the NavigateUrl property value.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-29

Select URL dialog box

Select the page to which tonavigate for a HyperLinkcontrol from the Select URLdialog box.

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

Adding a Second Web Page

To add a new Web Form to a Web site, select Web Form in the Add New Item dialog box. Make sure to choose Visual Basicfor the language and select Place code in separate file.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-31

Using the Validator Controls

• ASP.NET provides several controls that can automatically validate input data.

• Steps for using

•Add a validator control — attach it to an input control and set the error message.

• At run time, when data is input, the error message displays if the validation rule is violated.

• Validator controls run on the client side.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-32

Maintaining State

• Must take steps to maintain values of variables and controls on page.

• Set EnableViewState to True (default), so control contents reappear for each postback.

• Local variables in a Web application are re-created each time the procedure begins.

• Store value of module-level variables in controls to hold their values during postback.

• Use IsPostBack property to control actions on postback.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-33

Checking for Postback

• When an ASP.NET application loads, the Page-Load event occurs—the page is reloaded for each “round-trip” to the server (each postback).

• The Page-Load event occurs many times in a Web application.

• The page’s IsPostBack property is set to False for the initial page load and to True for all page loads after the first.

• Check for IsPostBack = True to make sure that actions are only performed on postbacks.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-34

AJAX

• Asynchronous JavaScript and XML (AJAX) for creating interactive applications allows to reload only a portion of the Web page, rather than the entire page.

• AJAX is an open and cross-platform technology that works on many operating systems.

• Using AJAX, the loading speed can increase dramatically by downloading and rendering only the portion that changes.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-35

AJAX

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-36

Managing Web Projects

• Moving and renaming Web projects is easy when using File Systems Web sites as opposed to IIS sites.

• Make sure the project is closed so that the project folder can be renamed and then it can be moved or copied to different locations or computers.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-37

Using the Copy Web Site Tool

• Can copy an entire Web site from one location to another on the same computer, or to another computer on a network, or to a remote site

• Can copy the Web site to a remote server where it can be accessed by multiple users

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-38

Some Web Acronyms (1 of 2)

• XML Extensible Markup Language. This popular tag-based notation is used to define data and their format and transmit the data over the Web. XML is entirely text based, does not follow any one manufacturer’s specifications, and can pass through firewalls.

• SOAP Simple Object Access Protocol. An XML-based protocol for exchanging component information among distributed systems of many different types. Since it is based on XML, its messages can pass through network

firewall.

McGraw-Hill © 2009 The McGraw-Hill Companies, Inc. All rights reserved. 9-39

Some Web Acronyms (2 of 2)

• HTTP HyperText Transfer Protocol. The protocol used to send and receive Web pages over the Internet using standardized request and response messages

• Web Service Code in classes used to provide middle-tier services over the Internet

• WSDL Web Services Description Language. An XML document using specific syntax that defines how a Web service behaves and how clients interact with the service