Data-Driven Web Pages
The most common purpose of a Web page is to present information content. This information may be
for personal promotion, commercial gain, public service, or for any number of public or private purposes.
Irrespective of the goal to be achieved, the purpose of the page remains to supply accurate and
timely information about the individual or enterprise. The challenge in Web-page design, then, is to
create pages that reflect the most accurate and most current information available, and to do so
in the most efficient and cost-effective manner possible.
Producing Web Page Content
Information displayed on a Web page comes from four basic sources. First, it can be fixed content
that is hard-coded on the page using standard XHTML tags to structure and format it for presentation.
This is the conventional way to produce Web pages, whether using drag-and-drop page-creation software
or by hand coding text and XHTML with simple text editors. Second, information can be produced
automatically by browser or server scripts. This information can be fixed, unchanging content, or it
can be generated by built-in language functions or server objects. Third, displayed information can
be script generated from input data supplied by the user. Raw data from the outside is manipulated by
internal scripts to generate new information for page display. Lastly, page information can be drawn
from external data sources such as files and databases. In this case, current information from
personal, corporate, or public data stores is retrieved for display at the exact moment the Web
page is requested.
The main goal with ASP.NET pages is to reduce or eliminate much of the hard-coded information that
appears on the page. As noted, intermixing information content with XHTML tags makes for
Web pages that are difficult to maintain and to keep current. Updating page content involves manual
editing of the page, often requiring the time and effort equal to that needed to create the page in
the first place. It is costly, time consuming, and error prone. Worse, it is often the case that manually
created and edited information is always a step or two behind the actual information of the moment.
The ideal situation is to maintain information apart from the Web page that displays it.
The Web page itself contains only content "placeholders" along with surrounding XHTML for formatting;
the content to populate these placeholders is external to the page. When a Web page is requested, this
content is "poured" into page areas reserved for its display. The page is produced dynamically,
automatically created anew each time the page is requested and always containing the latest, real-time
information provided by these external data sources.
Realistically, Web page content comes from a combination of hard-coded and dynamically produced
information. Keep in mind, though, that where possible, a Web page should generate its own
content rather than the imposed hand-coded content of the developer.
Hard-Coded Text and XHTML
The standard way to present Web page information is through hard-coded text surrounded by
XHTML tags to format it for presentation. As needed or preferred, graphic images can be added to
the page by linking to picture files. The output shown below is produced in this conventional
fashion.
Hard-Coded Page Output
This page is produced by coding text characters on the page and surrounding
them with XHTML tags to style them for presentation. When this content changes,
the page itself must be edited to display new information.
Figure 3-1. Page output produced by hard-coded text and XHTML.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Hard-Coded Page Output</title>
</head>
<body>
<h3>Hard-Coded Page Output</h3>
<p>This page is produced by coding text characters on the page and
surrounding them with XHTML tags to style them for presentation. When
this content changes, the page itself must be edited to display new
information.</p>
</body>
</html>
Listing 3-1. Producing hard-coded page output.
Although no information is produced by ASP.NET features, you still can name the page with
the .aspx suffix. It is a good idea to do this. Later you may need
to return to this page to add scripts and server controls. It will not be necessary to
rename the page when this occurs.
Scripted Text and XHTML
Page information can be generated by scripts that write fixed or variable content
to the page. Information to be written each time the page is loaded is coded in the
Page_Load subprogram. Information to be written in response
to user requests is coded in subprograms that are triggered by server controls. In the
following example, a Page_Load script produces output by writing
text characters, XHTML tags, and a formatted Visual Basic date property to server output
controls coded on the page.
Script-Generated Page Output
Today, Tuesday, February 07, 2012, this output is produced by a script that writes text characters, XHTML tags, and a Visual Basic date function to server output controls coded on the page. The date is always current and does not require page editing.
Figure 3-2. Page output produced by script.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<SCRIPT Runat="Server">
Sub Page_Load
Heading.Text = "<h3>Script-Generated Page Output</h3>"
Paragraph.Text = "<p>Today, <span style=""color:red"">" & _
Format(DateString, "Long Date") & "</span>, " & _
"this output is produced by a script that writes " & _
"text characters, XHTML tags, and a Visual Basic " & _
"date function to server output controls coded on " & _
"the page. The date is always current and does not " & _
"require page editing.</p>"
End Sub
</SCRIPT>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Script-Generated Page Output</title>
</head>
<body>
<form Runat="Server">
<asp:Label id="Heading" Runat="Server"/>
<asp:Label id="Paragraph" Runat="Server"/>
</form>
</body>
</html>
Listing 3-2. Page produced by script output.
Script-generated information must be targeted to server controls as output areas. In the
above example, two <asp:Label> controls serve this purpose. They
are given id identifications so that the script, coded here in the
Page_Load subprogram, can specify where to place its output. The script
assigns a string of text characters and XHTML to the Text property of the
Heading Label to display as the page heading; it assigns a combination
of text, XHTML, and a server-generated date to the Paragraph Label.
Notice that no XHTML or text information is hard-coded in the body of the page. It is generated
and written entirely by the script.
In this example, the string of text assigned to the output Label itself contains a quoted
string. Notice in the first line of the assignment,
Paragraph.Text = "<p>Today, <span style=""color:red"">" & _
that the embedded <span> tag includes the style setting
style=""color:red"" wherein the property setting is enclosed inside
a pair of quotes. Any time quoted text appears inside a quoted string it is necessary
to use pairs of quotes surrounding the inner string to differentiate from the single quotes
surrounding the outer string.
Script-Processed Input Data
Web page information can be produced by inputting user data and using it to generate output
for display through server output controls. The following example solicits user input through
a TextBox control. When the button is clicked, a subprogram is called to perform a calculation
based on the entered value. The calculation result, along with surrounding text and XHTML, are
written to a Label output control.
User-Supplied Page Input
Enter your age:
Figure 3-3. Page output produced from user input.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<SCRIPT Runat="Server">
Sub Get_Dog_Years (Src As Object, Args As EventArgs)
If Age.Text <> "" Then
Dim DogYears As Integer
DogYears = Age.Text * 7
DogAge.Text = "Your age is <b>" & DogYears & "</b> in dog years!"
End If
End Sub
</SCRIPT>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>User-Supplied Page Input</title>
</head>
<body>
<form Runat="Server">
<h3>User-Supplied Page Input</h3>
Enter your age:
<asp:TextBox id="Age" Size="5" Runat="Server"/>
<asp:Button Text="Submit" OnClick="Get_Dog_Years" Runat="Server"/>
<asp:Label id="DogAge" Runat="Server"/>
</form>
</body>
</html>
Listing 3-3. Code for page produced from user input.
For this example, three server controls are needed. An <asp:TextBox>
control is required as the user input area; an <asp:Button>
control calls a subprogram to produce page output; an
<asp:Label> control serves as the display target for script output. When the
button is clicked, the value entered into the TextBox is multiplied by 7 and the result is
surrounded by fixed text and XHTML assigned to the output Label. Again, no text or XHTML is
hard-coded in the body section of the page. All output is generated by script.
Processing External Data Sources
For most commercial Web sites and many personal Web sites, information content is not coded
on the page nor does it originate as user input. It comes from external files and databases,
the storehouses of information that individuals and enterprises use to operate and manage their
personal and business affairs. Most Web page information, then, is maintained separately from
the pages that display it. When a page is requested, this information is extracted from these
external data sources and placed on the page prior to transmitting it to the browser. Displayed
information is always current because the page is created dynamically from current information
sources.
The following output is generated by extracting information stored in a database located
on the Web server for this site. The layout and contents of this database are described below; it
is used in many examples throughout these tutorials.
Database-Generated Page Output
| BookID | BookTitle | BookPrice | BookQty |
| DB111 | Oracle Database | $69.99 | 10 |
| DB222 | Databases in Depth | $29.95 | 6 |
| DB333 | Database Processing | $136.65 | 12 |
| DB444 | Access Database Design | $34.95 | 25 |
| DB555 | SQL Server 2005 | $29.99 | 0 |
| GR111 | Adobe Photoshop CS2 | $29.99 | 4 |
| GR222 | Learning Web Design | $39.95 | 8 |
| GR333 | Macromedia Flash Professional | $44.99 | 17 |
| GR444 | Digital Photographer Handbook | $24.95 | 22 |
| GR555 | Creating Motion Graphics | $59.95 | 13 |
| HW111 | How Computers Work | $29.99 | 8 |
| HW222 | Upgrading and Repairing PCs | $59.99 | 5 |
| HW333 | USB System Architecture | $49.99 | 1 |
| HW444 | Designing Embedded Hardware | $44.95 | 3 |
| HW555 | Contemporary Logic Design | $102.95 | 2 |
| SW111 | Java How to Program | $98.59 | 9 |
| SW222 | C Programming Language | $44.25 | 12 |
| SW333 | Programming C# | $44.95 | 0 |
| SW444 | Programming PHP | $39.95 | 17 |
| SW555 | Visual Basic.NET Programming | $49.99 | 13 |
| SY111 | Operating System Concepts | $95.75 | 1 |
| SY222 | The UNIX Operating System | $19.95 | 12 |
| SY333 | Windows Server 2003 | $29.99 | 25 |
| SY444 | Linux in a Nutshell | $44.95 | 14 |
| SY555 | Mastering Active Directory | $49.99 | 8 |
| WB111 | Ajax in Action | $22.67 | 14 |
| WB222 | Professional ASP.NET 2.0 | $32.99 | 21 |
| WB333 | Cascading Style Sheets | $39.95 | 6 |
| WB444 | DOM Scripting | $23.09 | 8 |
| WB555 | Microsoft ASP.NET 2.0 | $29.99 | 12 |
Figure 3-4. Page output produced from an external data source.
As you can see in the following code listing, there is very little XHTML on the page and no
scripts. All server processing is incapsulated in the two server controls coded on the page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Database-Generated Page Output</title>
</head>
<form Runat="Server">
<h3>Database-Generated Page Output</h3>
<asp:AccessDataSource id="BookSource" Runat="Server"
DataFile="c:\eCommerce\Databases\BooksDB.mdb"
SelectCommand="SELECT BookID, BookTitle, BookPrice, BookQty FROM Books
ORDER BY BookID"/>
<asp:GridView id="BookGrid" DataSourceID="BookSource" Runat="Server"/>
</form>
</body>
</html>
Listing 3-4. Code for page produced from an external data source.
Only two server controls are needed to produce page output. An
<asp:GridView> control, one of the information display controls to which external
data can be bound, automatically produces a table display of provided information. An
<asp:AccessDateSource> control extracts information from the database. It is associated
with the GridView through the latter's DataSourceID property so that
retrieved information is displayed in the format given by the GridView. No special styling
is applied to the output table; however, there is a full range of layout and styling options
that can be applied to a GridView. Although not shown in this example, various user input
controls can be added to the page so that users can make choices about which information to
extract and display as output.
An advantage of maintaining Web page content in external data stores is that it is more
likely to be the most current and most accurate information. For commercial Web sites especially,
much of the content already resides in corporate databases representing the storehouses of
information used to operate and manage the enterprise. Web pages are current and accurate to
the extent they can draw out and display this information in a timely manner. It makes little
sense to hard code this information on a Web page as text and XHTML when the information itself
can change a minute or two later. Better that Web page information be live, extracted from these
data sources the exact second it is requested.
A second advantage of keeping page content separate from its on-page display is that
the Web page itself seldom, if ever, requires editing. As long as the arrangment and presentation
of information is satisfactory, page coding is never changed while page content changes
regularly, as often as the information in the data stores change. The page always presents the
most current information with no involvement of the page developer and no need for a technical
or clerical staff to update the pages. In effect, those who maintain the data stores maintain
the Web site.
The benefits of data-driven Web sites not only pertain to corporate or commercial sites. Even
a personal Web site is advantaged by separating page formatting from its information content.
Of course, if page content seldom changes then it may be satisfactory to hard code the
information on the page itself. However, if content changes routinely, a better solution is to
off-load it into external files or databases. The information content is more easily edited and
updated in these external data stores than by continually editing XHTML pages. Regardless of the
size or complexity of a Web site, a developer's first inclination should be to manage its content
externally using server controls and scripts to bring it together for page presentation.
Much of the discussion in these tutorials surrounds database processing. For illustration
purposes, it is necessary to have a database to work with. On this and subsequent pages a
Microsoft Access database named BooksDB.mdb is used. This
database contains a Books table with information about
books for sale. This information is typical of that needed for e-commerce Web
sites. The structure of this database table is shown below.
The complete database contents are shown below, produced, incidentally, live and direct from
the database itself.
Database design is not a topic of these tutorials; besides, it requires very little know-how
to devise an Access database for storing Web content. A basic set of data fields with a single
primary key field can be easily created through the design wizards built into Microsoft Access.
As you proceed through these tutorials, this database is further expanded with additional tables.
It is used not only for display of existing records but for various database maintenance tasks
such as adding new records, updating existing records, and deleting old records from the
database. Later it is used to support an example e-commerce site of books for sale.
In addition to this database information, pictures for all books are available. They are used in
various database display applications throughout these tutorials. These pictures are shown below,
again produced live from the files themselves.
Notice that the names of the picture files are the same as their database BookID numbers with
".jpg" attached. This naming convention makes it easy to retrieve a
picture associated with a particular book as illustrated many times in these tutorials.
The overall directory structure for the example applications described in these tutorial is
shown below. The root directory is c:\eCommerce, inside of which are
three subdirectories: Databases, BookPictures,
and WebSite. The Databases directory must
have both read and write access.
If you are interested in trying out the code presented in these tutorials, you can download the
example BooksDB.mdb database and associated pictures files through the
following link:
Example code to process these files is not available for download. It can be copied from
these Web pages and modified for personal use. However, the intent is to encourage original
development of pages, not just copying and pasting somebody else's code.