McGraw-Hill
Web Applications
© 2010 The McGraw-Hill Companies, Inc. All rights reserved.

• 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
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-2

• Control the styles used on Web pages using cascading style sheets (CSS)
• Create multiple pages in a Web application
• Navigate using the HyperLink control and the
Server object
• Validate Web input using the validator controls
• Use state management to preserve values in variables
• Use AJAX to update a portion of a Web page
• Define ASP.NET, XML, WSDL, and SOAP
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-3

• Web Forms are used to create the user interface for Web applications
• A Web Form displays as a document in a browser
• You can create documents that display on mobile devices, such as cell phones and
PDAs (using the Standard Edition and above)
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-4

• Web applications require a server and a client
– Server sends the Web Pages to the client
– Client displays the Web Pages in a browser
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-5

• To develop Web applications
– Use a remote Web server
– Make your local machine a Web server
• Visual Studio Web Server
– Installs automatically with Visual Web Developer or
Visual Studio
– Simplifies development, testing, and debugging
– Use IDE tools to transfer application to an IIS Web server after development to share with others
• Internet Information Services (IIS)
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-6

• Browsers display pages written in a markup language such as HTML or XHTML
• Pages may also contain program logic
– Script
• JavaScript, VBScript, JScript
– Java applets
• Programming for a network intranet
– Users’ browser is known
• Programming for the Internet
– Test and check output on multiple browsers
• Internet Explorer, Mozilla FireFox and Opera
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-7

• Web pages are stateless
– The page does not store any information about its contents from one invocation to the next
• Techniques for working around the stateless limitation
– Storing cookies on the local machine
– Sending state information to the server as part of the page's address, called the uniform resource locator
(URL)
• The server can send the state information back with the next version of the page
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-8

• 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
– Generate appropriate HTML
• Write object-oriented, event-driven Web applications using C# and ASP.NET
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-9

• Each Web Form has two distinct pieces
– HTML and instructions needed to render the page
– C# code
• A Web Form generates two files:
– .aspx extension for the HTML
– .aspx.cs extension for the C# code
• Holds the logic to respond to events
• Called the "code behind" file
• C# code is not compiled into an .exe file, it is compiled into a dynamic link library (dll) file
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-10

• Web applications are referred to as Web sites in VS 2008
• Four types of
Web sites
1.File System
2.Local IIS
3.FTP site
4.Remote site
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-11

• Store Web pages and associated files in any folder on the local computer or on the network
• Does not expose the computer to security vulnerabilities
• Does not require administrative rights to create and debug a Web project
• Runs on Home Edition of Vista or XP
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-12

• IIS on a local computer hosts a Web server that must be secured
• Requires administrative rights on the computer to create IIS Web projects
• By default files are stored in
C:\inetpub\wwwroot folder
– A virtual IIS directory can be created to store a
Web site
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-13

• Administrative rights on the host computer must be granted to do development on a remote Web server
• FTP cannot be used to create a new Web site
• A previously created FTP Web site can be opened in Visual Studio
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-14

• Select New Web Site from the File menu
• In the New Web Site dialog box, select the template, location, and language
• Give the Web site a name by appending the name to the location
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-15

• A new Web site automatically contains one Web page, Default.aspx
– Visual representation of the page (HTML tags)
• A second file, Default.aspx.cs, holds the C# code for the page
• ASP.NET has a second model for Web applications —single-file model
– Stores all HTML, control definitions, and code in one single file
• The textbook teaches the code-separation model that uses two separate files
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-16

• Differences between a Web application and a
Windows Forms application
– Web Form (page or document) not a Windows Form
– Toolbar
– List of files in the Solution Explorer
– Toolbox has different controls
• Properties and events different than controls that have a
Windows counterpart
• Views available in the IDE are Design, Source
(HTML or ASP.NET) or a Split window
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-17

• Three tabs at bottom of Web Form
– Design
– Split
• Splits the Document window horizontally to see both the design and source
– Source
• Static HTML code
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-18

• Several types of controls available for Web
Forms
– Standard (ASP.NET server controls)—Richest and most powerful controls provided by ASP.NET and
.NET framework
– Data—Display database data
– Validation—Validate user input before it is sent to server
– Navigation—Includes the Menu control
– Login—Login controls and wizards
– WebParts—Change the appearance and behavior of the interface from the browser
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-19

– AJAX Extensions – Provide for faster Web page loading and richer interfaces
– HTML – Standard elements that operate only on the client
• HTML controls pass to and from the server as static text
– Others – Depending on version of VS, other sections may be available (i.e. Reporting)
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-20

• In Design view, client-side HTML controls and ASP server controls are different
• Popup DataTips identify the type of control and its ID (Name)
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-21

• Write C# code for events of Web controls in the same way as for Windows controls
• Events may occur on either the client or server
• The process of capturing an event, sending it to the server, and executing the required methods is all done automatically
• Events of Web Forms and controls are different than for Windows Forms
– Examples
• Page.Load versus Form.Load
• Button control has much shorter list of events for a Web Form versus a Windows From
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-22

• Web application files differ greatly from a
Windows application
• aspx file
– Holds specifications for the user interface used by the server to render pages
• aspx.cs file
– Code-behind file for the aspx file
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-23

• The IDE does not automatically generate the code necessary for debugging a Web application
• Run without Debugging
– Ctrl + F5 or Debug/Start without debugging
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-24

• If you try to run with debugging (F5), a message box gives the choice to run without debugging or add the debugging code to the Web.config file
– Add the following line of code to the Web.config file to run with debugging
<compilation debug = “true” />
• Set breakpoints, single step execution, and display the contents of variables and properties at debugging time
• Always remove debugging support before deploying an application
– Debugging code slows an application considerably
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-25

• To test in another browser, in the Solution
Explorer:
– Right-click on the project name
– Select Browse With
– Select from browsers installed on the computer
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-26

• Factors that will affect the layout of page
– Browsers
– Screen sizes
– Screen resolutions
• 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 © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-27

• HTML tables contain rows and columns and allow control over placement of elements on a Web page
• Add controls and text to the table cells to align the columns
• A table is an HTML control, which requires no server-side programming
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-28

Placing Controls or
Text in a Table - 1
• Add controls to any table cell or type text in a cell during design time
– To refer to the text in a cell at run time, add a label and give it an ID or type text directly into the cell
– Merge cells to allow room for a title or a larger image
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-29

Placing Controls or
Text in a Table - 2
• Table borders show at design time but not at run time
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-30

• Places controls in a specific X and Y position
– Controls may not show up if user has set browser window to small size
– Controls may overlap if the user has selected a large font size for the browser window
• Controls can be dragged using the white tab at the top of a selected control
• Controls remain in the same position relative to the Web page
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-31

• Use the Image control to add graphics to a Web page
– Concept is similar to the PictureBox on Windows
Forms, but the graphic file is connected differently due to the nature of Web applications
• Each Image control has an ImageUrl property that specifies the location of the graphic file
– Best to first copy the graphic into the Web site folder
• Add an Image control to a cell in a table or directly on a Web page
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-32

• Web page table has three rows and three columns
– Image and company title are in first row, textbox is in second row, hyperlink is in last row
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-33

• New tools for using styles in Web applications are called Expression Web
– Expands, enhances and simplifies using cascading style sheets (CSS)
• Use CSS to create, modify and apply styles to single elements on a page, an entire page, all pages, or all applications of an organization
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-34

• Styles are rules that specify page layout, position, font, color, alignment, margins, borders, background and bullet and numbering formats
• Create and apply new styles within a page
• Attach an external .css file to apply styles
• Save styles to an external .css file for use on other pages or Web sites
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-35

• Styles can be defined in several locations
– Web page – inline style
• For elements that appear only once on a page
– style section – page style
• For elements that may be used in more than one location on a page
– external style sheet - .css file
• For elements that may appear on more than one page or in multiple Web sites
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-36

• “Cascading” refers to the order of precedence of the style rules
• For example
– Style sheet (global) sets font, color, size, alignment
– Local (page-defined) style for the color and size takes precedence (font and alignment still in effect from style sheet)
– Inline (more local) style for the size takes precedence over local and style sheet (color from local and font and alignment from style sheet remain)
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-37

• Several new tools are available to define, apply, modify and change the location of styles
– Apply Styles window
– Manage Styles window
– Use the icons in the CSS Style Types table to identify the various types of styles
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-38

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

• New windows to define, apply and manage styles
– CSS Properties
– Manage Styles
– Apply Styles
• New Style Application toolbar appears in the default layout of the IDE
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-40

New Style Windows and
Style Application Toolbar
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-41

• Select Manual or Auto style application
– Auto allows software to determine where to place CSS code
– Manual allows choice of location of the styles using the Target Rule drop-down list
• New Inline Style places style code into HTML code
• Apply New Style allows creation of a new style in a new or existing .css file
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-42

• Define a new style in the New Style dialog box
• Choose the category and make settings
– For example
• Font
• Block
– Text-align, text-indent, vertical align
• List
– Bullet and numbering attributes
• Table
– Borders and spacing
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-43

• In the Manage Styles Window, preview each style
– Drag styles from one category to another to change the location of the style definition
• A style created in the current page can be moved to a .css file to allow its use in other pages
• In the CSS Properties window see the settings for a given style
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-44

• Apply styles from several locations
– Apply Styles window
• Select the element on the page and click the desired style
– Manage Styles window
• Select the element on the page, right-click the desired style name and select Apply Style from the context menu
– New Style dialog box
• Check the box for Apply new style to document selection
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-45

• Change attributes of a style from the Apply
Styles or Manage Styles window
– Right-click on style name, select Modify Style from the context menu
• Modify style attributes in the CSS
Properties window
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-46

• ASP.NET provides several techniques to navigate from one Web page to another
• Easiest form of navigation is to use a
HyperLink control
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-47

• Add a HyperLink control to allow the user to navigate to another page or another site
• Set properties of the HyperLink control
– Text—Text to display for the user
– NavigateUrl—Specify the URL to which to navigate
• For another Web site, type the Web address (URL)
• For another page in the application, use the Select
URL dialog box and select the page from a list
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-48

• Add a new form to the project
• Add controls to the new page
• Add a HyperLink to the Main Page
• Set the Start Page
• Run the application, test the links
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-49

• At times a hyperlink cannot be used because some other action in code needs to be performed prior to the transfer
• Transfer to another page in code
– Use the Server.Transfer
method
Server.Transfer (“Offer.aspx”);
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-50

• ASP.NET provides several validator controls that can automatically validate input
– Add a validator control
– Attach it to an input control (such as a text box)
– Set the error message to display
• At run time, when the user inputs data, the error message displays if the validation rule is violated
• Validator controls run on the client-side
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-51

• A blank entry passes the validation for each of the controls except the
RequiredFieldValidator
– To ensure a field is not blank and it passes a range check attach both a RangeValidator and a RequiredFieldValidator to the field
• Enter a complete message in the
ErrorMessage property or set the property to an asterisk
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-52

• Validator Controls
RequiredFieldValidator
CompareValidator
Requires that the user enter something into the field
Compares the value in the field to the value in another control or to a constant. Also can be used to verify that the input value can be converted to the correct data type
RangeValidator
RegularExpressionValidator
ValidationSummary
Requires that the input value falls in the specified range
Validates against a regular expression, similar to the mask in a masked text box
Displays a summary of all of the messages from the validator controls
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-53

• Web pages hold static data
• Each time a page is displayed or redisplayed it is a fresh copy
• Each time the page is posted back to the server a new copy of the program is loaded
• Steps must be taken to maintain the state of the page
– Otherwise the values of variables and controls on the page will be lost in every postback
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-54

• ASP.NET can retain and redisplay control contents
• Web controls have an EnableViewState property
– Set to true by default
– Indicates to the server to send the control’s contents back with the page
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-55

• Local variables work the same in a Web or
Windows application
• Class-level variables are lost unless steps are taken to save them
• Store the value of a class-level variable in a control on a Web page
– EnableViewState property holds the value during postback
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-56

• Set up a control with its Visible property set to false or use the HiddenField control
• Assign the class-level variable to the invisible control
– For a hidden field, use the (string) Value property
// Declare a class level variable.
private decimal discountTotalDecimal; protected void submitButton_Click(object sender, EventArgs e)
{
// . . . Calculations omitted.
discountHiddenField.Value = discountTotalDecimal.ToString();
}
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-57

• The Page_Load event occurs many times
(during each postback) in a Web application
• IsPostBack property is set to false for an initial page load and true for all page loads following the first
• Test for IsPostBack == false to perform initialization tasks
• Test for IsPostBack == true to perform tasks only on postback
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-58

• A HiddenField control maintains the value of a class-level variable for a single page
• Send information to a second page
– Use the Session variable technique to pass data between pages
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-59

• One instance of the Session object exists for each user of an application
– Use to store information about the user on the server
– Each time a user accesses an application, a
Session object is created with a unique
SessionID
– Session values are maintained as long as the session exists
• Sessions can time out, terminate or users can logout
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-60

• Drawbacks to session objects
– Information is stored on server
• Large amounts of data for multiple users can bog down the server
– Web sites split server loads among several systems ( Web Farm )
• State information might be on a different server than where the postback originates
– .NET handles this problem by specifying the name of the machine that stores the session values in the Web.config file
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-61

• Use the Contents collection of the Session object to store values in code
• Each item in the collection is a key/value pair
– Make up a name (the key) and assign a value
• Clear all session variables by using the
Session.Clear
method
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-62

• Create interactive Web applications with
Asynchronous JavaScript and XML (AJAX)
• AJAX allows reloading of only a portion of a
Web page on each postback
– Only the portion of a page that changes is downloaded and rendered
• Dramatically increases loading speed
• AJAX is an open and cross-platform technology
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-63

• AJAX pages must include a
ScriptManager component (in the toolbox under AJAX Extensions)
– Add other controls such as the UpdatePanel
• A container for other controls
– Placing controls inside an UpdatePanel determines which portion of the page updates on a postback
• The area outside the UpdatePanel remains unchanged
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-64

• Moving and renaming Web projects is easy when using File System Web sites, as opposed to IIS sites
• Make sure the project is closed
– Move, rename, or copy the project folder
• To open the moved or renamed project, first open the IDE and select File/Open
Web Site and navigate to the project’s folder
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-65

• Copy an entire Web site from one location to another on the same computer, to another computer on a network, or to a remote site
• Copy the Web site to a remote server where it can be accessed by multiple users
• Select Website/Copy Web Site to begin the operation
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-66

• 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 firewalls.
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-67

• 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.
McGraw-Hill © 2010 The McGraw-Hill Companies, Inc. All rights reserved.
9-68