How to develop a multi-page web application

acceptableseashoreSecurity

Nov 5, 2013 (3 years and 9 months ago)

175 views

ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
1

Chapter 3
How to develop a
multi-page web
application
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
2

Objectives
Applied


Given the specifications for a multi-page web application, design,
code, and test the application. This application may require the
use of drop-down lists, list boxes, required field
validators,
compare
validators, and other class files.
Knowledge


In general
terms, describe the procedure for renaming a web form
file as well as the class that contains the code for the web form.


Distinguish between the Transfer method of the
HttpServerUtility
class and the Redirect method of the
HttpResponse class.


Distinguish between absolute and relative URLs.


Describe two cases in which you need to use
view state with
drop-down lists and list boxes.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
3

Objectives (cont.)


Describe the use of the required field
validator and the compare
validator.


Explain when and why
session state is needed, and describe the
way that cookies are used to maintain session state.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
4

The design of the Order page
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
5

The Order page of the Halloween Store application


The Order page of the Halloween Store application accepts an
order for any items in the store.


To order an item, the user starts by selecting a category from the
first drop-down list. Then, the products in that category are
displayed in the second drop-down list. The user can then select a
product and enter a quantity.


When the user clicks the Add to Cart button, the selected product
is added to the shopping cart if it isn’t there already. If it is already
in the shopping cart, the quantity is added to the existing shopping
cart item. Then the Shopping Cart page is displayed.


If the user clicks the Check Out button, a message is displayed to
indicate that the check out function hasn’t been implemented.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
6

The Order page of the Halloween Store application
(cont.)


The category information is retrieved from a binary file and stored
in an array list. The array list is used to load the Category drop-
down list.


The product information is retrieved from a binary file and stored
in a sorted list. The sorted list is saved in
session state and is used
to load the Product drop-down list when the category changes.


The shopping cart information is stored in a sorted list. The sorted
list is saved in
session state so it can be retrieved and updated each
time a product is added.


This form uses validation controls to be sure that an integer is
entered for the quantity.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
7

The design of the Shopping Cart page
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
8

The Shopping Cart page of the Halloween Store
application


The Shopping Cart page displays the items in the shopping cart in
a list box. To load the list box, it uses the shopping cart
information that’s saved in
session state by the Order page.


The user can remove an item from the cart by selecting the item
and then clicking the Remove Item button. To remove all the items
from the cart, the user can click the Empty Cart button.


After reviewing the cart, the user can click the Continue Shopping
button to return to the Order page and select additional products.


If the user clicks the Check Out button, a message is displayed to
indicate that the check out function hasn’t been implemented.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
9

How to add a new web form


Right-click on the project in the Solution Explorer and select
Add

Add Web Form to display the Add New Item dialog box.
The Web Form template is selected by default. Then, enter a
name for the form and click the Open button.


An .
aspx file is added to the project, and the form is displayed in
the Web Forms Designer in grid layout mode.
How to add an existing web form


Right-click on the project in the Solution Explorer and select
Add

Add Existing Item to display the Add Existing item dialog
box. Select All Files from the Files of type drop-down list. Then,
locate and select
the .
aspx file you want to add.


The .
aspx file and its associated .
aspx.vb and .
aspx.resx files are
copied to the project.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
10

Three ways to rename a web form file


Highlight the form in the Solution Explorer to display its
properties and change the File Name property. Be sure not to
change or omit the file extension.


Right-click on the form in the Solution Explorer and select the
Rename command from the shortcut menu that’s displayed.
Then, change the name directly in the Solution Explorer window.


Click on the form in the Solution Explorer to select it. Then, click
on it again and change the name directly.
How to rename the class that contains the Visual
Basic code for a web form


Display the code in the Code Editor window. Then, change the
name that’s used for the form on the Class statement at the
beginning of the file.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
11

The Transfer method of the
HttpServerUtility class
Method
Description
Transfer(URL)
Terminates the execution of the current page
and transfers control to the page at the
specified URL.
The Redirect method of the
HttpResponse class
Method
Description
Redirect(URL)
Redirects the client to the specified URL and
terminates the execution of the current page.
Code that transfers control to another page
Server.Transfer("
ShoppingCart.aspx")
Code that redirects the client to another page
Response.Redirect("
ShoppingCart.aspx")
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
12

How to display another web page in the browser


The Transfer method is a member of the
HttpServerUtility class,
which contains helper methods for processing web requests. To
refer to this class, you use the Server property of the page.


The Redirect method is a member of the
HttpResponse class,
which contains information about the response. To refer to this
class, you use the Response property of the page.


Both the Transfer and Redirect methods cause the page specified
by the URL to be displayed in the browser.


When you use the Transfer method, the current page is terminated
and a new page is processed in its place. This processing is
efficient because it takes place on the server. However, the
browser isn’t updated to reflect the address of the new page.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
13

How to display another web page in the browser
(cont.)


When you use the Redirect method, (1) the server sends an
HTTP
redirect message
to the browser, (2) the browser sends an HTTP
request to the server to request the new page, and (3) the server
processes the new page and sends it back to the browser. Because
this involves a round trip to the browser, it’s less efficient than the
Transfer method.


In general, you should use the Redirect method to display another
web page. You should use the Transfer method only if the
application’s performance is critical.
Note


Session
state is not affected by either the Transfer or the Redirect
method.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
14

Examples of absolute and relative
URLs
Statements that use absolute
URLs
Response.Redirect
("http://www.murach.com/Default.aspx")
Response.Redirect
("http://www.murach.com/Books/Search.aspx")
Statements that use relative
URLs that are based on the
current directory
Response.Redirect
("
Checkout.aspx")
Response.Redirect
("
Login/
Register.aspx")
Statements that use relative
URLs that navigate up the
directory structure
Response.Redirect
("../
Register.aspx")
Response.Redirect
("../
../
Register.aspx")
Response.Redirect
("/
Register.aspx")
Response.Redirect
("/
Login/
Register.aspx")
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
15

How to code absolute and relative
URLs


When you code an
absolute URL
, you code the complete URL
including the domain name or IP address for the site. Absolute
URLs let you display pages at other web sites.


When you code a
relative URL
, you base it on the current
directory, that is, the directory that contains the current page.


To go to the root directory for the host, you code a slash (/). Then,
you can code one or more directories after the slash.


To go up one level from the current directory, you code two
periods and a slash (
../). To go up two levels, you code two
periods and a slash followed by two more periods and a slash.
And so on.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
16

How to work with list items


A
drop-down list control
lets a user choose an item from a drop-
down list of items.


A
list box control
lets a user choose one or more items from a list
of items.


The items in a list are defined by
ListItem
objects that are
contained in a
ListItemCollection
object. Items in this collection
are numbered from zero.


To get the
ListItemCollection object associated with a drop-down
list or list box, you use the Items property of the control.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
17

Common methods for adding and removing items
from a drop-down list or list box
Method
Description
Add(string)
Adds a new item to the end of the collection,
and assigns the specified string value to the
Text property of the item.
Add(
ListItem)
Adds the specified list item to the end of the
collection.
RemoveAt(integer)
Removes the item at the specified index
location from the collection.
Clear
Removes all the items from the collection.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
18

Common properties of list items
Property
Description
Text
The text that’s displayed for the list item.
Value
A value associated with the list item.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
19

How to add list items
Code that loads items into a list box using strings
lstCreditCards.Items.Add("Visa")
lstCreditCards.Items.Add("
MasterCard")
lstCreditCards.Items.Add("American Express")
Code that loads items into a drop-down list using
ListItem
objects
ddlMonths.Items.Add(New
ListItem("January", 1))
ddlMonths.Items.Add(New
ListItem("February", 2))
...
ddlMonths.Items.Add(New
ListItem("December", 12))
Note


When you use the Add method to add a string to a list item
collection, the Text property of the list item is set to that string
value. To set both the Text and Value properties, you must create a
ListItem object and then add that object to the collection.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
20

How to remove list items
Code that removes the item at the specified index from a
list box
lstCart.Items.RemoveAt(
lstCart.SelectedIndex)
Code that removes all items from a list box
lstCart.Items.Clear()
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
21

Common properties of drop-down list and list
box controls
Property
Description
Items
The collection of
ListItem objects that represents
the items in the control.
Rows
The number of items that are displayed in a list
box at one time. If the list contains more rows
than can be displayed, a scroll bar appears.
SelectedItem
The
ListItem object for the currently selected
item.
SelectedIndex
The index of the currently selected item. If no
item is selected in a list box, the value of this
property is -1.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
22

Code that retrieves the value of the selected item
in a drop-down list
Dim
sID As String
sID =
ddlProducts.SelectedItem.Value
Code that tests for a selected item in a list box
If
lstCart
.SelectedIndex > -1 Then
.
.
End If
Code that uses the
SelectedIndexChanged event
of a drop-down list
Private Sub
ddlCategories_SelectedIndexChanged _
(
ByVal sender As
System.Object, _

ByVal e As
System.EventArgs) _
Handles
ddlCategories
.SelectedIndexChanged

Me.LoadProductDropDownList
()
End Sub
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
23

How to work with drop-down lists and list boxes
in code


To work with the items in a drop-down list or list box, you use
the Items property of the control. This property returns a
ListItemCollection object that contains all of the items in the list.


To get the value of a selected item, you use the
SelectedItem
property of the control to get the
ListItem object for the item.
Then, you can use the Value property of that item to get its value.


The
SelectedIndexChanged event is raised when the user selects
a different item. If you want to perform processing when this
event occurs, you must set the
AutoPostBack and
EnableViewState properties of the control to
True.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
24

When to use
view state with drop-down lists and
list boxes


Use
view state to save list items that are loaded in code. The
exception is if the control is loaded each time the page is
processed and returned to the browser.


Use
view state if you want ASP.NET to raise the
SelectedIndexChanged event when the user selects an item from
the list.


You can also load list items using the
ListItem Collection Editor.
In that case, the Text and Value properties for the list items are
included in the HTML for the page, and
view state isn’t required.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
25

The validation controls on the Order form of the
Halloween Store application
Required field
validator

Compare
validator

ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
26

The validation controls provided by ASP.NET
Control
Description
Required field
validator
Checks that an entry has been made.
Compare
validator
Checks an entry against a constant value or
the value of another control. Can also be used
to check for a specific data type.
Range
validator
Checks that an entry is within a specified
range.
Regular expression
validator
Checks that an entry matches a pattern, such
as a telephone number or an email address.
Custom
validator
Checks an entry using validation code that
you write yourself.
Validation summary
Displays a summary of error messages from
the other validation controls.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
27

An introduction to the validation controls


You can use
validation controls
to test user input and produce
error messages.


The validation is performed when the focus leaves the control
that’s being validated. The exception is the required field
validator, which performs its validation when the user clicks on a
button control whose
CausesValidation property is set to
True.


Each validation control is associated with a specific Web Server
or HTML Server control. You can associate one or more
validation controls with a single server control.


The validation controls work by running client-side script. Then,
if the validation fails, the page isn’t posted back to the server.
(The validation is also performed on the server in case the client
doesn’t support scripts.)
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
28

Common validation control properties
Property
Description
ControlToValidate
The ID of the control to be validated.
Display
Determines how an error message is
displayed:
Static
Allocate space for the message in
the page layout
Dynamic
Allocate the space w
hen an error
occurs
None
Display the errors in a validation
summary control
ErrorMessage
The message that’s displayed in the
validation control when the validation fails.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
29

Additional properties of a compare
validator
Property
Description
ValueToCompare
The value that the control specified in
the
ControlToValidate property should
be compared to.
Operator
The type of comparison to perform
(Equal,
NotEqual,
GreaterThan,
GreaterThanEqual,
LessThan,
LessThanEqual, or
DataTypeCheck).
Type
The data type to use for the comparison
(String, Integer, Double, Date, or
Currency).
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
30

The property settings for the validation controls on
the Order form
Default ID
Property
Value
RequiredFieldValidator1
ControlToValidate
Display
ErrorMessage
txtQuantity
Static
Quantity is required.
CompareValidator1
ControlToValidate
Display
ValueToCompare
Operator
Type
ErrorMessage
txtQuantity
Static
0
Greater Than
Integer
Quantity must be
greater than 0.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
31

How to use the required field and compare
validators


The required field
validator is typically used with text box
controls, but can also be used with list controls.


If the user doesn’t enter a value into the input control that a
compare
validator is associated with, the validation test passes.
Because of that, you should also provide a required field
validator
if a value is required.


When you use grid layout, the error message associated with a
validator always appears in the same location as the
validator.
Because of that, changing the Display property to Dynamic has no
effect.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
32

How ASP.NET maintains the state of a session
Server
First HTTP request:
The browser requests a page.
ASP.NET creates a session
state object and assigns an ID
for the session.
Client
Web server
First HTTP response:
The server returns the
requested page along with the
session ID.
Next HTTP request:
The browser requests another
page. The server uses the session
ID included in the request to
associate the browser with the
correct session state object.
Web server
Web server
Browser
Browser
Browser
Session ID
Session ID
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
33

How session state works


ASP.NET uses
session state
to track the state of each user of
an application. To do that, it creates a
session state object
.


The session state object includes a session ID that’s sent back
to the browser as a
cookie
.


The browser automatically returns the session ID cookie to the
server with each request so the server can associate the
browser with an existing session state object.


If you want your application to work on browsers that don’t
support cookies, you can configure ASP.NET to encode the
session ID in the URL for each page of the application.


You can use the session state object to store and retrieve items
across executions of an application.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
34

Typical uses for
session state


To keep information about the user
, such as the user’s name or
whether the user has registered.


To save objects the user is working with
, such as a shopping
cart or a customer record.


To keep track of pending operations
, such as what steps the
user has completed while placing an order.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
35

Common properties and methods of the
HttpSessionState class
Property
Description
SessionID
The unique ID of the session.
Item(name)
The value of the session state item with the
specified name. (Item is the default property of the
HttpSessionState class, so you can omit it when
you access a session state item.)
Count
The number of items in the session state collection.
Method
Description
Add(name, value)
Adds an item to the session state collection.
Clear
Removes all items from the session state
collection.
Remove(name)
Removes the item with the specified name from
the session state collection.
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
36

Adding or updating a session state item
Session("Cart") =
ShoppingCart
Another way to add or update a session state item
Session.Add
("Cart",
ShoppingCart)
Retrieving the value of a session state item
ShoppingCart =
Session("Cart")
Removing an item from
session state
Session.Remove
("Cart")
Retrieving the value of a session state item from a
class that doesn’t inherit
System.Web.UI.Page
ShoppingCart =
HttpContext.Current.Session
("Cart")
ASP.NET, C3

© 2003, Mike Murach & Associates, Inc.


Slide
37

How to work with data in session state


The session state object is created from the
HttpSessionState class,
which defines a collection of session state items.


To access the session state object from the code-behind file for a
web form, use the Session property of the page.


To access the session state object from a class other than the code-
behind file, use the Current property of the
HttpContext class to
get the
HttpContext object for the current HTTP request. Then,
use the Session property of the
HttpContext object to get the
session state object.


By default, session state objects are maintained in server memory.
As a result, you should avoid storing large items in
session state.