©
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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο