ASP 3.0高級編程（四十六）

2019-11-18 20:58:58

字體：大中小

供稿：網(wǎng)友

表10-5  支持數(shù)據(jù)綁定的HTML元素
HTML元素
綁定屬性
可否更
新數(shù)據(jù)
可否表
格綁定
可否作為
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．  單個記錄綁定
單個記錄綁定用于只顯示單行數(shù)據(jù)的情況。例如，考慮下面的代碼：
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元素都要確定數(shù)據(jù)源（DATASRC）和綁定的字段（DATAFLD）。
以上數(shù)據(jù)綁定的結果如圖10-5所示：

圖10-5  單個記錄綁定的結果
作為一個結果來說，這已經(jīng)滿足要求了，但由于在HTML文檔中忽略了空格，所以數(shù)據(jù)排列得不整齊。數(shù)據(jù)綁定使我們易于得到數(shù)據(jù)，但看上去不太美觀。一個好方法是使用表格來對齊數(shù)據(jù)。
<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元素來存放數(shù)據(jù)。如果想編輯數(shù)據(jù)，那么可以使用INPUT元素來實現(xiàn)。例如：
<TABLE ID="tblData">
  <TR><TD>ID:</TD>
<TD>
<INPUT TYPE="TEXT" DATASRC="#dsoData" DATAFLD="au_id"></INPUT>
</TD>
</TR>
...
       </TABLE>
這里使用了一個TEXT類型的INPUT元素。注意，數(shù)據(jù)綁定幾乎是相同的，僅僅是HTML元素不同。結果如圖10-7所示：

圖10-7  單個記錄綁定的編輯界面
數(shù)據(jù)導航
除非能得到其他記錄，否則只顯示單條記錄并不理想。幸運的是數(shù)據(jù)控件有一個Recordset屬性，它是實際的含有數(shù)據(jù)的ADO記錄集。回顧第8章，應該記得記錄集有移動記錄的方法：
· MoveFirst。
· MoveNext。
· MovePRevious。
· MoveLast。
舉一個例子，假定想在HTML頁面中增加一些按鈕以獲得記錄導航的能力，如圖10-8所示：

圖10-8  導航按鈕
可以用如下代碼創(chuàng)建按鈕：
<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> 
這些代碼僅僅利用了記錄集中移動記錄的方法。移到第一條和最后一條記錄實現(xiàn)想來相當容易。只需記住數(shù)據(jù)控件有一個Recordset屬性，由于該屬性是一個對象，所以有其自己的方法。因此，代碼可以寫為：
dsoData.recordset.MoveFirst()
以上代碼只是簡單地調(diào)用數(shù)據(jù)控件管理的記錄集的MoveFirst方法。
移到上一條和下一條記錄的代碼看上去有一點技巧，但也很簡單。
if (!dsoData.recordset.BOF)
dsoData.recordset.MovePrevious()
以上是向后移動記錄的方法，只需在執(zhí)行MovePrevious方法之前，判斷一下記錄集的BOF屬性，以確定當前記錄不在記錄集的開始位置。
3．  表格綁定
表格綁定不同于單個記錄綁定，因為不只是為對齊數(shù)據(jù)而使用表格。在表格綁定中把數(shù)據(jù)綁定到了TABLE元素，能夠一次看到多條記錄，如圖10-9所示：

圖10-9  表格綁定的界面
這甚至比單個記錄綁定更容易，實現(xiàn)表格綁定需要使用表格的DATASRC屬性，然后使用DATAFLD屬性綁定表格元素。這樣就將表格與數(shù)據(jù)控件綁定起來，每一個表格單元綁定到單獨的字段。
然而，看一下能夠被綁定的HTML元素的列表，會發(fā)現(xiàn)表格單元元素（TD）并不在其中。因為這個原因，一般為只讀的表格使用SPAN或DIV標記，而對于可編輯的表格則使用INPUT標記。例如，圖10-9中的表格是用下列代碼創(chuàng)建的：
<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元素還有另外一個用于數(shù)據(jù)綁定的屬性：DATAPAGESIZE，決定了在表格中可以顯示的記錄數(shù)。
<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．  動態(tài)綁定
到目前為止，所有的例子都只顯示了一個固定的記錄集，綁定的字段在設計期間已經(jīng)創(chuàng)建。但看起來大量的代碼不能重用，特別是在Web應用程序正給用戶帶來越來越強的功能的情況下，這種方式缺乏開發(fā)程序的靈活性。
解決這個難題的方法是根據(jù)數(shù)據(jù)控件中的數(shù)據(jù)動態(tài)創(chuàng)建表中的字段。實際上這也比較容易，依賴于客戶端的腳本程序。那么，假定讓用戶在表authors和publishers中進行選擇，如圖10-10所示：

圖10-10  使用RDS動態(tài)數(shù)據(jù)綁定的界面
現(xiàn)在我們并不真想綁定兩個表的所有字段，因為這會變得難以維護。如果源數(shù)據(jù)的結構改變了，或者想增加另一個表，情況將會怎樣？處理這種情況的方法就是創(chuàng)建一個虛表，在運行期間動態(tài)地創(chuàng)建和綁定字段。
首先，創(chuàng)建數(shù)據(jù)控件。
<OBJECT CLASSID="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
        ID="dsoData" HEIGHT="0" WIDTH="0"
        ondatasetcomplete="createCells()">
</OBJECT>
這是RDS數(shù)據(jù)控件，與前面例子唯一不同的是這里沒有設置參數(shù)，代碼中也是如此。唯一增加的是設置了一個在數(shù)據(jù)控件讀完數(shù)據(jù)后運行的函數(shù)。
接下來，需要創(chuàng)建兩個按鈕來確定數(shù)據(jù)。
<BUTTON ID="cmdAuthors"
onclick="resetData('authors')">authors</BUTTON>
<BUTTON ID="cmdPublishers"
onclick="resetData('publishers')">publishers</BUTTON>
下面創(chuàng)建虛表。
<TABLE ID="tblData" border=1>
  <THEAD><TR></TR></THEAD>
  <TBODY><TR></TR></TBODY>
</TABLE>
這充當了模板的作用。注意，表格中還沒有單元格。這是因為并不知道數(shù)據(jù)有多少個字段，所以也將在運行期間創(chuàng)建它們。
現(xiàn)在編寫JScript代碼。首先看一下resetData函數(shù)，該函數(shù)設置數(shù)據(jù)控件的屬性并加載數(shù)據(jù)。
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();
}

雖然這看起來比使用參數(shù)更復雜一些，但是仍然比較簡單。別忘了參數(shù)名是如何映射到屬性的？這里所做的就是設置那些屬性，然后調(diào)用Refresh方法更新數(shù)據(jù)控件。看上去，這可能比以前的例子更糟糕，因為在代碼中只有不多的asp，也只是簡單地在屬性中填入Web服務器的名字。但使用該方法可以在不修改代碼的情況下將此ASP頁面從一個服務器移到另一個服務器。作為數(shù)據(jù)源的表名可以通過選擇適當?shù)陌粹o而傳給函數(shù)。
一旦加載了數(shù)據(jù)，將觸發(fā)數(shù)據(jù)控件的ondatasetcomplete事件，運行createCells函數(shù)。
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';
}
這同樣也很簡單。首先刪除了現(xiàn)有的表格單元格（馬上會介紹這個函數(shù)），然后遍歷記錄集的字段。在行頭為每個字段創(chuàng)建一個新單元格（這個表格只有兩行：第一行，即第0行，是表頭；第二行，即第1行，是表體）。表格單元創(chuàng)建完后，將innerHTML屬性設為對應的字段名。在表體中創(chuàng)建新單元格的過程類似，但此時使用innerHTML元件保存綁定到數(shù)據(jù)字段的INPUT標記。當所有的字段都完成這樣的操作后，這個表就與數(shù)據(jù)控件綁定了。
因為這個頁面允許在兩個不同的數(shù)據(jù)集之間進行切換，所以需要先刪除現(xiàn)有的數(shù)據(jù)。
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();
    }
}
這個子程序只是對表解除綁定，然后在表格中遍歷所有的單元格并刪除它們。等到上述程序執(zhí)行完畢，表格就只剩下空的表頭和表體行。
這是一個用RDS和一些DHTML實現(xiàn)的簡單例子。可以容易地把其加到一個ASP包含文件中，并把該文件放到任何應用程序中，即使數(shù)據(jù)源不改變也可使用這種方法。
這個例子的全部代碼——文件RDSDynamicBinding.asp以及類似的其他類型的數(shù)據(jù)控件例子，可以在Wrox站點上找到。

10.2.6 更新數(shù)據(jù)
迄今為止，僅學習了在客戶端如何取到數(shù)據(jù)，但還沒有涉及如何更新客戶端數(shù)據(jù)，和將其送回服務器。別忘了，記錄集是斷開連接的，那么如何更新數(shù)據(jù)呢？對數(shù)據(jù)所做的任何修改只是數(shù)據(jù)控件中本地記錄的一部分，因此為了更新服務器必須發(fā)一條特殊的指令。然而這并不需做什么復雜的工作，因為RDS數(shù)據(jù)控件有兩個方法，允許我們要么取消最近對數(shù)據(jù)所做的任何修改，要么將所有修改送到服務器。
為了方便用戶，可以為此創(chuàng)建一些按鈕。
<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方法則取消在本地記錄集上所做的任何修改。
更新和取消更新操作并不是唯一所需的。如果想增加新的記錄或刪除一條現(xiàn)有的記錄，怎么辦？可以使用記錄集的AddNew和Delete方法。這將增加或刪除記錄集中的記錄，然后在發(fā)送SubmitChanges命令后，服務器上的數(shù)據(jù)就可以被更新。
<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> 

上一篇：XML加ASP實現(xiàn)網(wǎng)頁“本地化”

下一篇：ASP 3.0高級編程（四十五）