Data Binding | Programming Active Server Pages (Microsoft Programming Series)

Database publishing is by far the most common use of Internet technology today. While client-side scripting is useful for validating data input fields and while Dynamic HTML contributes considerably to the quality of the user interface, no real business problem can be solved without allowing data access. In the past, data access on the Web depended on the server querying the database and formatting a Web page with the resulting records. The outstanding feature of the methodology is a constant string of round-trips to the server for each new query on the database. Although this method is functional, it does present problems. Making many trips to the server is slow going, and the updating of pages can be affected by many factors other than the speed of the query, resulting in an unsatisfying user experience.

Internet Explorer 4.0 changes the very nature of data access on the Web by supporting current-record data binding. Binding data on the client means that a view of data from the data source can be browsed and edited without the client having to return to the server for an update. Web pages created with binding respond more quickly than their server-side counterparts, resulting in a superior user interface and application.

In order to bind data to an object, IE 4.0 introduces two new HTML attributes: DATASRC and DATAFLD. These two attributes are used to bind an HTML element to a particular column in a recordset. DATASRC and DATAFLD can be used with the following tags: <TABLE>, <SPAN>, <DIV>, <OBJECT>, <PARAM>, <SELECT>, <TEXTAREA>, <IMG>, and <MARQUEE>. DATASRC represents a recordset that is generated as a result of executing a Structured Query Language (SQL) statement on a data source. DATAFLD is used to map one of the fields in the recordset to an individual element such as a text box.

Creating a recordset that can be bound to an element requires the use of an ActiveX control. IE 4.0 ships with two ActiveX controls capable of creating recordsets from various data sources: the Tabular Data Control (TDC) and Remote Data Services (RDS). The TDC is used to access delimited data in a text file, while RDS is used to access data in an ODBC data source.

Tabular Data Control

The Tabular Data Control (TDC) is an ActiveX control specifically designed to access data kept in a delimited text file. The control is fairly simple to use and requires setting only a few properties. (Appendix D contains a complete listing of properties and methods supported by the TDC.)

The TDC is inserted in a Web page by using the <OBJECT> tag. As with all ActiveX objects, IE 4.0 checks the CLASSID attribute to uniquely identify the control. The following code places the TDC in a Web page:

<OBJECT ID="Data1" WIDTH=0 HEIGHT=0 BORDER="0"     CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">     <PARAM NAME="DataURL" VALUE="DATA.TXT">     <PARAM NAME="UseHeader" VALUE="True"> </OBJECT>

Once the TDC is in a Web page, you can bind an appropriate HTML element to any field in the data source. Listing 4-12 shows a complete example in which the data from a text file is bound to text boxes in the page. The result is pictured in Figure 4-4.

The example utilizes the first row of data in the text file as the field designations. Setting the UseHeader property to True tells IE 4.0 to use the first row of data as the column names. These column names can then be used to bind a particular element. For example, the following code binds a text box with the Supplier field:

DATASRC=#Data1 DATAFLD="Supplier"

DATASRC is set to the name of the TDC as defined in the ID attribute of the <OBJECT> tag. Note the pound sign (#) placed before the name in the DATASRC attribute. This syntax is a required part of the data binding specification. DATAFLD is then set to the name of the field in the text file.

Listing 4-12. Using the Tabular Data Control.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Tabular Data Control</TITLE> <SCRIPT LANGUAGE="VBScript"> <!--     Sub cmdNext_OnClick         ' The TDC has a RecordSet property that         ' allows access to the data in the text file         Document.frmData.Data1.Recordset.MoveNext         If Document.frmData.Data1.Recordset.EOF Then             Document.frmData.Data1.Recordset.MoveLast         End If     End Sub     Sub cmdPrev_OnClick         Document.frmData.Data1.Recordset.MovePrevious         If Document.frmData.Data1.Recordset.BOF Then             Document.frmData.Data1.Recordset.MoveFirst         End If     End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="frmData"> <!-- The Tabular Data Control --> <OBJECT ID="Data1" WIDTH=0 HEIGHT=0 BORDER="0"     CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">     <PARAM NAME="DataURL" VALUE="DATA.TXT">     <PARAM NAME="UseHeader" VALUE="True"> </OBJECT> <!-- The following fields are bound to the data  source using DATASRC and DATAFLD --> <INPUT ID="lngProductID" TYPE="TEXT" SIZE=2     DATASRC=#Data1 DATAFLD="ProductID"><P> <INPUT ID="strSupplier" TYPE="TEXT" SIZE=50     DATASRC=#Data1 DATAFLD="Supplier"><P> <INPUT ID="strManufacturer" TYPE="TEXT" SIZE=50     DATASRC=#Data1 DATAFLD="Manufacturer"><P> <INPUT TYPE="BUTTON" NAME="cmdNext" VALUE="Next"> <INPUT TYPE="BUTTON" NAME="cmdPrev" VALUE="Prev"> </FORM> </BODY> </HTML>

Figure 4-4. The Tabular Data Control.

Remote Data Services

Although binding to delimited text files can be useful, most business data is maintained in relational databases. Accessing these databases is the job of Remote Data Services (RDS). RDS is capable of creating recordsets from any ODBC data source running on the server and bringing that data to the client.

Normally, accessing an ODBC data source by the client requires that the client have the appropriate ODBC driver installed. This scenario generally requires a substantial client setup process to access the data. However, any setup at all on the Web is virtually impossible given the fact that a client cannot be controlled on the Internet in the same manner that a typical client/server setup might be controlled by a developer. So without any guarantee that an ODBC driver is present on the client, how can a recordset from the server be made available to the client?

The answer is that RDS uses a proxy/stub system. Proxies and stubs are not new. In fact, proxy/stub pairs are at the core of all remote communication between distributed objects. In a proxy/stub pair, data is packed by the stub on the server side and sent to the proxy on the client side; once the client receives the data, it is unpacked and presented for display. This method of packing and unpacking data across a distance is called marshaling. Marshaling is used extensively not only by RDS but also by such technologies as the Component Object Model (COM), which is the heart of ActiveX technology.

RDS depends on a server-side component to pack the data. In fact, you must install the server-side portion of RDS in order to use client-side data binding. The proxy cannot work without the stub. Fortunately, installing the server-side portion of RDS is a minor task. You can find the setup for RDS on the CD-ROM that accompanies this books.

Once the server is set up, you can use the client-side portion of RDS known as the Advanced Data Control (ADC). The ADC is as simple to use as the Tabular Data Control. Listing 4-13 on the following page shows a complete example of binding data to a grid control in a Web page. When utilizing the ADC, you have to set only three properties to get a simple connection: Connect, Server, and SQL. The Connect property is the ODBC connection string for the data source. Server is generally the name of the Web server where the data source is located (and where the server-side portion of the ADC resides). SQL is simply the Structured Query Language statement to run. (Appendix D lists all the properties and methods for the ADC.)

Once the ADC is in a Web page, data binding is accomplished in the same fashion that it is with the Tabular Data Control. This means that you can use the DATASRC and DATAFLD attributes to bind to the same elements that are supported by the TDC. The sample code binds to a grid where all of the fields are displayed at once, so only the DATASRC attribute is set for the grid.

Listing 4-13. Using the Advanced Data Control.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Developer Studio"> <META HTTP-EQUIV="Content-Type" content="text/html;      charset=iso-8859-1"> <TITLE>Advanced Data Control</TITLE> </HEAD> <BODY> <FORM> <!-- NOTE: In this example, you must define an  ODBC data source named Biblio. See Chapter 2 for help.--> <!-- The Advanced Data Control --> <OBJECT ID="Data1" HEIGHT=10 WIDTH=10     CLASSID="CLSID:BD96C556-65A3-11D0-983A-00C04FC29E33">     <PARAM NAME="SQL" VALUE="SELECT * FROM Publishers">     <PARAM NAME="SERVER" VALUE="http://scot-winnt">     <PARAM NAME="CONNECT" VALUE="DSN=Biblio"> </OBJECT> <!-- A data-bound grid --> <OBJECT ID="MSFlexGrid1" WIDTH=548 HEIGHT=180 DATASRC="#Data1"     CLASSID="CLSID:6262D3A0-531B-11CF-91F6-C2863C385E30">     <PARAM NAME="_ExtentX" VALUE="14499">     <PARAM NAME="_ExtentY" VALUE="4763">     <PARAM NAME="_Version" VALUE="327680"> </OBJECT> </FORM> </BODY> </HTML>