CheckBox和CheckBoxList的使用範例

這邊利用CheckBox來製作調整控制項配置方式的選項按鈕，也順便介紹了HTML時代沒有的控制項CheckBoxList有哪些現成的配置屬性供修改。

再來是CheckBoxList 的使用，並從選取過程中抓出使用者勾選了哪些資料。

◎以上程式範例AspNet14.aspx，如在頁框下不能操作，請開新視窗操作
◎如果有問題歡迎您提出，dnowba很需要有人和我一起討論

以下為程式碼及解說

頁面佈置

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Me.CheckBox1.Text = "是否把底下的子選項分2行顯示"
            Me.CheckBox2.Text = "是否要水平排列"
            Me.CheckBox3.Text = "是否要使用orderedlist"
            Me.CheckBox1.AutoPostBack = True
            Me.CheckBox2.AutoPostBack = True
            Me.CheckBox3.AutoPostBack = True
        End If

        If Me.CheckBox1.Checked = True Then
            Me.CheckBoxList1.RepeatColumns = 2
        Else
            Me.CheckBoxList1.RepeatColumns = 0
        End If

        If Me.CheckBox2.Checked = True Then
            Me.CheckBoxList1.RepeatDirection = RepeatDirection.Horizontal
        Else
            Me.CheckBoxList1.RepeatDirection = RepeatDirection.Vertical
        End If

        If Me.CheckBox3.Checked = True Then
            Me.CheckBoxList1.RepeatLayout = RepeatLayout.OrderedList
        Else
            Me.CheckBoxList1.RepeatLayout = RepeatLayout.Table
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Me.Label1.Text = vbNullString
        If Me.CheckBoxList1.SelectedIndex = -1 Then
            Me.Label1.Text = "尚未選取，請從上方選擇"
        Else
            For i As Integer = 0 To Me.CheckBoxList1.Items.Count - 1
                If Me.CheckBoxList1.Items(i).Selected Then
                    Me.Label1.Text &= "  " & Me.CheckBoxList1.Items(i).Text & "   "
                End If
            Next
        End If
    End Sub

 

CheckBox和CheckBoxList的使用時機

當各個選項之間沒有直接關係的時候，我覺得用單個項目的CheckBox就可以了
而當這些選項之間是一種「子集合」，用CheckBoxList來做整合

額外一提，這裡使用的CheckBox，用的是工具箱中「標準」索引標籤裡的CheckBox控制項，不是「HTML」索引標籤的Input(Checkbox)

二者在畫面上長得是一模一樣的，就是一個小方塊

那麼上述二者到底有何不同，傳統的Input(Checkbox) 單純是應用在勾選後送回表單讓Server驗證，而ASP.NET的CheckBox控制項除了這個用途外，最重要的是能做「即時的互動功能」，也就是不用整個表單傳回，光勾選這件事情就可以馬上讓Client即時做反應。如範例，勾選後就馬上變化。這個就是PostBack回饋的機制，即然有「即時互動」，那麼二個控制項在HTML原始碼的寫法就不一樣了，如下圖，最重要的差別在於ASP.NET的控制項標籤裡多了一個「runat=”server”」，意思就是每次觸發都會把資訊傳回Server端…

那麼傳統的Input(Checkbox)就不行PostBack嗎？我們如果在Input(Checkbox)的HTML原始碼標記中加一個 runat=”server”，變成下面這樣可不可行

<input id="Checkbox4" type="checkbox" runat="server"/>

這樣的做法不成立，最根本的原因是，Input(Checkbox)這個控制項的組成元素不多(換句話說，沒有很多現有的屬性參數可以調用)，若要CheckBox真正發揮PostBack的功能，還得要把CheckBox的AutoPostBack屬性給設定為true (不設定的話，和一般HTML的Checkbox是沒有差別的)，在Input(Checkbox)裡我們調用不到這樣的參數(因為沒有現有的設計)。

互動網頁更需要邏輯設計

整個互動式網頁建構過程中，因為是「互動」，所以要不停的判斷Client端的使用者按了什麼按鈕、做了哪些事情…因此大量的判斷陳述句(如本程式的IF)、迴圈檢查(如程式的FOR)是不可避免的，這個地方也是最常出現邏輯錯誤的。舉個例來說：

上面在FOR迴圈這一段，我們的邏輯是
「選擇子項目，就輸出使用者選擇了哪幾個；沒有選的話，就顯示未選取的提示字」，照字面上的解釋，寫成以下程式碼：

        For i As Integer = 0 To Me.CheckBoxList1.Items.Count - 1
            If Me.CheckBoxList1.Items(i).Selected Then
                Me.Label1.Text &= "  " & Me.CheckBoxList1.Items(i).Text & "   "
            Else
                Me.Label1.Text = "尚未選取，請從上方選擇"
            End If
        Next

FOR迴圈的功能，就是在遞迴檢查到底選到了哪一項，乍看之下，上面的程式邏輯是通的吧，實際DEMO看看

◎以上程式範例AspNet14_1.aspx，如在頁框下不能操作，請開新視窗操作

是不是怎麼選擇，按下「送出結果」按鈕，都是顯示「尚未選取，請從上方選擇」的提示字，邏輯上出錯了，因為在判斷句IF裡，ELSE例外還是在迴圈裡，所以出錯了，具體的解釋的話，如果說CheckBoxList有3個子項目的話， FOR迴圈會從 i=0 i=1 i=2  執行 3 次，這個迴圈會重複做的事情如下

所以這樣就會出錯啦，不過上方有一個情形可以稍微顯示第三個選項，就是只勾第三個…試試看也順道用這個方式檢查一下為什麼。

所以我們的開頭的範例寫判別式的方式是經過邏輯修正完的，感覺是正常運作了，不過…有一個地方其實是有問題的，客倌不妨試試看，像下面這樣同時勾選「1和3」或是「2和3」選項

發生什麼事呢…答案是又出錯啦…

看看下面的出錯畫面，哇哩，英文，看來除錯能力好不好除了邏輯力以外，還有一個指標，就是英文程度 (這是真的，因為寫程式的關係，我的英語讀的能力變得不錯，可惜還是不能和外國人social ，因為這些英語詞彙日常生活中用不到)

好吧，看不懂的話，換中文偵錯畫面讓大家看看，好的，原來是「事件互斥」了，UnorderedList 和 OrderedList 不能同時使用。

所以接下來還要排除控制項配置方式互斥的方式，又要動動腦…這邊就不提了

所以我真的覺得一個程式設計工作團隊要有專門的人在除錯DEBUG，不過現在的環境，除非是大公司，不然很少有專人在抓蟲除錯。我雖然工作不是程式設計部門，但是常常看到網路論壇裡的人寫著，通常TEAM裡面負責DEBUG的是由最菜的菜鳥負責…我覺得這種工作雖然吃力不討好，但是有機會目睹長輩們寫的程式碼，除臭蟲外順便加強自已的功力，真的很幸運。

我…也…要…(常常想要出去見見世面，但是我的正職是國小老師，時間上不允許，就算是當工讀也沒人要請我吧…不過這就是我學程式的動力，工作上用不到，但是有一天我要證明自已的實力)