Chapter 12 – Web Applications

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

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.

2

12.1 Programming for the Web, Part I

• Creating a Web Program with Visual Web Developer

• Using a Table to Lay Out a Web Page’s 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

3

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.)

4

Options Settings

5

click on OK button

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.

6

Creating a Web Program (continued)

7

enter name

click on OK

Web Page (VWD Equivalent of the Form Designer)

8

Main Content region

Web page tab

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.

9

Toolbox

10

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

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.

11

Sample Web Page

12

Properties Window

13

The name of a control is specified by the ID property instead of the Name property.

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.

14

Sample CodeProtected 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”.

15

Running a Program

• Press Ctrl+F5 to run program without debugging.

• Program runs in the computer’s 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.

16

A Run of the Sample Program

17

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.

18

Sample Table

19

This table has 5 rows and 2 columns. Each subdivision is called a cell.

cell

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.

20

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.

21

Text Files

• Normally placed in the Solution Explorer’s 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.

22

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

lstBox.DataSource = query

lstBox.DataBind()

23

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.

24

How to Open an Existing Web Program

25

first click here

Then navigate to the program’s folder and click on the Open button.

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

26

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.

27

How to Add an Additional Web Page to a Program (cont.)

28

select

click on Add button

change name

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.

29

Sample Web Page

30

hyperlink control

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.

31

Sample Web Page

32

RequiredFieldValidator

RangeValidator

Validation controls are not visible at run time. Only appear when input is missing or invalid.

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.

33

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.

34

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 browser—no postback occurs.

35

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.

36

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.

37

RadioButtonList Control

38

rblAgesrfvAge

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.

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.

39

Check Box Control

40

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.

12.3 Using Databases in Web Programs

• Creating a Bar Chart from a Database

• Displaying Database Information in a Grid

41

The Goal of Section 12.3 is to Generate the Bar Chart Below

42

Note: The data will be extracted from a database.

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.

43

Stage 1: Design Web Page

44

Chart control showing its default bar chart.

The Chart control is found in the Data group of the Toolbox.

Stage 2: Add a Database Connection

45

click here

Stage 2: Add a Database Connection (continued)

46

Make SQL Server Database File the data source. If necessary, use the Change button to alter the data source.

Stage 2: Add a Database Connection (continued)

47

Click on the Browse button, navigate, and double-click on Megacities.mdf database. Then click on the OK button at bottom of window.

Stage 3: Create an Object Model for the Database

48

select

Stage 3: Create an Object Model for the Database (cont.)

49

select

click on Add buttonchange name

Stage 3: Create an Object Model for the Database (cont.)

50

click on the Yes button

An Object Relational Designer will appear.

Stage 3: Create an Object Model for the Database (cont.)

51

click on tables

Stage 3: Create an Object Model for the Database (cont.)

52

drag to left pane of Object Relational Designer

Stage 3: Create an Object Model for the Database (cont.)

53

The window below appears after the first table is dragged into the Object Relational Designer.

click on the Yes button

Stage 3: Create an Object Model for the Database (cont.)

54 Object Relational Designer

Stage 3: Create an Object Model for the Database (cont.)

55

click on the Save All button

Stage 4: Add a LinqDataSource Control

56

Place a LinqDataSource control (in the Data group of the Toolbox) at the bottom of the Web page.

click here

Stage 4: Add a LinqDataSource Control (continued)

57

select MegacitiesDataContext

click on Next button

Stage 4: Add a LinqDataSource Control (continued)

58

click on Finish button

Stage 4: Add a LinqDataSource Control (continued)

59

double-click on the Display button to bring up the Code- Behind window

Code for btnDisplay_ClickDim 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"

60

Output of PopBarChart Program

61

Displaying Database Information in a Grid

62

use a GridView control, call it grvMegacities, instead of a Chart control

Code for btnDisplay_ClickDim 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"

63

Output of PopGrid Program

64