2012年7月5日 星期四

CheckBox和CheckBoxList的使用範例

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

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

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

以下為程式碼及解說

頁面佈置


image

    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)
imageimage

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

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

那麼傳統的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 次,這個迴圈會重複做的事情如下
image

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

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

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

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

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

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

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

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

2 則留言:

Related Posts Plugin for WordPress, Blogger...
// Dnow Function