Data Binding in HTML _ CSS/HTML

Data Binding information in HTML source: Wayne_Deng Column

Have you ever thought about using recordset in java script? It was easy to operate data on the client, define a data source, and bind the data to various tags to achieve the effect of the application! (First of all, I declare that all the content in this article comes from msdn, but I will summarize it in my own words .)

Let's take a look at two examples:
Http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
Http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
I have to admire Microsoft again.

This is the architecture of DataBinding:

Of course, there are several steps to bind data:

Step 1: define the data source
Since IE4.0, the following four data sources are supported:



Tabular Data Control (TDC)
TDC provides a simple method to access formatted text data, usually csv files.
The following is a simple example:


ID = dsoComposer WIDTH = 0 HEIGHT = 0>




Remote Data Service (RDS)
Remote Data Services, direct access to data on remote servers, Internet Explorer 4.0. RDS is implemented through OLE-DB or Open Database Connectivity (ODBC.

Example:


ID = dsoComposer HEIGHT = 0 WIDTH = 0>




However, it seems a bit secure because the client can see this code.

XML Data Source
XML is not much said. It is used in IE4.0 as follows:
CODE = "com. ms. xml. dso. XMLDSO. class"
ID = "xmldso"
WIDTH = "0"
HEIGHT = "0"
MAYSCRIPT = "true">



Internet Explorer 5 or above can be like this:



In addition, IE also provides an XML Data island concept: XML Data Islands.


MSHTML Data Source
Sample html data page:
Hector
Berlioz
1803
Modest
Moussorgsky
1839
Franz
Liszt
1811

Once defined, access is as follows:



Step 2: bind data to HTML elements
It is usually bound through datasrc and dataworks In the tag. For example:

And





This is an example of binding a table:
Http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm

Data source:





Bound table

First	Last	Birth	Death	Origin

This is the result:
First Last Birth Death Origin
Hector Berlioz 1803 1869 France
Modest Moussorgsky 1839 1881 Russia
Franz Liszt 1811 1886 France
Antonio Vivaldi 1678 1741 Italy
Johann Sebastian Bach 1685 1750 Germany
Ludwig van Beethoven 1770 1827 Germany
Wolfgang Amadeus sans art 1756 1791 Austria
Joseph Haydn 1732 1809 Germany
Krade Debussy 1862 1918 France


Step 3: dynamically add and delete data (Object Model)
Of course, the binding can be dynamic:
In script:
Span1.dataSrc = "# dsoComposer ";
Span1.data== "compsr_first ";

Html is like this:

You can also access the data source's ado:
Var oRecordSet = dsoComposer. recordset;
Naturally, there are oRecordSet. MoveNext and so on.

For example:

Onclick = "tdcComposers. recordset. MoveFirst ()">

Onclick = "tdcComposers. recordset. MovePrevious ();
If (tdcComposers. recordset. BOF)
TdcComposers. recordset. MoveFirst (); ">

Onclick = "tdcComposers. recordset. MoveNext ();
If (tdcComposers. recordset. EOF)
TdcComposers. recordset. MoveLast (); ">

Onclick = "tdcComposers. recordset. MoveLast ()">

It can also be used as follows: