第3章EEP2015WEB表單基礎設計(中)第3章EEP2015WEB表單基礎設計(中)\3-3使用WebRefVal

3-3使用WebRefVal

 

Web網頁中,也經常要使用到關連選單的方式去選別的Table的代碼,這種關連選單,我們是以WebRefVal元件來實現。在WebGirdViewWebDetailsView去使用WebRefVal時,如果欄位要配合WebRefVal者,就必須將該欄位轉化為TemplateField才能使用;但如果是在WebFormView中,因為其所有的欄位本身就都是TemplateField,所以不需要特別設定。主要的差別是前者以欄位為單位去轉成TemplateField,每個Template都可以控制顯示時/新增時/更改時所使用的元件;後者是以顯示/新增/更改的頁面為單位,個別去定義每個欄位所要使用的元件與控制,情況有點差異。

 

 

q  WebFormView中使用WebRefVal

 

Step1首先,在W005中增加一個WebDataSource,命名為Suppliers,作為WebRefVal的資料源列出所有的廠商資料。將其屬性設置如圖所示。

 

這裏的WebDataSource不是連結到WebDataSet,而是直接使用了Select的命令方式來取得選單資料,這種設計方式可以不必貼入WebDataSet以及Server端的InfoCommand的元件,簡化設計步驟與流程,適用於小量資料(數千筆以內的資料表,因為沒有PackedRecord功能)。如圖我們將SelectAlias設為ERPSSelectCommandSelect * From Suppliers

3-3-1 WebRefVal的資料源

Step2右鍵按一下wfvMaster,選擇Edit Template,並點選EditItemTemplate,代表要來設定更改時所要呈現的元件。這裏要對SupplierID欄位作關聯選單,所以我們將原有的TextBox刪除,增加一個WebRefVal,命名為wrvSupplier

3-3-2 增加一個WebRefVal元件

 

Step3選中WebRefVal時,右上角有個小三角,會出現設置快捷鈕。先選擇Edit DataBindings。將要用此功能來設定WebRefVal與主檔的WebDataSource中資料欄位的連結。

3-3-3 設定欄位的連結

Step4在下面的畫面中,選擇Field binding/ Bound to的選項。如果是灰色不可選時,可以按一下左下角的“Refresh Schema讓此資料表的Table資料結構能呈現

Step5最後在Bound To下拉選擇SupplierID,按一下OK。即代表Binding已經成功。如果按下Refresh Schema還是無法選擇時,這是因為這個WebDataSource所對應的WebDataSet沒有Active或是在Component DesignnerWebDataSet沒有用Save功能儲存起來,就會有這個現象

3-3-4 設定Binding

 

Step6點選WebRefVal,設定其屬性如下圖。

Œ  DataBindField屬性是必須要在上一個步驟中有選到Bound to時,才能在這重新選擇,在此我們選SupplierID

 

  DataSourceID就是代表資料的來源,當然選擇剛剛增加的Suppliers這個WebDataSource

 

Ž  DataTextField設為CompanyName代表顯示是以廠商名稱來顯示。

 

  DataValueField則代表其關連內所存放的內容值,我們設為SupplierID

3-3-5 設置WebRefVal元件屬性

 

Step7wfvMaster的右上角,下拉選擇Insert Item Template,用來設定新增時的各個元件情況,WebRefVal也須另外在InsertItemTemplate這個Template中來設計。(設置方式與上述Edit Item Template的步驟完全相同。也可以將剛剛Edit Item Template所設定的wrvSupplier元件以Copy/Paste方式Paste到此來)。

3-3-6 Insert Item Template

 

Step8最後點選將此wrvSupplier元件,再以Edit DataBindings…功能來設定將此元件BindingMaster中的SupplierID欄位。

3-3-7 Binding SupplierID欄位

 

Step9選中wfvMaster,按一下右鍵(或者直接按一下wfvMaster右上角的小三角),選擇End Template Editing,結束Template編輯。

 

3-3-8 結束Template編輯

Step10右鍵InfoLogin.aspx執行View in Browser,重新打開此W005。我們在WebNavigator上按下「新增」或「更改」的功能時,可以看見如下圖中的WebRefVal出現,並可以選擇資料傳回到SupplierID欄位中。

3-3-9 執行W005

r  WebDetailsView中使用WebRefVal

 

WebDetailsView中的設定與WebFormView中有所不同。說明如下:

Sept1打開前一章所設計的W004。首先,在W004中增加一個WebDataSource,命名為Customers,作為WebRefVal的資料源。將其屬性設置如圖所示。

 


3-3-10 新增WebDataSource元件

WebFormView設計方式不一樣,WebFormView已經將Insert/Edit/Item三種Template分開,WebDetailsView則是以欄位為單位去設定TemplateField;所以在WebDetailsView中要使用WebRefVal元件時,須事先將WebRefVal的欄位轉化為TemplateField

 

Step2點選wdvMasterFields屬性,這裏因為要以CustomerID欄位使用WebRefVal,所以點選CustomerID,並按一下畫面的右下角的Convert this field into a TemplateField將此欄位轉換成Template欄位。按一下OK

 

3-3-11 轉化為TemplateField

 

Step3右鍵按一下wdvMaster,選擇 Edit Template。點選Field[1]CustomerID打開Template的編輯模式。要事先有TemplateField才能選

 

此模式會顯示此單一欄位在ItemTemplate 顯示時/EditItemTemplate編輯時/ InsertItemTemplate新增時所要配合的元件,在此我們要改用WebRefVal,所以將EditItemTemplateInsertItemTemplateTextBox刪除,並分別貼上一個WebRefVal,命名為wrvCusotmerInsetItemTemplate內的WebRefVal則等wrvCustomer設定完後再Copy即可。

 

3-3-12 Template的編輯模式

 

Step4WebRefVal的設置方法與上一節是相同的。按一下WebRefVal右上角有個小三角,會出現設置快捷鈕。先選擇Edit DataBindings…

3-3-13 Edit DataBindings

 

Step5在顯示的設定畫面中,選擇Field bindingBound to,然後下拉選擇CustomerID,並勾選Two-way dataBinding,讓此元件與WebDataSource欄位使用相向的連結關係,最後按一下OK


3-3-14 WebDataSource欄位連結

 

小貼示:

如果是灰色不可選的,請按一下左下角的Refresh Schema來重新取得Table的結構。

Step6選中wrvCusotmer,設置其屬性如圖。

Œ  DataBindingField請選擇CustomerID,這個步驟是為了配合上面的 

 DataBinding動作;

  DataSourceID則設定為Customers,就是指關連選單的資料的來源;

Ž  DataTexTField設定為CompanyName,代表顯示其公司名稱;

  DataValueField設為CustomerID,則代表該欄位為其選單的內容值。


3-3-15 設定wrvCusotmer屬性

 

Step7點選wrvCustomers,按下Ctrl-C鍵將其Copy,並在InsertItemTemplate中按下Ctrl-V”,貼上此WebRefVal元件。

 

由於在新增與編輯時的WebRefVal都是一樣的,因此Copy過來後可以不用設定其他的屬性,因為InsertItemTemplateEditItemTemplate不會同時存在一個網頁上,所以兩個TemplateWebRefVal名稱可以一樣,但如果是多個WebRefVal在同一個Template時,其WebRefVal的名稱就不能重複,因此相互Copy後就得更改其名稱。

3-3-16 貼上WebRefVal元件

 

Step8選中wdvMaster原來的WebDetailsView,按一下右鍵,選擇End Template Editing結束此欄位的Template設定。

3-3-17 結束Template設定

 

Step9右鍵InfoLogin.aspx執行View in Browser,重新打開此W004網頁。我們在WebNavigator上按下「新增」或「更改」的功能時,可以看見如下圖中的WebRefVal出現,並可以選擇資料傳回到CustomerID欄位中。

 

3-3-18 執行W004網頁

 

 

 

q  WebGridView的使用WebRefVal

 

WebGridView使用WebRefVal方式與WebDetailsView的方式非常類同,說明如下。

 

Step1打開前面所設計的W005,在W005中增加一個WebDataSource,命名為Products作為WebRefVal的資料源。將其屬性設置如圖所示。

 


3-3-19 新增WebDataSource元件

 

WebGridView上使用WebRefVal的元件與WebDetailsView一樣須要將此欄位轉成為TemplateField,才能夠貼上WebRefVal

 

Step2按一下wgvDetail右上角的快捷鈕中的Columns定義功能,這裏要對ProductID欄位作關連選單,所以點選ProductID,並按一下畫面的右下角的Convert this field into a TemplateField,將此欄位轉換成TemplateField。按一下OK

3-3-20 轉成TemplateField

 

Step3右鍵按一下wgvDetail,選擇Edit Template。選中Column[2]ProductID」(要事先有TemplateField才能選。將原有EditItemTemplate內的TextBox刪除,並在EditIemTemplate增加一個WebRefVal,命名為wrvProduct

3-3-21 增加WebRefVal元件

 

Step4WebRefVal的設置方法與上相同。按一下WebRefVal右上角有個小三角快捷鈕。選擇Edit DataBindings…


3-3-22 Edit DataBindings

 

Step5在顯示的畫面中,選擇Field binding內的Bound to,然後下拉選擇ProductID,勾選Two-way databinding,按一下OK

 

小貼示:

如果是灰色不可選的,請按一下左下角的Refresh Schema

 


3-3-23 Binding ProductID欄位

Step6選中wrvProduct,設置其屬性如圖。

Œ  DataBindingField請選擇ProductID,這個步驟是為了配合上面的 

 DataBinding動作;

  DataSourceID則設定為Products,就是指關連選單的資料的來源;

Ž  DataTexTField設定為ProductName,代表顯示其產品名稱;

  DataValueField設為ProductID,則代表該欄位為其選單的內容值。

 

3-3-24 設置wrvProduct各屬性

 

Step7點選wrvProduct,按下Ctrl-C鍵將其Copy,並在FooterTemplate中按下Ctrl-V”,貼上此WebRefVal元件。

 

注意

WebGridView並沒有InsertItemTemplate可以使用,因此必須以FooterTemplate來取代新增Template。由於在新增(FooterTemplate)與編輯時的WebRefVal都是一樣的,因此Copy過來後可以不用設定其他的屬性,也因為FooterTemplateEditItemTemplate不會同時存在一個網頁上,所以兩個TemplateWebRefVal名稱可以一樣,但如果是多個WebRefVal在同一個Template時,其WebRefVal的名稱就不能重複,因此相互Copy後就得更改其名稱。

3-3-25 貼上WebRefVal元件

 

Step8Copy過來後,你會發現FooterTemplate並沒有資料連結的功能,因為FooterTEmplate並不是用來設計新增的Row資料,所以DataBindingField屬性可以不用設定。

 

3-3-26 DataBindingField屬性

Step9選中wdvDetail,按一下右鍵,選擇End Template Editing


3-3-27 結束Template Editing

 

如前面說的,要特別注意因為WebGridView本身沒有InsertItemTemplate,所以我們將其設定FooterTemplate中,因為此設定方式無法做DataBinding的動作,就必須在其他地方設定好讓WebGridView知道Insert時與這些特殊輸入的元件要與那個欄位進行Data Binding

Step10因此必需按一下wgvDetailAddNewRowControls屬性,增加一個Column,將WebRefVal設定上去,如圖所示。注意:在此ControlType要設為RefVal

另外,如果你新增的欄位是使用標準的TextBox者,則可不必在AddNewRowControls中定義。

 

3-3-28 增加一個Column

Step11InfoLogin.aspx執行View in Browser重新打開W005網頁

我們在Detail上面的WebGridView上按下「新增」或「更改」的功能時,可以看見如下圖中的WebRefVal出現,並可以選擇資料傳回到ProductID欄位中。

 

3-3-29 執行W005網頁


 

 

Top of Page