第4章EEP2019WEB表單基礎設計(下)第4章EEP2019WEB表單基礎設計(下)\4-2WebRefButton的使用

4-2WebRefButton的使用

 

 

使WebRefVal時有一個限制,對方的資料只能是一個資料表某一筆,而且只能用WebGridView來呈現,如果你希望能自由設計選擇資料的頁面,就必須改用WebRefButton來取代,而且可以透過WebTranslateRefReturnField來定義各個傳回的欄位,可讓你的開發介面達到較大的彈性,本例中我們要以W004ShipName欄位可以透過WebRefButton去串接一個網頁,並讓其傳回資料。首先,為了WebRefButton所配合的選擇頁面,我們特別去開發一個資料選擇表單,我們使用WSingleTemplate來設計,因為它有一個WebGridView在上面。使用Tools/WizardWeb Form Wizard功能來產生一個頁面,如同前面Wizard的操作,這裡簡單說明一下。

 

Step1Template設為『WSingle』,將Form的名稱改為【W008】,Providor資料源設定為【S001.Master資料表為Customers,選擇所有欄位,然後按下【Done】產生W008

 

 

Step2Navigator隱藏或者刪除,以免用戶可以透過Navigator來操作。

 

Step3設置一下wgvMaster這個WebGridView,讓其只顯示選中按鈕。在wgvMaster的元件上按下右上角的快捷鈕「Edit Columns」。

 

4-2-3 執行Edit Columns

 

Step4這裡面應該有一個ICON圖示的TemplateField欄位,內會有一個Edit/Delete的按鈕,因為我們在此要使用Selected的按鈕,因此,我們將TemplateField刪除。

4-2-4 刪除TemplateField

 

Step5然後在此新增一個CommandField,並將『ButtonType』設為【Image】,表示以圖型來顯示,將『SelectImageURL』設到【~/Image/refval/ RefValSelect.gif】圖檔上,最後設定『ShowSelect Button』為【True】即可,離開Columns設定後,即可看到此Selected按鈕。


 

4-2-5 設定CommandField元件屬性

 

4-2-6 顯示Selected按鈕

Step6回到W008中,貼入一個WebTranslate元件,用來定義傳回欄位,屬性設置如圖。

 

Œ其中,『BindingObject』設為【wgvMaster】的WebGridView元件;

DataSourceID』為【Master】,代表傳回欄位的資料來源;

ŽReferenceOnly』屬性務必要設為【True】,因為一定要為True才能讓原來的WebRefButton接收資料,如果為False,就無法傳回;

  ShowDataStyle』則選【GridView】,配合BindingObject來使用。

 

4-2-7 添加且設置WebTranslate元件

 

Step7這裏舉例將Customers資料中的CompanyName欄位的內容回傳給對方網頁的ShipName不一定是ShipName,要看對方WebRefButton的設定。所以,在WebTranslateRefReturnFields屬性中增加如下內容。

 

 

4-2-8 添加CompanyName欄位

 

Step8再來,打開W004。點選wdvMaster這個WebDetailsView元件,我們透過右上角快捷鈕「Edit Fields」功能,將ShipName欄位轉換為TemplateField並按下【OK】。

4-2-9 轉換為TemplateField


Step9這是因為要接收傳回值的欄位,都必須設為TemplateField才能生效,回到進入ItemTemplate的狀態,右鍵「Edit Template」,選ShipName欄位進入Template的編輯,我們在ShipName右方貼入一個WebRefButton同時,我們將EditItemTemplate InsertItemTemplate 的系統產生的Textbox命名為不容易混淆的名字tbShipName.

 

4-2-10 貼入WebRefButton元件
Step10其屬性設置如圖。Caption則是WebRefButton的文字抬頭,可以用“或輸入文字內容,這裡我們輸入Get ShipName,『RefURL』則代表WebRefButton按下去後所要打開的網頁,我們當然選擇【W008】這個網頁。另

RefURLHeightRefURLWidth則用來控打開網頁的窗體大小。

 

4-2-11設置WebRefButton屬性

 

Step11再來,就是要定義WebRefButtonMatchControls屬性。要設定對方WebTranslate元件所要傳回內容要放在那些元件中其實是元件名稱,我們則選擇tbShipName即可,代表要將WebTranslateCompanyName欄位傳回tbShipName元件上,也可以設定多個,但也要WebTranslate元件相對設定。

 

4-2-12設置MatchControls屬性

注意

MatchControl可以接受傳回多個欄位,但WebTranslateRefReturnFields所定義的欄位次序須與此MatchControl相對應,欄位數量也必須一致,才能準確對應上。

 

Step12為了新增時也可以有此WebRefButton功能,所以,我們將此WebRefButton按下“Ctrl-C”將其CopyInsertItemTemplateShipName右方,按下“Ctrl-V”將其貼上。

 

4-2-13 Copy WebRefButton

 

Step13W004W008分別執行Build Page,並在InfoLogin.aspx中執行View in Browser瀏覽查看。

 

打開W004,並對某一筆資料進行編輯,此時就可以按一下WebRefButton,選中一筆記錄後按一下OK,就會將該筆記錄的CompanyName的值傳回給ShipName

4-2-14 查看W004表單

 

 

 

Top of Page