[ASP.NET WebForm] #5 常用控制項介紹(3):RadioButtonList、CheckBoxList、ListBox

本篇重點

  • RadioButtonList
  • CheckBoxList
  • ListBox
  • 後端事件

RadioButtonList

此控制項用於顯示一組選項,並且是單選。在 HTML 中,每個單選按鈕都有相同的 GroupName 屬性,可以確保在同一組中只能選擇其中一個項目。

前端程式

<asp:RadioButtonList ID="RBTNL" runat="server">
    <asp:ListItem Text="選項1" Value="1" GroupName="1"></asp:ListItem>
    <asp:ListItem Text="選項2" Value="2" GroupName="1"></asp:ListItem>
    <asp:ListItem Text="選項3" Value="3" GroupName="1"></asp:ListItem>
</asp:RadioButtonList>

RBTNL <br/>

CheckBoxList

此控制項用於顯示一組選項,並且是複選。用戶可以勾選單個或多個選項。

前端程式

<asp:CheckBoxList ID="CBXL" runat="server">
    <asp:ListItem Text="選項A" Value="A" GroupName="2"></asp:ListItem>
    <asp:ListItem Text="選項B" Value="B" GroupName="2"></asp:ListItem>
    <asp:ListItem Text="選項C" Value="C" GroupName="2"></asp:ListItem>
</asp:CheckBoxList>

CBXL <br/>

ListBox

ListBox 也用於顯示一組選項,但比較不同的是,他是一個下拉式清單,可以選擇其中一個選項。

前端程式

<asp:ListBox ID="LBX" runat="server">
    <asp:ListItem Text="選項 X" Value="X"></asp:ListItem>
    <asp:ListItem Text="選項 Y" Value="Y"></asp:ListItem>
    <asp:ListItem Text="選項 Z" Value="Z"></asp:ListItem>
</asp:ListBox

LBX <br/>

後端事件

點選控制向,然後在屬性窗格中找到事件列表(通常以閃電圖示顯示)。在事件列表中選擇適當的事件(例如 SelectedIndexChanged),接著點擊旁邊的下拉箭頭,選擇現有的Function或創建新的Function來處理事件。

範例程式碼 (VB.NET)

Protected Sub RBTNL_SelectedIndexChanged(sender As Object, e As EventArgs) Handles RBTNL.SelectedIndexChanged
    ' 在這裡處理 RadioButtonList 的選擇
    Dim selectedValue As String = RBTNL.SelectedValue
    ' 根據選擇的值進行後續處理
End Sub

Protected Sub CBXL_SelectedIndexChanged(sender As Object, e As EventArgs) Handles CBXL.SelectedIndexChanged
    ' 在這裡處理 CheckBoxList 的選擇
    If item.Selected Then
            Dim selectedValue As String = item.Value
            ' 根據選擇的值進行後續處理
     End If
End Sub

Protected Sub LBX_SelectedIndexChanged(sender As Object, e As EventArgs) Handles LBX.SelectedIndexChanged
    ' 在這裡處理 ListBox 的選擇
    Dim selectedValue As String = LBX.SelectedValue
    ' 根據選擇的值進行後續處理
End Sub

小範例

  • 前端布局
我是RBTNL<br/>
<asp:RadioButtonList ID="RBTNL" runat="server" OnSelectedIndexChanged="RBTNL_SelectedIndexChanged">
<asp:ListItem Text="選項1" Value="1" GroupName="1"></asp:ListItem>
<asp:ListItem Text="選項2" Value="2" GroupName="1"></asp:ListItem>
<asp:ListItem Text="選項3" Value="3" GroupName="1"></asp:ListItem>
</asp:RadioButtonList> <br/>
          
我是LBX <br/>
<asp:ListBox ID="LBX" runat="server">
<asp:ListItem Value="X">選項X</asp:ListItem>
<asp:ListItem Value="Y">選項Y</asp:ListItem>
<asp:ListItem Value="Z">選項Z</asp:ListItem>
</asp:ListBox>

<br/><br/><br/>
<asp:Label ID="SeleLB" runat="server" Text=""></asp:Label><br/>
<asp:Button ID="SeleBTN" runat="server" Text="顯示選擇" OnClick="SeleBTN_Click" />
  • 後端事件
 Protected Sub SeleBTN_Click(sender As Object, e As EventArgs) Handles SeleBTN.Click
        '清空Label
        SeleLB.Text = ""

        ' 判斷是否有選取
        If RBTNL.SelectedIndex = -1 Then
            SeleLB.Text = "未選取任何選項。<br/>"
        End If

        ' 取得 ListBox 的清單數量
        Dim itemCount As Integer = LBX.Items.Count
        SeleLB.Text = SeleLB.Text + "LBX 清單數量: " & itemCount.ToString() & "<br />"

        ' 顯示選取狀態和清單資料
        For i As Integer = 0 To RBTNL.Items.Count - 1
            If RBTNL.Items(i).Selected Then
                Dim text As String = RBTNL.Items(i).Text
                Dim value As String = RBTNL.Items(i).Value
                SeleLB.Text = SeleLB.Text + "選取項目: " & text & " (值: " & value & ")<br />"
            End If
        Next

        ' 刪除 ListBox 中的項目
        If LBX.SelectedIndex <> -1 Then
            LBX.Items.RemoveAt(LBX.SelectedIndex)
            SeleLB.Text = SeleLB.Text + "已從 ListBox 中刪除選取項目。<br />"
        End If
    End Sub

螢幕擷取畫面 2023-08-10 152339