Chapter 12

1
Chapter 12 Web Applications

• 12.1 Programming for the Web, Part I
• 12.2 Programming for the Web, Part II
• 12.3 Using Databases in Web Programs

2
Web Programs

• The programs in this chapter require the use of
  either Visual Web Developer 2010 (packaged with
  this textbook) or the complete version of Visual
  Studio 2010.
• We assume that you are using one of these two
  software products.

3
12.1 Programming for the Web, Part I

• Creating a Web Program with Visual Web Developer
• Using a Table to Lay Out a Web Pages Content
• Accessing a Text File in a Web Program
• Binding a Control to a LINQ Query
• Opening an Existing Web Program
• Building on an Existing Web Program

4
Preliminary Settings

• The following setting need only be carried out
  once.
• Click on Options in the Tools menu, select
  General, click on Design View, and click on the
  OK button. (See next slide.)

5
Options Settings
click on OK button
6
Creating a Web Program

• Click on New Web Site in the File menu.
• Select Visual Basic in the left pane.
• Select ASP.NET Web Site in the middle pane.
• Select File System as the Web location.
• Give a name and path for the program.
• Click on the OK button.

7
Creating a Web Program (continued)
enter name
click on OK
8
Web Page (VWD Equivalent of the Form Designer)
Web page tab
Main Content region
9
Web Page Tab

• The Web page tab is titled Default.aspx instead
  of Form1. vb Design. The Web page is
  referred to as Default.aspx in the Solution
  Explorer window.

10
Toolbox
The common controls, such as button, text box,
and list box are contained in the Standard group
of the Toolbox.
11
Designing the Web Page

• Begin by clearing the Main Content region.
• Permanent text (called static text) can be typed
  into the page and formatted directly without the
  use of labels.
• Text boxes and buttons can be placed at the
  cursor position (called the insertion point) by
  double-clicking on them in the Toolbox.

12
Sample Web Page
13
Properties Window
The name of a control is specified by the ID
property instead of the Name property.
14
Code Editor

• The Code Editor tab reads Default.aspc.vb
  instead of Form1.vb.
• The code in the editor is referred to as the code
  behind.

15
Sample Code

• Protected Sub btnCalculate_Click(...) Handles _
• btnCalculate.Click
• Dim cost As Double CDbl(txtCost.Text)
• Dim percent As Double
• CDbl(txtPercent.Text) / 100
• txtTip.Text FormatCurrency(percent cost)
• End Sub
• Notice that Sub is proceeded by Protected
  instead of Private.

16
Running a Program

• Press CtrlF5 to run program without debugging.
• Program runs in the computers Web browser.
• To terminate the program, close the browser by
  clicking on , the Close button.
• Close program by clicking on Close Project in the
  File menu.

17
A Run of the Sample Program
18
Tables

• A table control can be used to improve the layout
  of a Web page.
• Tables are created with the Insert Table command
  from the Table menu in the Toolbar.

19
Sample Table
cell
This table has 5 rows and 2 columns. Each
subdivision is called a cell.
20
Cells

• Text and controls can be placed into cells.
• The alignment (such as right, left, or center) of
  the contents of a cell can be specified with the
  Align property from the Properties window.
• Commands from the Table menu allow you to insert
  and delete rows and columns, and to merge cells.

21
Managing Tables

• Assorted arrows such as , , , , ,
  and
• , can be used to highlight groups of cells
  and resize tables.
• Dragging of the cursor also can be used to
  highlight groups of cells.

22
Text Files

• Normally placed in the Solution Explorers
  App_Data folder.
• A text file can be read into an array with a
  statement of the form
• Dim strArrayName() As String
• IO.File.ReadAllLines(MapPath("App_Data\"
• filename))
• LINQ can then be used to obtain specific
  information.

23
How to Display the Output of a LINQ Query in a
List Box

• lstBox.DataSource query
• lstBox.DataBind()

24
How to Display the Output of a LINQ Query in a
GridView

• Note The GridView is the VWD equivalent of the
  VB DataGridView.
• grvGrid.DataSource query
• grvGrid.DataBind()
• grvGrid.HeaderRow.Cells(0).Text
• header for first column
• grvGrid.HeaderRow.Cells(1).Text
• header for second column
• etc.

25
How to Open an Existing Web Program
first click here
Then navigate to the programs folder and click
on the Open button.
26
12.2 Programming for the Web, Part II

• Multiple Web Pages
• Validation Controls
• Postback
• The Page Load Event
• Class-Level Variables
• The RadioButtonList Control
• The CheckBox Control

27
How to Add an Additional Web Page to a Program

• Click on an existing Web page to make sure it has
  the focus.
• Click on Add New Item in the Website menu. (An
  Add New Item dialog box will appear.)
• Select Web Form in the center pane, type a name
  into the Name box, and click on the Add button.
  
  

28
How to Add an Additional Web Page to a Program
(cont.)
select
change name
click on Add button
29
Hyperlink Control

• Found in the General group of the Toolbox.
• Appears on a page as underlined text.
• Used to navigate to another page.
• NavigateUrl property specifies the page to
  navigate to.

30
Sample Web Page
hyperlink control
31
Validation Controls

• Used to validate user input.
• The RequiredFieldValidator control checks that
  data has been entered into a text box or that an
  item of a list box has been selected.
• The RangeValidator control checks that the entry
  in a text box falls within a specified range of
  values.

32
Sample Web Page
RequiredFieldValidator
RangeValidator
Validation controls are not visible at run time.
Only appear when input is missing or invalid.
33
RequiredFieldValidator Control

• The key properties are ControlToVerify and
  ErrorMessage.
• The ErrorMessage setting is the text that appears
  when input into the specified control does not
  meet the given criteria.

34
RangeValidator Control

• The key properties are ControlToVerify,
  ErrorMessage, Type, MinimumValue, and
  MaximumValue.
• Possible settings for Type are String, Integer,
  Double, Date, and Currency.
• The entry in the text box must lie between the
  MinimumValue and the MaximumValue.

35
Postback

• A postback occurs when the contents of a Web page
  are sent to the server for processing.
  Afterwards, the server sends a new page back to
  the browser.
• When a validation control is triggered, the
  matter is handled entirely by the browserno
  postback occurs.

36
The Page Load Event

• Raised when a Web page is first loaded and every
  time it is reloaded after a postback.
• The IsPostBack property can be used to guarantee
  that the page load event is raised only once.

37
Class-Level Variables

• In VWD, class-level variables are of limited
  value since they do not retain their values after
  postbacks.
• Devises known as cookies or session variables can
  be used to retain values.

38
RadioButtonList Control
rblAges
rfvAge
VWD does not have a group box control. The
radio-button list control is the counterpart of
the VB group box containing a set of radio
buttons.
39
RadioButtonList Control (continued)

• The radio-button list control is populated via a
  ListItem Collection Editor that is invoked from
  the Tasks button.
• In the previous slide, the control rfvAge, a
  RequiredFieldValidator, guarantees that a radio
  button has been selected before the button is
  clicked on.

40
Check Box Control
Example 5 of Section 4.4.
To convert this VB program to a VWD program, the
AutoPostBack property of each check box must be
set to True.
41
12.3 Using Databases in Web Programs

• Creating a Bar Chart from a Database
• Displaying Database Information in a Grid

42
The Goal of Section 12.3 is to Generate the Bar
Chart Below
Note The data will be extracted from a database.
43
Four Stages to Create Program

1. Design the Web page
2. Add a database connection
3. Create an object model for the database. (The
   object model is needed to enable LINQ queries to
   the database.)
4. Use a LinqDataSource control to display the bar
   chart.

44
Stage 1 Design Web Page
The Chart control is found in the Data group of
the Toolbox.
Chart control showing its default bar chart.
45
Stage 2 Add a Database Connection
click here
46
Stage 2 Add a Database Connection (continued)
Make SQL Server Database File the data source. If
necessary, use the Change button to alter the
data source.
47
Stage 2 Add a Database Connection (continued)
Click on the Browse button, navigate, and
double-click on Megacities.mdf database. Then
click on the OK button at bottom of window.
48
Stage 3 Create an Object Model for the Database
select
49
Stage 3 Create an Object Model for the Database
(cont.)
select
change name
click on Add button
50
Stage 3 Create an Object Model for the Database
(cont.)
click on the Yes button
An Object Relational Designer will appear.
51
Stage 3 Create an Object Model for the Database
(cont.)
click on tables
52
Stage 3 Create an Object Model for the Database
(cont.)
drag to left pane of Object Relational Designer
53
Stage 3 Create an Object Model for the Database
(cont.)
The window below appears after the first table is
dragged into the Object Relational Designer.
click on the Yes button
54
Stage 3 Create an Object Model for the Database
(cont.)
Object Relational Designer
55
Stage 3 Create an Object Model for the Database
(cont.)
click on the Save All button
56
Stage 4 Add a LinqDataSource Control
Place a LinqDataSource control (in the Data group
of the Toolbox) at the bottom of the Web page.
click here
57
Stage 4 Add a LinqDataSource Control (continued)
select MegacitiesDataContext
click on Next button
58
Stage 4 Add a LinqDataSource Control (continued)
click on Finish button
59
Stage 4 Add a LinqDataSource Control (continued)
double-click on the Display button to bring up
the Code- Behind window
60
Code for btnDisplay_Click

• Dim mcDC As New MegacitiesDataContext
• Dim query From city In mcDC.Cities
• Order By city.pop2010 Descending
• Select city.name, city.pop2010
• chtMegacities.DataBindTable(query, "name")
• chtMegacities.ChartAreas(0).AxisX.Interval 1
• chtMegacities.ChartAreas(0).AxisX.Title
• "City"
• chtMegacities.ChartAreas(0).AxisY.Title
• "2010 Population in Millions"

61
Output of PopBarChart Program
62
Displaying Database Information in a Grid
use a GridView control, call it grvMegacities,
instead of a Chart control
63
Code for btnDisplay_Click

• Dim mcDC As New MegacitiesDataContext
• Dim query From city In mcDC.Cities
• Order By city.pop2010 Descending
• Select city.name, city.pop2010
• grvMegacities.DataSource query
• grvMegacities.DataBind()
• grvMegacities.HeaderRow.Cells(0).Text "City"
  
• grvMegacities.HeaderRow.Cells(1)
• "2010 Population in Millions"

64
Output of PopGrid Program