|
前言
Web網頁的發展經過了近十年的演變，從早期最陽春的十餘個基礎元件發展到現在，並不是元件變多了，而是整個網頁技術為了U/I的展現，起了很大的變化，從早期的Active-X來豐富U/I並銜接Windows的部份功能，到了中期DHML與JavaScript的興起，演變到目前火熱的AJAX與新一代Flash(FLEX)技術，都可以讓現有的網頁豐富起來，而且更多采多姿。本文中將要以ASP .NET 2.0為技術核心，配合EEP2006所做的改善，來說明如何以元件化的方式達到這些應用面與使用者對這些關連性的選單所要的需求。
在網頁上使用關連選單
在開發Web的網頁中，下拉式或是開窗式的關連選單是個經常性的基本需求，在實際的開發上，我們比較經常看到的是下拉式(DropDownList或ComboBox)，開窗式的選單因為不是網頁的標準元件，設計起來較為麻煩，而且開窗回來後又必須用JavaScript來傳回資料，以免讓網頁更新影響速度，因此有一些開發上的難度，我們就由WebRefVal這個元件幫我們搞定這個需求。
1. 因為WebRefVal是需要連接到DataSource來配合資料的提供，在此我們直接在DataSource上選EEP
A/P Server上的資料庫連線，然後設定Select * From Customers來取得資料。
圖1 設定WebDataSource
2. 如圖，我們就以FormView為例子，在EditItemTemplate中，將客戶編號的TextBox換成了
WebRefVal。接著我們定義了WebRefVal上的DataSourceID代表開窗的資料來源，DataTextField選擇
CompanyName代表顯示是以客戶名稱，DataValueField選擇CustomerID代表傳回是客戶編號。
圖2 設定WebRefVal
3. 在RunTime上，我們對FormView編輯時，就可以在客戶編號上按下右方的小Button來開窗選擇資
料並傳回。
除此之外，WebRefVal也有兩個重要屬性，一個為CheckData設為True，就可以不開窗也可以在輸
入完畢離開時去檢驗對方資料表是否有此號碼；另一個為ColumnMatch，用來定義開窗選回時，可以
定義一起傳回其他多個欄位到原網頁上，這些功能都是只要設定即可，可以不必設計任何一行程式
即可完成。
另一種自定的參考選單
WebRefVal有一定的規則，如對方一定要為單一的SQL與使用GridView來顯示，有一定的限制，在此我們要介紹一個非常自由的開窗元件，就是WebRefButton，它是由一個Button所做成，按下時可以連結到一個自定的URL連結網頁，可以利用此網頁來傳回多個欄位資料到原網頁中，更重要的是此自定網頁完全是自由發揮，只要貼上另一個相對的WebTranslate元件即可達到傳回的功能。現在我們要使用一個ListBox的元件來開窗顯示資料，並傳回User所選的資料，說明如下：
1. 先設計此開窗的Web Form，此Form要貼入WebDataSource來取得資料，此WebDataSource資料可以設定Select * From Customers來取得客戶資料，然後再以ListBox來顯示資料，如圖，ListBox中可以設定好CompanyName來做為顯示的欄位。
2. 貼入EEP2006專屬的WebTranslate元件，設定好要傳回的資料表名稱與欄位，在此可以定義傳回多
個欄位，此例中我們可以設定傳回客戶編號與客戶地址兩個欄位。
3. 設計好上述頁面後，任何地方都可以貼上WebRefButton元件來接上此網頁進行此ListBox的選擇，當然是必須使用開窗方式，如下，我們在一個網頁上貼上WebRefButton來達到開窗選單的效果。如圖，為了讓對方傳回客戶編號與地址可以反應，則需在WebRefButton中來定義傳回到那些TextBox的欄位上。
4. 在執行時，如圖，我們就可以在客戶編號用WebRefButton來開窗選擇資料，最後再帶回選擇客戶
的編號與地址回到原網頁中。
以上的傳回動作，在WebTranslate元件中是以自動產生的JavaScript來實現的，因此不會讓原來的網頁有閃動的現象。
多層連動的動態DropDownList選單
在開發Web網頁的時候，我們有時候也需要做多層的動態選取DropDownList資料，比如選了國家以後就只會出現國家內所有省份或區域，然後選了某個區域後，再選此區域的所有城市，如果沒有AJAX的支援之下，標準的DropDownList就無法做到不更新網頁就可以動態取得資料。但在EEP2006中，我們就可以使用WebDropDownList元件來實現此動態選擇功能。主要是因為WebDropDownList使用了CallBack回Server取資料的技術，使得不必透過網頁更新來取得DropDownList資料，我們就以先選國家，在選區域，最後再選其下的城市為例，說明如下：
1. 因為WebDropDownList是需要連接到三個DataSource來配合資料的提供，因此在網頁上我們使用3個WebDataSource，並讓此三個SQL分別為：select distinct Country from Cities；select distinct Region from Cities；select City from Cities。
2. 接著就用三個WebDropDownList來分別下拉Country/Region/City等資料，如下圖，將每個WebDropDownList的DataTextField(顯示欄位)與DataValueField(內容欄位)設好，重點在此三個欄位的互動，在此我們使用了WebDropDownList一個FilterObject屬性，代表當此WebDropDownList離開時，會讓指定的Object(就是另一個WebDropDownList)到後端重新取得對應的資料。因此，我們可以設定Country的FilterObject為Region這個WebDropDownList，而Region的FilterObject為City這個WebDropDownList。
3. 將此結果執行，如圖，只要對國家選擇後，就可以選出此國家的區域，對此區域再選擇後，就可以選出此區域的城市，如國家選Canada，區域就可以選”BC與Quebec，區域選”BC”，城市就只會出現Tsawassen與Vencouver等等。
可以複選的ListBoxList
在開發Web的網頁的時候，我們有時會需要以複選的方式來選擇資料，我們可以用一個會議通知
的參與者欄位來舉例，因為會議通知的參與者可以選多個人，就可以利用EEP2006中特殊的
WebListBoxList元件，直接做到複選的功能，而且可以不必寫任何一行程式。傳回時也可以自定多個
資料間是以何種符號作為多筆分隔，系統預設以”,”做為分隔符號。如下的說明。
1. 首先以WebDataSource作為資料的來源，在此我們選擇Select * From Employess做為Select的SQL語句，以員工資料做為資料的來源。如圖，我們貼上WebListBoxList元件，設定WebDataSource為Employee，Caption設為員工選單，顯示欄位為LastName，內容欄位為EmployeeID，Separator設為”,”，代表要傳回多個EmployeeID並以”,”隔開。
2. WebListBox的設計很簡單，只要少許設定就可以得到以下的執行結果，如下圖，在會議參與者中按右方Icon，會顯示一個ListBoxList的視窗，複選後按下”確定”後可傳回多個員工代號，而且，下次再呼叫此ListBoxList的視窗時，也會自動將設定好的選取起來。
結語
在EEP2006中，我們簡單示範了這四種簡單的選單，除此之外，我們還有WebDataTimePicker專門用來做為日期的選單，WebTimePicker則用來選擇時間期間的選單，還有WebCheckBoxList也是與WebListBoxList相似，但WebCheckBoxList則是用來以CheckBox方式來讓User複選資料等等，隨著AJAX已經開始被應用，部份的U/I可以有其他的想像空間可以讓其更加親和。我們的目的其實很簡單，就是讓這些需求可以被標準化，而不是讓程式師一行一行以Coding方式來解決問題，更是以最高的生產力與最簡單的方式來完成這些常用且簡單的需求，達到軟體品質與提高產力的目的。 |