本篇重點：
- 常用控制項介紹(下)：CheckBox、RadioButton、DropDownList
- 小練習
常用控制項介紹(下)
CheckBox
- 前端寫法：
<asp:CheckBox ID="OptionCBX1" runat="server" />
<asp:CheckBox ID="OptionCBX2" runat="server" />
- 後端寫法： 需搭配 if 迴圈
If OptionCBX1.Checked Then
' 選中了Option 1，會發生的結果寫在這裡
End If
If OptionCBX2.Checked Then
' 選中了Option 2，會發生的結果寫在這裡
End If
RadioButton
- 前端寫法：
<asp:RadioButton ID="YesRBTN" runat="server" GroupName ="1" Checked="True" />
<asp:RadioButton ID="NoRBTN" runat="server" GroupName ="1" />
用 GroupName ="1" 來幫 RadioButton 分組，同一組中只能有一個選項被勾選； Checked="True" 代表預設是被選的
- 後端寫法： 需搭配if迴圈
If YesRBTN.Checked Then
' 選中了Yes
Elseif NoRBTN.Checked Then
' 選中了No
Else
' 兩個都沒有選
End If
小叮嚀：CheckBox 是多選 ; RadioButton 可以是單選或多選，差別在有沒有設相同的 GroupName ~~
DropDownList
一開始拉進來的控制項長這樣：<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> ，沒有中間的資料，把滑鼠移到開頭的底下會出現箭頭，點開後選擇「編輯項目」，可以在裡面輸入值。
按左下角「加入」，接著輸入「Text」、「Value」(Text 是選項名稱、Value 是伺服器用來取值)，每一個選項都按照上面的步驟輸入，最後按確定就完成了。
<asp:DropDownList ID="NumDDL" runat="server">
<asp:ListItem Value="1">一號</asp:ListItem>
<asp:ListItem Value="2">二號</asp:ListItem>
<asp:ListItem Value="3">三號</asp:ListItem>
<asp:ListItem Value="4">四號</asp:ListItem>
</asp:DropDownList>
除了直接輸入選項之外，也可以透過程式碼處理
- 前端寫法：
<asp:DropDownList ID="yearDDL" runat="server" AutoPostBack="True" > </asp:DropDownList>
AutoPostBack="True" 代表值如果有變動的話，會自動送出資料或觸發後端邏輯
- 後端寫法：
If Not Me.Page.IsPostBack Then
yearDDL.Items.Add(New ListItem(請選擇, 0))
yearDDL.Items.Add(New ListItem(1, 1))
yearDDL.Items.Add(New ListItem(2, 2))
yearDDL.Items.Add(New ListItem(3, 3))
yearDDL.Items.Add(New ListItem(4, 4))
End If
把這一段加在 page_load 裡面，yearDDL.Items.Add(New ListItem(Text, Value)) 的概念與上一個方式相同，只是我們將選項和值寫在括號裡面。 <br/>
另外，一個網頁在重新整理 (觸發控制向) 的時候，程式會從 page_load 開始判斷，所以我們會加上一個 if 迴圈，將不想被重新執行的程式寫在裡面。 <br/> 補充影片：https://www.youtube.com/watch?v=xk-oGKl8aFE&t=535s
小練習
將上次的學生基本資料輸入頁面做一些調整，加上了CheckBox、RadioButton、DropDownList的練習 ~~
- 前端寫法：
<h1>學生基本資料</h1>
<div>
姓名 :<asp:TextBox ID="NameTBX" runat="server" ></asp:TextBox><br />
性別 :<asp:RadioButton ID="GenderRBTN1" runat="server" Text="男" GroupName ="1"/>
<asp:RadioButton ID="GenderRBTN2" runat="server" Text="女" GroupName ="1"/><br />
年級：<asp:DropDownList ID="GradeDDL" runat="server" AutoPostBack="True" AppendDataBoundItems="True">
<asp:ListItem Value="0">請選擇</asp:ListItem>
<asp:ListItem Value="1">一年級</asp:ListItem>
<asp:ListItem Value="2">二年級</asp:ListItem>
<asp:ListItem Value="3">三年級</asp:ListItem>
<asp:ListItem Value="4">四年級</asp:ListItem>
</asp:DropDownList>
<br />
選課 :<asp:CheckBox ID="ClassCBX1" runat="server" Text="國文" GroupName="2"/>
<asp:CheckBox ID="ClassCBX2" runat="server" Text="英文" GroupName="2" />
<asp:CheckBox ID="ClassCBX3" runat="server" Text="數學" GroupName="2"/><br />
飲食習慣 :<asp:RadioButton ID="EatRBTN1" runat="server" Text="葷" GroupName ="3"/>
<asp:RadioButton ID="EatRBTN2" runat="server" Text="素" GroupName ="3"/> <br />
手機 :<asp:TextBox ID="PhoneTBX" runat="server" MaxLength="10"
OnKeyPress="if(((event.keyCode>=48)&&(event.keyCode <=57))||(event.keyCode==46)) {event.returnValue=true;} else{event.returnValue=false;}"> </asp:TextBox> <br />
備註 :<asp:TextBox ID="RemarkTBX" runat="server" Rows="2" TextMode="MultiLine"></asp:TextBox><br />
<asp:Button ID="SureBTN" runat="server" Text="輸入/修改" />
<br/>
<br/>
<asp:Panel ID="Panel1" runat="server" Visible="False">
請確認資料<br/>
姓名：<asp:Label ID="NameLB" runat="server" Text="" ></asp:Label> <br/>
性別：<asp:Label ID="SexLB" runat="server" Text="" ></asp:Label> <br/>
年級：<asp:Label ID="GradeLB" runat="server" Text="" ></asp:Label> <br/>
選課：<asp:Label ID="ClassLB" runat="server" Text="" ></asp:Label> <br/>
飲食習慣：<asp:Label ID="EatLB" runat="server" Text="" ></asp:Label> <br/>
手機：<asp:Label ID="PhoneLB" runat="server" Text="" ></asp:Label> <br/>
備註：<asp:Label ID="RemarkLB" runat="server" Text="" ></asp:Label> <br/>
</asp:Panel>
</div>
- 後端寫法：
Protected Sub SureBTNSubmit_Click(sender As Object, e As EventArgs) Handles SureBTN.Click
'將 Panel1 改成可顯示
Panel1.Visible = True
'確認姓名
NameLB.ForeColor = System.Drawing.Color.Blue
If NameTBX.Text <> "" Then
NameLB.Text = NameTBX.Text
Else
NameLB.Text = "請填寫姓名"
NameLB.ForeColor = System.Drawing.Color.Red
End If
'確認性別
SexLB.ForeColor = System.Drawing.Color.Blue
If GenderRBTN1.Checked = True And GenderRBTN2.Checked = False Then
SexLB.Text = "男"
ElseIf GenderRBTN2.Checked = True And GenderRBTN1.Checked = False Then
SexLB.Text = "女"
Else
SexLB.Text = "請選擇性別"
SexLB.ForeColor = System.Drawing.Color.Red
End If
'確認年級
GradeLB.ForeColor = System.Drawing.Color.Blue
If GradeDDL.Text <> "0" Then
GradeLB.Text = GradeDDL.Text
Else
GradeLB.Text = "請選擇年級"
GradeLB.ForeColor = System.Drawing.Color.Red
End If
'確認選課
ClassLB.Text = ""
ClassLB.ForeColor = System.Drawing.Color.Blue
If ClassCBX1.Checked = False And ClassCBX2.Checked = False And ClassCBX3.Checked = False Then
ClassLB.Text = "請選擇課程"
ClassLB.ForeColor = System.Drawing.Color.Red
End If
If ClassCBX1.Checked = True Then
ClassLB.Text = ClassLB.Text & "國"
End If
If ClassCBX2.Checked = True Then
ClassLB.Text = ClassLB.Text & "英"
End If
If ClassCBX3.Checked = True Then
ClassLB.Text = ClassLB.Text & "數"
End If
'確認飲食習慣
EatLB.ForeColor = System.Drawing.Color.Blue
If EatRBTN1.Checked = True And EatRBTN2.Checked = False Then
EatLB.Text = "葷"
ElseIf EatRBTN2.Checked = True And EatRBTN1.Checked = False Then
EatLB.Text = "素"
Else
EatLB.Text = "請選擇飲食習慣"
EatLB.ForeColor = System.Drawing.Color.Red
End If
'確認手機
PhoneLB.ForeColor = System.Drawing.Color.Blue
If PhoneTBX.Text <> "" Then
If Len(PhoneTBX.Text) < 10 Then
PhoneLB.Text = "請輸入十位數字"
PhoneLB.ForeColor = System.Drawing.Color.Red
Else
PhoneLB.Text = PhoneTBX.Text
End If
Else
PhoneLB.Text = "請輸入手機號碼"
PhoneLB.ForeColor = System.Drawing.Color.Red
End If
'確認備註
RemarkLB.ForeColor = System.Drawing.Color.Blue
If RemarkTBX.Text <> "" Then
RemarkLB.Text = RemarkTBX.Text
Else
RemarkLB.Text = ""
End If
End Sub
未輸入任何資料，按下輸入／修改按鈕的畫面：
輸入資料，按下輸入／修改按鈕的畫面：
<br/><br/>
補充：錯誤訊息寫法<br/>
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "alert", "alert('xxxx');", True)
我們可以在程式中加入錯誤訊息，判斷步驟是否成功，或輸入的資料是否有效。<br/><br/> 也可以呼叫彈跳視窗，將需要顯示的訊息放在( )裡。
MsgBox("")