Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

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


View products that this article applies to.

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. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers 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 requirements.

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:
<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'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:
    1. On the File menu, click Insert, click Database, and then click Results.
    2. Click to select Use a sample database connection (Northwind), and then click Next.
    3. 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:
    <% @ Language="VBScript" %>
    <% Option Explicit %>
    <html>
    <head>
    <title>ASP/DHTML Test</title>
    
    <!-- ********** SECTION ONE ********** -->
    <!-- add two stylesheet classes -->
    <style>
    .normal { color: black; background-color:white }
    .edited { color: white; background-color:blue }
    </style>
    
    <!-- ********** SECTION TWO ********** -->
    <!-- add the JavaScript function -->
    <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 = 'Please enter a new value for ';
             varMsg += window.event.srcElement.id;
    
             /* prompt for new information */ 
             varMsg = prompt(varMsg,'Some Value')
    
             /* 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 = 'edited';
          }
       }
    -->
    </script>
    </head>
    
    <body>
    <!-- *********** SECTION THREE ********** -->
    <!-- creating a table from the database -->
    <table border="1" onClick="changeCell()">
    <%
       ' declare all variables
       Dim objCN,objRS,objField
       Dim strSQL,strCN
       Dim lngRow,lngCol
    
       ' define the SQL string
       strSQL = "SELECT * FROM Customers"   
    
       ' define the database connection string
       strCN = "driver={Microsoft Access Driver (*.mdb)};" & _
          "dbq=" & Server.MapPath("/fpdb/fpnwind.mdb")
    
       ' open the database connection
       Set objCN = Server.CreateObject("ADODB.Connection")
       objCN.Open strCN   
    
       ' open the recordset
       Set objRS = objCN.Execute(strSQL)
    
       ' set starting row counter
       lngRow = 0
    
       ' loop through the data records
       While Not objRS.EOF
    
          ' reset column counter
          lngCol = 0
    
          ' increment row counter
          lngRow = lngRow + 1
    
          ' output start of table row
          Response.Write "<tr>" & vbCrLf
    
          ' loop through the fields in each record
          For Each objField in objRS.Fields
    
             ' increment column counter
             lngCol = lngCol + 1
    
             ' output a cell and give it an ID for DHTML
             Response.Write "<td class=""normal"" id=""ROW" & _
                lngRow & "COL" & lngCol & """>" & _
                objField & "</td>" & vbCrLf
    
          Next
    
          ' move to next record in database
          objRS.MoveNext
    
          ' 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.


↑ Back to the top


References

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

↑ Back to the top


Keywords: KB272069, kbhowtomaster, kbhowto

↑ Back to the top

Article Info
Article ID : 272069
Revision : 9
Created on : 7/4/2007
Published on : 7/4/2007
Exists online : False
Views : 413