我們在前面基礎設計中，曾經說明到WebValidate元件，不管其ValidateStyle為ShowLable還是ShowDialog等方式，都是必須要在編輯按下OK時才會檢查其欄位的檢核條件，因此，如果要能夠在網頁上立即去檢查該欄位的條件，就必須改用WebValidateBox這個元件來實現，此元件也是使用CallBack的技術，在TextBox離開時去呼叫Server端，並同樣配合WebValidate元件來檢核資料，讓前端與後端的檢驗規則可以一致並共用。之前我們說過的WebCheckBox與WebGridTextBox都是只能配合WebGridView元件，但WebValidateBox則是可以搭配其他的WebDetailsView與WebFormView等元件一起使用。設計的實例說明如下：

Step1＞打開W003（之前的產品管理的WebGridView頁面），我們點選WebValidate元件，右鍵屬性「Fields」，打開此Fields內的設定，之前我們已將ProductID設了MyCheck()與SupplierID設為不能為空的檢驗規則。

圖5-6-1 打開Fields對話窗

Step2＞在WebGridView右上角的快捷鈕，執行「Edit Columns」，為了讓「ProductID」與「SupplierID」能配合WebValidateBox即時檢核，我們必須將此兩個欄位轉換成TemplateField。

圖5-6-2 轉換成TemplateField

Step3＞在WebGridView右鍵「Edit Template」，選擇ProductID與SupplierID，分別進入此兩個TemplateField中，我們也分別將其原本在 EditTemplate內的TextBox刪除，改貼WebVAlidateBox元件，並分別將此元件綁定到「ProductID」與「SupplierID」欄位上。

圖5-6-4 Edit Template

圖5-6-5 改貼WebVAlidateBox元件

圖5-6-5 綁定ProductID、SupplierID欄位

WebValidateBox因為要與後端的WebValidate配合，所以必須設定其WebValidateID屬性對應到那一個WebValidate上，『ValidateField』屬性則要設定對應到此WebValidate上的那一個Validate的欄位，以達到在CallBack時要以何種條件去檢核。

Step4＞在此，我們將ProductID的WebValidateBox對應到wvMaster的【ProductID】欄位上，SupplierID則對應到wvMaster的【SupplierID】中。

圖5-6-6 對應WebValidate

Step5＞為了能讓WebGridView在新增時也同樣可以使用WebValidateBox來做即時檢核，因此我們將設定好的WebValidateBox以“Ctrl-C”與“Ctrl-V”方式將EditTemplate Copy到FooterTemplate區域中，別忘了ProductID與SupplierID兩個TemplateField都要做。

圖5-6-7 Copy到FooterTemplate區域

因為WebGridView的FooterTemplate並無法與WebDataSource的欄位進行綁定的動作，所以我們必須在WebGridView. AddNewRowControls中來補充，定義其在FooterTemplate中有那些特殊欄位。

Step6＞我們可以利用WebGridView右鍵的「Copy AddNew Controls」功能，自動將所有FooterTemplate的欄位Copy到AddNewRowControls設定中，如圖，為Copy Add New Control後的結果。

圖5-6-8 Copy到AddNewRowControls

Step7＞對W003進行右鍵「Build Page」功能，並以InfoLogin.aspx右鍵的「View in Browser」來執行結果。

如下，你可以嘗試對WebGridView中的資料進行新增或更改資料，當你離開ProductID或SupplierID時，系統就會以CallBack方式到Server端的WebValidate來檢核該欄位，另外，你必須注意此即時檢核功能，是在該欄位有異動且離開時去檢查，如果沒有異動是不會去檢核的，以減輕系統的負荷，但當User按OK存檔時，後端的WebValidate同樣也會再檢驗一次，以達到嚴密的目的。

圖5-6-9 欄位檢核