表10-5 支持數據綁定的Html元素
Html元素
綁定屬性
可否更
新數據
可否表
格綁定
可否作為
Html顯示
A
href
不可
不可
不可
APPLET
PARAM
可以
不可
不可
BUTTON
innerText和innerHtml
不可
不可
可以
DIV
innerText和innerHtml
不可
不可
可以
FRAME
src
不可
不可
不可
IFRAME
src
不可
不可
不可
IMG
src
不可
不可
不可
INPUT
checked
可以
不可
不可
TYPE=CHECKOBX INPUT
value
可以
不可
不可
TYPE=HIDDEN INPUT
vale
可以
不可
不可
TYPE=LABEL INPUT
value
可以
不可
不可
TYPE=PASSWord INPUT
checked
可以
不可
不可
TYPE=RADIO INPUT
value
可以
不可
不可
TYPE=TEXT LABEL
innerText和innerHtml
不可
不可
可以
LEGEND
innerText和innerHtml
不可
不可
不可
MARQUEE
innerText和innerHtml
不可
不可
可以
OBJECT
param
可以
不可
不可
SELECT
選擇的<OPTION>元素文本
可以
不可
不可
SPAN
innerText和innerHtml
不可
不可
可以
TABLE
無
不可
可以
不可
TEXTAREA
value
可以
不可
不可
2． 單個記錄綁定
單個記錄綁定用於只顯示單行數據的情況。例如，考慮下面的代碼：
ID: <SPAN DATASRC="#dsoData" DATAFLD="au_id"></SPAN><BR>
First Name: <SPAN DATASRC="#dsoData" DATAFLD="au_fname"></SPAN><BR>
Last Name: <SPAN DATASRC="#dsoData" DATAFLD="au_lname"></SPAN><BR>
Phone: <SPAN DATASRC="#dsoData" DATAFLD="phone"></SPAN><BR>
Address: <SPAN DATASRC="#dsoData" DATAFLD="address"></SPAN><BR>
City: <SPAN DATASRC="#dsoData" DATAFLD="city"></SPAN><BR>
State: <SPAN DATASRC="#dsoData" DATAFLD="state"></SPAN><BR>
Zip: <SPAN DATASRC="#dsoData" DATAFLD="zip"></SPAN><BR>
Contact: <SPAN DATASRC="#dsoData" DATAFLD="contract"></SPAN><BR>
使用單個記錄綁定時，每一個綁定的Html元素都要確定數據源（DATASRC）和綁定的字段（DATAFLD）。
以上數據綁定的結果如圖10-5所示：
圖10-5 單個記錄綁定的結果
作為一個結果來說，這已經滿足要求了，但由於在Html文檔中忽略了空格，所以數據排列得不整齊。數據綁定使我們易於得到數據，但看上去不太美觀。一個好方法是使用表格來對齊數據。
<TABLE ID="tblData">
<TR><TD>ID:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_id"></SPAN></TD></TR>
<TR><TD>First Name:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_fname"></SPAN></TD></TR>
<TR><TD>Last Name:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="au_lname"></SPAN></TD></TR>
<TR><TD>Phone:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="phone"></SPAN></TD></TR>
<TR><TD>Address:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="address"></SPAN></TD></TR>
<TR><TD>City:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="city"></SPAN></TD></TR>
<TR><TD>State:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="state"></SPAN></TD></TR>
<TR><TD>Zip:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="zip"></SPAN></TD></TR>
<TR><TD>Contact:</TD>
<TD><SPAN DATASRC="#dsoData" DATAFLD="contract"></SPAN></TD></TR>
</TABLE>
這個Html文檔雖然不容易閱讀，但卻提供了一個較好的顯示結果，如圖10-6所示：
圖10-6 單個記錄綁定的表格顯示結果
注意，這個例子只顯示了使用SPAN元素來存放數據。如果想編輯數據，那麼可以使用INPUT元素來實現。例如：
<TABLE ID="tblData">
<TR><TD>ID:</TD>
<TD>
<INPUT TYPE="TEXT" DATASRC="#dsoData" DATAFLD="au_id"></INPUT>
</TD>
</TR>
...
</TABLE>
這裡使用了一個TEXT類型的INPUT元素。注意，數據綁定幾乎是相同的，僅僅是Html元素不同。結果如圖10-7所示：
圖10-7 單個記錄綁定的編輯界面
數據導航
除非能得到其他記錄，否則只顯示單條記錄並不理想。幸運的是數據控件有一個Recordset屬性，它是實際的含有數據的ADO記錄集。回顧第8章，應該記得記錄集有移動記錄的方法：
· MoveFirst。
· MoveNext。
· MovePRevious。
· MoveLast。
舉一個例子，假定想在Html頁面中增加一些按鈕以獲得記錄導航的能力，如圖10-8所示：
圖10-8 導航按鈕
可以用如下代碼創建按鈕：
<button id="cmdFirst" title="First Record"
onclick="dsoData.recordset.MoveFirst()"> |< </button>
<button id="cmdPrevious" title="Previous Record"
onclick="if (!dsoData.recordset.BOF) dsoData.recordset.MovePrevious()">
< </button>
<button id="cmdNext" title="Next Record"
onclick="if (!dsoData.recordset.EOF) dsoData.recordset.MoveNext()">
> </button>
<button id="cmdLast" title="Last Record"
onclick="dsoData.recordset.MoveLast()"> >| </button>
這些代碼僅僅利用了記錄集中移動記錄的方法。移到第一條和最後一條記錄實現想來相當容易。只需記住數據控件有一個Recordset屬性，由於該屬性是一個對象，所以有其自己的方法。因此，代碼可以寫為：
dsoData.recordset.MoveFirst()
以上代碼只是簡單地調用數據控件管理的記錄集的MoveFirst方法。
移到上一條和下一條記錄的代碼看上去有一點技巧，但也很簡單。
if (!dsoData.recordset.BOF)
dsoData.recordset.MovePrevious()
以上是向後移動記錄的方法，只需在執行MovePrevious方法之前，判斷一下記錄集的BOF屬性，以確定當前記錄不在記錄集的開始位置。
3． 表格綁定
表格綁定不同於單個記錄綁定，因為不只是為對齊數據而使用表格。在表格綁定中把數據綁定到了TABLE元素，能夠一次看到多條記錄，如圖10-9所示：
圖10-9 表格綁定的界面
這甚至比單個記錄綁定更容易，實現表格綁定需要使用表格的DATASRC屬性，然後使用DATAFLD屬性綁定表格元素。這樣就將表格與數據控件綁定起來，每一個表格單元綁定到單獨的字段。
然而，看一下能夠被綁定的Html元素的列表，會發現表格單元元素（TD）並不在其中。因為這個原因，一般為只讀的表格使用SPAN或DIV標記，而對於可編輯的表格則使用INPUT標記。例如，圖10-9中的表格是用下列代碼創建的：
<TABLE ID="tblData" DATASRC="#dsoData">
<THEAD>
<TR>
<TD>au_id</TD>
<TD>au_fname</TD>
<TD>au_lname</TD>
<TD>phone</TD>
<TD>address</TD>
<TD>city</TD>
<TD>state</TD>
<TD>zip</TD>
<TD>contract</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><INPUT TYPE="TEXT" DATAFLD="au_id"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="au_fname"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="au_lname"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="phone"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="address"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="city"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="state"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="zip"></INPUT></TD>
<TD><INPUT TYPE="TEXT" DATAFLD="contract"></INPUT></TD>
</TR>
</TBODY>
</TABLE>
TABLE元素還有另外一個用於數據綁定的屬性：DATAPAGESIZE，決定了在表格中可以顯示的記錄數。
<TABLE ID="tblData" DATASRC="#dsoData" DATAPAGESIZE="10">
在上面的例子中，表格一次只能含有10條記錄。記錄集的移動方法在這裡不起作用，因為表格限制了可見的記錄，所以必須使用表格的兩個方法，如下所示：
<button id="cmdPreviousPage" title="Previous Page"
onclick="tblData.PreviousPage()">Previous Page</button>
<button id="cmdNextPage" title="Next Page"
onclick="tblData.NextPage()">Next Page</button>
4． 動態綁定
到目前為止，所有的例子都只顯示了一個固定的記錄集，綁定的字段在設計期間已經創建。但看起來大量的代碼不能重用，特別是在Web應用程序正給用戶帶來越來越強的功能的情況下，這種方式缺乏開發程序的靈活性。
解決這個難題的方法是根據數據控件中的數據動態創建表中的字段。實際上這也比較容易，依賴於客戶端的腳本程序。那麼，假定讓用戶在表authors和publishers中進行選擇，如圖10-10所示：
圖10-10 使用RDS動態數據綁定的界面
現在我們並不真想綁定兩個表的所有字段，因為這會變得難以維護。如果源數據的結構改變了，或者想增加另一個表，情況將會怎樣？處理這種情況的方法就是創建一個虛表，在運行期間動態地創建和綁定字段。
首先，創建數據控件。
<OBJECT CLASSID="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
ID="dsoData" HEIGHT="0" WIDTH="0"
ondatasetcomplete="createCells()">
</OBJECT>
這是RDS數據控件，與前面例子唯一不同的是這裡沒有設置參數，代碼中也是如此。唯一增加的是設置了一個在數據控件讀完數據後運行的函數。
接下來，需要創建兩個按鈕來確定數據。
<BUTTON ID="cmdAuthors"
onclick="resetData('authors')">authors</BUTTON>
<BUTTON ID="cmdPublishers"
onclick="resetData('publishers')">publishers</BUTTON>
下面創建虛表。
<TABLE ID="tblData" border=1>
<THEAD><TR></TR></THEAD>
<TBODY><TR></TR></TBODY>
</TABLE>
這充當了模板的作用。注意，表格中還沒有單元格。這是因為並不知道數據有多少個字段，所以也將在運行期間創建它們。
現在編寫JScript代碼。首先看一下resetData函數，該函數設置數據控件的屬性並加載數據。
function resetData(sTable)
{
// reset the data
dsoData.Connect = 'Provider=SQLOLEDB; Data Source=' +
'<%= Request.ServerVariables("SERVER_NAME") %>' +
'; Initial Catalog=pubs; User ID=sa; PassWord=';
dsoData.Server = 'http://<%= Request.ServerVariables("SERVER_NAME") %>';
dsoData.SQL = 'SELECT * FROM ' + sTable;
dsoData.Refresh();
}
雖然這看起來比使用參數更復雜一些，但是仍然比較簡單。別忘了參數名是如何映射到屬性的？這裡所做的就是設置那些屬性，然後調用Refresh方法更新數據控件。看上去，這可能比以前的例子更糟糕，因為在代碼中只有不多的ASP，也只是簡單地在屬性中填入Web服務器的名字。但使用該方法可以在不修改代碼的情況下將此ASP頁面從一個服務器移到另一個服務器。作為數據源的表名可以通過選擇適當的按鈕而傳給函數。
一旦加載了數據，將觸發數據控件的ondatasetcomplete事件，運行createCells函數。
function createCells()
{
var fldF;
var tblCell;
// delete what's there already
deleteCells();
// now create the new cells
for (fldF = new Enumerator(dsoData.recordset.FIElds);
!fldF.atEnd(); fldF.moveNext())
{
// create a new cell for the heading
tblCell = tblData.rows[0].insertCell();
tblCell.innerHtml = '<B>' + fldF.item().name + '</B>';
// create a new cell for the body
tblCell = tblData.rows[1].insertCell();
tblCell.innerHtml = '<INPUT TYPE="TEXT" DATAFLD="' +
fldF.item().name + '"></INPUT>';
}
// now bind to the data source
tblData.dataSrc = '#dsoData';
}
這同樣也很簡單。首先刪除了現有的表格單元格（馬上會介紹這個函數），然後遍歷記錄集的字段。在行頭為每個字段創建一個新單元格（這個表格只有兩行：第一行，即第0行，是表頭；第二行，即第1行，是表體）。表格單元創建完後，將innerHTML屬性設為對應的字段名。在表體中創建新單元格的過程類似，但此時使用innerHtml元件保存綁定到數據字段的INPUT標記。當所有的字段都完成這樣的操作後，這個表就與數據控件綁定了。
因為這個頁面允許在兩個不同的數據集之間進行切換，所以需要先刪除現有的數據。
function deleteCells()
{
var iCell;
var iCells;
// unbind the table
tblData.dataSrc = '';
// delete existing cells
iCells = tblData.rows[0].cells.length
for (iCell = 0; iCell < iCells; ++iCell)
{
tblData.rows[0].deleteCell();
tblData.rows[1].deleteCell();
}
}
這個子程序只是對表解除綁定，然後在表格中遍歷所有的單元格並刪除它們。等到上述程序執行完畢，表格就只剩下空的表頭和表體行。
這是一個用RDS和一些DHtml實現的簡單例子。可以容易地把其加到一個ASP包含文件中，並把該文件放到任何應用程序中，即使數據源不改變也可使用這種方法。
這個例子的全部代碼——文件RDSDynamicBinding.ASP以及類似的其他類型的數據控件例子，可以在Wrox站點上找到。
10.2.6 更新數據
迄今為止，僅學習了在客戶端如何取到數據，但還沒有涉及如何更新客戶端數據，和將其送回服務器。別忘了，記錄集是斷開連接的，那麼如何更新數據呢？對數據所做的任何修改只是數據控件中本地記錄的一部分，因此為了更新服務器必須發一條特殊的指令。然而這並不需做什麼復雜的工作，因為RDS數據控件有兩個方法，允許我們要麼取消最近對數據所做的任何修改，要麼將所有修改送到服務器。
為了方便用戶，可以為此創建一些按鈕。
<BUTTON ID="cmdCancelAll" TITLE="Abandon All Chnages"
ONCLICK="dsoData.CnacelUpdate()">Cnacel</BUTTON>
<BUTTON ID="cmdUpdateAll" TITLE="Save All Changes"
ONCLICK="dsoData.SubmitChanges()">Save</BUTTON>
SubmitChanges方法只將那些改動過的記錄送回服務器，而CancelUpdate方法則取消在本地記錄集上所做的任何修改。
更新和取消更新操作並不是唯一所需的。如果想增加新的記錄或刪除一條現有的記錄，怎麼辦？可以使用記錄集的AddNew和Delete方法。這將增加或刪除記錄集中的記錄，然後在發送SubmitChanges命令後，服務器上的數據就可以被更新。
<BUTTON ID="cmdDelete" TITLE="Delete This Record"
ONCLICK="dsoData.recordset.Delete()">Delete</BUTTON>
<BUTTON ID="cmdAddNew" TITLE="Add New Record"
ONCLICK="dsoData.recordset.AddNew()">Add</BUTTON>
