第5章EEP2015WEB進階設計第5章EEP2015WEB進階設計\5-8WebListBoxList的使用

5-8WebListBoxList的使用

 

 

WebListBoxList元件是專用於資料複選,資料的單選,我們可以經常使用WebRefValWebDropDownList來達到單選的目的,WebListBoxList即可以讓User選擇多筆並傳回,多筆傳回是可以用自定的分隔符號號來代表多筆,我們就舉Purchase中,以ShipAddress欄位來複選多個Suppliers回來,並以“,”隔開。如下:

 

為了WebListBoxListWebDataSource資料源,我們選擇使用WebDataSet來設計。

 

Step1因為要使用WebDataSet,所以我們先打開S004,貼入一個InfoCommand,設定『SelectCommand』為【select Suppliers.* from Suppliers】,設『KeyFields』為【SupplierID】,並更名為【Suppliers】,最後將其存檔,然後重新執行Build

5-8-1 設置InfoCommand屬性

Step2打開W005,切換到View Component Designer這頁,貼入WebDataSet元件,命名為【Wsupplier】,選擇『RemoteName』為【S004.Suppliers】,設『Active』為【True】,在WebDataSet右鍵執行「Save」,並關閉此頁面。

     

5-8-2 設置WebDataSet元件屬性

 

Step3W005中貼入一個WebDataSource,這次我們將不使用SelectCommand的方式來設定SQL語句,而是選擇『WebDataSetID』連接到【Wsupplier】,並將『DataMember』選擇到【Suppliers】這個Table,然後將其更名為【Supplier】。

5-8-3 設置WebDataSource屬性

 

Step4當你自行貼入WebDataSet之後,在網頁的程式碼中,是必須自行以程式定義與WebDataSource的關係,這是因為網頁在設計環境中,是無法讓 WebDataSource以屬性設定的方式取得WebDataSet,因此我們必須在網頁上右鍵「View Code」,並在Page_Load()中加入以下程式:

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {   InitializeComponent();

            Master.DataSource = WMaster;

            Detail.DataSource = WMaster;

            Supplier.DataSource = Wsupplier; // 請加入這行

        }

    }

 

Step5WebFormView右上角的快捷鈕,執行「Edit Template」,並在Template中選擇EditItemTemplate進入編輯的頁面,我們選擇將ShipAddressTextBox刪除,改貼WebListBoxList元件。

 


5-8-4 改貼WebListBoxList元件

 

Step6WebListBoxList的『Text』屬性DataBinding到「ShipAddress」欄位。


5-8-5 改貼WebListBoxList元件

 

Step7設定WebListBoxList的『Caption』為【供應商複選】,『DataSourceID』設為【Supplier】;『DataTextField』選擇為【CompanyName】代表複選的名稱是以供應商名稱來顯示;『DataValueField』選擇為【SupplierID】,代表傳回內容值為供應商編號;『Separator』設為【,】,代表如果有多個會以,隔開。

 

5-8-6 設置WebListBoxList屬性

 

Step8W005右鍵執行「Build Page」,並以InfoLogin.aspx右鍵「View in Browser」來執行結果。打開W005,進入編輯模式中,按一下『ShipAddress』右方的圖示,即可選擇多個供應商資料,並按下【OK】傳回,如圖:

 

 

5-8-7 執行結果

 

WebListBoxList還有一個ListStyle的屬性可以控制其顯示出來是使用ListBox還是CheckBox,都是為複選的模式,供你自由選擇,如果你選CheckBox的話,還可以設定CheckBoxColumns來決定CheckBox的左右列數。

 

WebListBoxList可以用在很多複選的項目中,當然也可以使用WebRefButtonWebGridView來做複選,我們將在往後的進階設計中還會提到。

 

Top of Page