HOW TO: Use ASP to Generate DHTML-Enabled Tables in Front Page 2000

SUMMARY
Microsoft Active Server Pages (ASP) can be used to gather information from a database, and Dynamic HTML (DHTML) can be used to change information that is displayed on a Web page from the client. This article explains how to use these two technologies together. Microsoft provides programming examples for illustration only, without warranty either expressed or implied, including, but not limited to, the implied warranties of merchantability and/or fitness for a particular purpose. This article assumes that you are familiar with the programming language being demonstrated and the tools used to create and debug procedures. Microsoft support professionals can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific needs. If you have limited programming experience, you may want to contact a Microsoft Certified Partner or the Microsoft fee-based consulting line at (800) 936-5200. For more information about Microsoft Certified Partners, please visit the following Microsoft Web site:

http://www.microsoft.com/partner/referral/

For more information about the support options that are available and about how to contact Microsoft, visit the following Microsoft Web site:

http://support.microsoft.com/default.aspx?...;EN-US;CNTACTMS

Defining DHTML ID Attributes
HTML tags on a Web page that have been given an ID attribute can be easily accessed through DHTML. When you work with static text, the ID can be inserted into an HTML tag manually, as in the following example:

Code:
<P ID="MyParagraph">This is some sample text</P>
When you work with a Web page that is dynamically generated by ASP from a live database, however, the ID attributes should be generated dynamically as well. The ASP example in this article illustrates how to accomplish this.

ASP Sample Explained
The ASP page sample is divided into three sections that are labeled with HTML comments. These sections are:

? Section One: Stylesheet Classes - The stylesheet classes listed are used by the DHTML function to change the appearance of text that has been changed.
? Section Two: DHTML JavaScript - This function detects whether a table cell was clicked, and, if so, it prompts for text to insert into the table cell that was clicked.
? Section Three: HTML Table & ASP Code - This section of code first creates an HTML table that calls the DHTML function when it is clicked, and then uses ASP code to open the sample database&#39;s "Customers" table to loop through all the records and display them in the HTML table as individual rows and columns. Each column is given a unique ID by the ASP code that can be used with the DHTML function.

NOTE: This example demonstrates how to use ASP to create a table with dynamically created IDs for DHTML. Changing the values in the table cells does not update the actual database.

Creating the ASP Sample
Follow these steps to create the ASP sample page: 1. Open your root web in FrontPage 2000 on a Microsoft Internet Information Services Web server.
2. Open a new page in FrontPage.
3. If the sample database is not already in the "/fpdb/fpnwind.mdb" folder, insert the Northwind sample database into your web by following these steps:a. On the File menu, click Insert, click Database, and then click Results.
b. Click to select Use a sample database connection (Northwind), and then click Next.
c. When the next page of the wizard appears, click Cancel.

4. Switch to HTML view.
5. Remove all the existing HTML code, and insert the following ASP/HTML code:

Code:
<% @ Language="VBScript" %>
<% Option Explicit %>
<html>
<head>
<title>ASP/DHTML Test</title>



<style>
.normal { color: black; background-color:white }
.edited { color: white; background-color:blue }
</style>



<script language="JavaScript">
<!--
 * /* define function to change cell value & style */
 * function changeCell()
 * {
 * * */* determine if a table cell was clicked */
 * * *if(window.event.srcElement.tagName == "TD")
 * * *{
 * * * * /* create a prompt message */
 * * * * var varMsg = &#39;Please enter a new value for &#39;;
 * * * * varMsg += window.event.srcElement.id;

 * * * * /* prompt for new information */
 * * * * varMsg = prompt(varMsg,&#39;Some Value&#39;)

 * * * * /* update the table cell for new information */
 * * * * window.event.srcElement.innerText = varMsg;

 * * * * /* change the table cell class to show as edited */
 * * * * window.event.srcElement.className = &#39;edited&#39;;
 * * *}
 * }
-->
</script>
</head>

<body>


<table border="1" onClick="changeCell()">
<%
 * &#39; declare all variables
 * Dim objCN,objRS,objField
 * Dim strSQL,strCN
 * Dim lngRow,lngCol

 * &#39; define the SQL string
 * strSQL = "SELECT * FROM Customers"

 * &#39; define the database connection string
 * strCN = "driver={Microsoft Access Driver (*.mdb)};" & _
 * * *"dbq=" & Server.MapPath("/fpdb/fpnwind.mdb")

 * &#39; open the database connection
 * Set objCN = Server.CreateObject("ADODB.Connection")
 * objCN.Open strCN

 * &#39; open the recordset
 * Set objRS = objCN.Execute(strSQL)

 * &#39; set starting row counter
 * lngRow = 0

 * &#39; loop through the data records
 * While Not objRS.EOF

 * * *&#39; reset column counter
 * * *lngCol = 0

 * * *&#39; increment row counter
 * * *lngRow = lngRow + 1

 * * *&#39; output start of table row
 * * *Response.Write "<tr>" & vbCrLf

 * * *&#39; loop through the fields in each record
 * * *For Each objField in objRS.Fields

 * * * * &#39; increment column counter
 * * * * lngCol = lngCol + 1

 * * * * &#39; output a cell and give it an ID for DHTML
 * * * * Response.Write "<td class=""normal"" id=""ROW" & _
 * * * * * *lngRow & "COL" & lngCol & """>" & _
 * * * * * *objField & "</td>" & vbCrLf

 * * *Next

 * * *&#39; move to next record in database
 * * *objRS.MoveNext

 * * *&#39; output end of table row
 * * *Response.Write "</tr>" & vbCrLf

 * Wend
%>
</table>

</body>
</html>
6. Save the page as ASP_DHTML_Test.asp.

When you browse this page in Microsoft Internet Explorer and click a table cell, you are prompted to enter a value to be inserted into the table cell that was clicked. In addition, the stylesheet class of the affected table cell is changed to reflect that it has been edited.


REFERENCES
For more information about Microsoft JScript, please browse to the following Microsoft Web site:

http://msdn.microsoft.com/scripting/jscript/default.htm

For more information about writing ASP/HTML, please browse to the following Microsoft Web sites:

http://msdn.microsoft.com/workshop/a...ml/beghtml.asp

http://msdn.microsoft.com/workshop/server/...asptutorial.asp


APPLIES TO
? Microsoft FrontPage 2000 Standard Edition
? Microsoft Internet Information Server 4.0
? Microsoft Internet Information Services 5.0