Web Applications with Databases

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 2 months ago)

208 views

©
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