Web Applications with Databases

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
1

Addison Wesley
is an imprint of

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
2

Chapter 10

Web Applications with Databases

Updated: 4/3/2011

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
3

Contents

•
Updating the Web.Config file for database
connections

•
10.1

Master
-
Detail Pages

•
10.2

Using the GridView Control

•
10.3

Using the DetailsView Control

•
10.4

Data Binding and List Controls

•
10.5

Interacting with the GridView Control

•
10.6

Using JavaScript

•
10.7

Using Microsoft Ajax Controls

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
4

Database Connenctions

•
Two step approach:

1. Create a Connection String in the Web.Config File

−
Example:




−
2. Read the Connection String in your Database Layer of
your project

−
Example:


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
5

10.1

Master
-
Detail Pages

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
6

Master
-
Detail Pages

•
Web pages on the same site often have common
elements

•
A master page contains content placeholders, each
of which can be filled by a content page


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
7

Concept View

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
8

Master Page

•
Master Page template

•
ContentPlaceHolder

control is inserted in the page

−
use an HTML table to align and set boundaries

•
You can add other controls to the master page


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
9

Content Page

•
Open the Master page

•
Select
Add Content Page

from the
Website

menu

•
Master page will appear grayed in the background
while you are editing the content page

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
10

Tutorial 10
-
1

•
Creating an Application with a Master Page

•


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
11

References to Content Controls

•
From the Master page, use the Controls collection


For Each ctrl As Control In


ContentPlaceHolder1.Controls



If ctrl.ID = "Button1" Then


ctrl.Visible = False


End If

Next


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
12

Referencing the Master Page

•
From a content page, use the
Me.Master

property

−
Cast it to the actual Master page class name

Dim tmaster As MyMasterPage =


CType(Me.Master, MyMasterPage)


•
Get a reference to a specific control

Dim ctrl As Label =


CType(tmaster.FindControl("lblStatus"),



Label)

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
13

Page Initialization Events

•
Event order for combined master & content pages:


1.
Initialize master page child controls

2.
Initialize content page child controls

3.
Initialize master page

4.
Initialize content page

5.
Load content page

6.
Load master page

7.
Load master page child controls

8.
Load content page child controls

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
14

10.2 Using the GridView Control

•
Counterpart to the DataGridView that you use in
Windows Forms applications

•
Specified in XHTML code

•
DataSource control provides data:

−
AccessDataSource

−
SqlDataSource

−
ObjectDataSource

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
15

GridView in Design Mode

<asp:GridView


ID="GridView1"


runat="server">

</asp:GridView>

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
16

SqlDataSource Control

•
Connects to database

•
Provides data to controls such as GridView

•
Contains SQL queries (named
commands
)

•
Example:

<asp:SqlDataSource ID="MembersDataSource"

runat="server"


ConnectionString="<%$

ConnectionStrings:karateConnectionString %>"


SelectCommand="SELECT ID, Last_Name, First_Name, Phone,



Date_Joined FROM Members ORDER BY Last_Name">

</asp:SqlDataSource>

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
17

Tutorial 10
-
2

•
Displaying the Karate Members table in a
GridView Control


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
18

Tutorial 10
-
3

•
Formatting the Karate Members columns

•
Modify the Columns property of the Grid

•


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
19

10.3 Using the DetailsView Control

•
Lets the user add, view, edit, and delete
individual database table rows

•
Displays one row at a time

•
Connect it to a DataSource control

•
DetailsView Tasks window


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
20

Tutorial 10
-
5

•
Selecting Karate
Members by ID

•
Add a parameterized
query to the
SelectCommand property
of a SqlDataSource control


•
The user can edit any
table row. User is
prompted for an ID
number


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
21

10.4 Data Binding with ListControls

•
All inherit from the ListControl class:

−
ListBox

−
DropDownList

−
CheckBoxList

−
RadioButtonList

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
22

Runtime Data Binding

•
Binding to the DataSource property of a control at
runtime

•
Suited to multi
-
tier applications

−
Example:

Dim mc As New Customers

With lstCustomers


.DataSource = mc.GetCustomers()


.DataTextField = "Name"


.DataBind()

End With

middle tier

class

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
23

10.5 Interacting with the GridView
Control

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
24

Campus.mdf

Database

Courses:

Students:

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
25

Inserting Command Buttons

•
...into a GridView control

•
Open the GridView Tasks window and select these
options:

−
Enable Selection

−
Enable Editing

−
Enable Deleting


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
26

GridView Control in Edit Mode

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
27

Tutorial 10
-
6

•
Displaying the
Courses

Table in a GridView

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
28

Tutorial 10
-
7

•
Using Graphical Command Buttons in the
Courses Grid

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
29

SQL Query Parameters

•
You can fill SQL query parameters from different
sources:

−
Cookie
—
Gets the parameter value from a HttpCookie
object. You must supply the cookie name.

−
Control
—
Another control on the same page. You can use
the default property of the control, or you can specify a
property from the control.

−
Form
—
Gets the value of an HTML form field, identified by
name.

−
QueryString
—
Gets the value from a QueryString

−
Session
—
Gets the value from an object in the Session
state collection. You must supply the key value.

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
30

Tutorial 10
-
8

•
Displaying Class Rolls

•
Campus database: Courses and Students

•
Write code statements to find out which grid row
was selected by the user.

−
Use that information to filter rows in a second grid.

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
31

Output from Tutorial 10
-
8

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
32

Tutorial 10
-
9

•
Displaying the Class Roll on a Separate Page

Use a QueryString parameter
to pass the information to the
second page.

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
33

10.6 Using JavaScript

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
34

Writing JavaScript

•
Client
-
side scripting language

−
no postback required

•
Embed in Web page between <script> and </script>
tags

•
Example:

<script language="text/javascript">


alert('Welcome to my Web site!')

</script>

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
35

Script in ASP.NET Controls

•
Attach JavaScript to server side button click events,
using the OnClientClick property:

<asp:Button ID="btnConfirm"

runat="server"

Text="Confirm"

OnClientClick="alert('You clicked the Confirm button')"/>

•
Use single quotes inside strings delimited by double quotes


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
36

Accessing Form Fields

•
Document object, Forms array

•
Refer to the form array index

document.forms[0].txtName

•
Refer to the form and a control using IDs

form1.txtName


•
Setting the contents of a TextBox

form1.txtName.value = "Joe Smith"

•
Label controls are not accessible


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
37

JavaScript Functions

•
Define anywhere on a Web page

•
Browser reads from top to bottom

−
(define functions before they are called)

•
No explicit return type, parameters are untyped

•
Example:

function addTwo( v1, v2 ) {


return v1 + v2;

}

•
Sample calls:

X = form1.txtValueX.value

Y = form1.txtValueY.value

form1.txtSum.value = addTwo(X, Y)

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
38

Popup Windows

•
Call the JavaScript
window.open

function

−
pass the name of a page

window.open('calendar.aspx')


−
optional: title, width, height, other attributes

(more likely to be blocked)


window.open('calendar.aspx','Calendar',


'width=400,height=300,resizable=yes')

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
39

Getting the Local Date & Time

•
Call the javascript Date( ) function

•
Useful when the user is in a different time zone than
the Web server



<body
onload="javascript:document.form1.txtDate.value=Dat
e();">

<form id="form1" runat="server">


<asp:TextBox ID="txtDate"....>

</form>

</body>

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
40

Generating JavaScript at Runtime

•
Permits you to include runtime variable values

•
Writes JavaScript code to
Response

object's
HTML stream

•
Example, shows an alert dialog:



ClientScript.RegisterClientScriptBlock(Me.GetType(),


"alertWelcome",

"<script>alert('Welcome to my JavaScript

page')</script>")

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
41

Tutorial 10
-
10

•
Receiving user input in JavaScript

•
Dialog windows

−
yes/no question

−
string input from the user

−
popup window with calendar


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
42

10.7 Using Microsoft Ajax Controls

•
Ajax technology provides a richer user experience on
Web sites by handling many actions within the Web
browser. The letters in its name refer to Asynchronous
JavaScript and XML.


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
43

Microsoft Implementation of Ajax

•
Synthesis of the following Web technologies:

−
HTML

−
Cascading style sheets

−
JavaScript

−
Document Object Model (DOM)
—
Lets you access directly
Webage elements and events using JavaScript.

−
Extended Markup Language (XML)
—
Customizable
markup language for objects and other data.

−
XMLHttpRequest
—
A technology that permits direct
communication between elements on a Web page with a
Web server.


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
44

Ajax Extensions Controls

•
ScriptManager

−
provides connection to Microsoft JavaScript library

•
ScriptManagerProxy

−
allows nested components to contain service references

•
UpdatePanel

−
lets applications refresh just a part of a Web page

•
Timer

−
performs postbacks at defined time intervals

•
UpdateProgress

−
lets user monitor the ongoing status of an operation

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
45

Ajax Control Toolkit

•
Microsoft's custom library of Ajax controls

•
Examples:

−
Accordion, AlwaysVisible, AnimationExtender,
AsynchFileUpload, AutoComplete, CalendarExtender,
CascadingDropDown, CollapsiblePanel, ColorPicker


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
46

Tutorial 10
-
11

•
Displaying the Web Server Time with Ajax Controls

•
Refreshes a portion of the Web page that is located
inside an UpdatePanel control.


©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
47

Tutorial 10
-
12

•
Using the UpdateProgress Control

•
UpdatePanel with a LinkButton. Simulates a slow
operation, displaying an animated image.


<asp:UpdateProgress id="PageUpdateProgress"


runat="server" >


<ProgressTemplate>



<asp:Image ImageUrl="~/ajax
-
loader.gif"




runat="server" />



Please wait...


</ProgressTemplate>

</asp:UpdateProgress>

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
48

Key Terms

•
AccessDataSource control

•
Ajax technology

•
Ajax Control Toolkit

•
AccessDataSource control

•
Alert dialog

•
client
-
side script

•
Content control

•
content page

•
content placeholder

•
ContentPlaceHolder control

•
DataSource

•
Details View control

•
document object

•
GridView control

•
JavaScript

ListControl class

master
-
detail pages

master page

query string

RegisterClientScriptBlock method

runtime data binding

ScriptManager control

ScriptManagerProxy control

server
-
side script

SqlDataSource control

static data binding

Timer control

UpdatePanel control

UpdateProgress control

©
2011 Pearson Addison
-
Wesley. All rights reserved.




Slide
49

The End