DropDownList控制項基本使用方式

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

Partial Class AspNet04
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' ===== DropDownList控制項基本使用方式 =====
        ' DropDownList控制項和HTML表單的下拉式選單(就是<select>標籤)一樣
        ' 很多人設計自動PostBack功能、加入自訂項目功能…這些要花很多工夫去另外設計判別程式是否可正常執行
        ' 底下就有一些類似範例，甚至是「設計不良」的讓大家感覺並除錯一下
        ' 個人認為，DropDownList的設計是要拿來做一些「必選選項」的，好像是考試時的選擇題(單選題)…
        ' user一定要選擇，而且沒有例外…才適合用DropDownList
        ' 打比方來說台灣人的戶籍縣市別…就一定只有一個而且沒有例外(嗎???)
    End Sub

    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        ' 在控制項初始化時可以加入下拉式選單的「子選項」
        ' 有人會把加入子選項寫在Page_Load事件，然後每次控制項形成時都要Me.DropDownList.clear()先清空…，我是寫在Page_PreInit時…
        ' DropDownList可同時傳遞選項值，包含Text和Value，下面是只加入子選項的Text，預設中，若不設定Value，Text=Value
        Me.Label1.Text = "範例1：最基本的DropDownList<br>請選擇你的興趣"
        Me.DropDownList1.Items.Add("1、政治")
        Me.DropDownList1.Items.Add("2、教育")
        Me.DropDownList1.Items.Add("3、娛樂")
        Me.Button1.Text = "確定送出"

        ' 控制項可以加入下拉式選單的不同Value和Text的子選項，同時我們也設定它自動PostBack
        ' 設定PostBack的好處是使用者少一個步驟，但是PostBack是要當控制項有變動時才會引發…
        ' 所以DropDownList的第一項一定選不到…這個時候可以變通一下，把「選擇提示」寫在第一個子選項裡
        Me.Label2.Text = "範例2：Value和Text不同的DropDownList"
        Me.DropDownList2.AutoPostBack = True
        Me.DropDownList2.Items.Add("請選擇你的興趣")
        Me.DropDownList2.Items.Add(New ListItem("1、政治", "Political"))
        Me.DropDownList2.Items.Add(New ListItem("2、教育", "Education"))
        Me.DropDownList2.Items.Add(New ListItem("3、娛樂", "Entertainment"))

        ' DropDownList中動態加入新的子選項
        Me.Label3.Text = "範例3：動態加入新的子選項<br>請選擇你的偶像"
        Me.DropDownList3.AutoPostBack = True
        Me.Button3.Text = "加入一個新的選項"
        Me.DropDownList3.Items.Add("周杰倫")
        Me.DropDownList3.Items.Add("王力宏")
        Me.DropDownList3.Items.Add("孫燕姿")

        ' DropDownList動態加入子選項(美化版)
        Me.Label4.Text = "範例3：動態加入新的子選項(美化版)"
        Me.DropDownList4.AutoPostBack = True
        Me.Button4.Text = "加入一個新的選項"
        Me.DropDownList4.Items.Add("周杰倫")
        Me.DropDownList4.Items.Add("王力宏")
        Me.DropDownList4.Items.Add("孫燕姿")
        Me.DropDownList4.Items.Add("其他…")
        ' 最後設計一個panel控制項把加入子選項的Textbox和Button控制項給包起來並設定隱藏
        ' 等選到「其他…」這個選項以後再打開來…
        Me.Panel1.Visible = False

        ' 這裡放一個Label做為動態標示文字，顯示DropDownList選取後的結果
        Me.Label5.Text = ""
        Me.Label5.ForeColor = Drawing.Color.Red
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        ' 雖然DropDownList1沒有設定Value，但是預設會把Value=Text，所以我們還是可以取得該控制項的Value值
        Me.Label5.Text = "你已經選擇了" & Me.DropDownList1.SelectedValue & "!!!"
    End Sub

    Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList2.SelectedIndexChanged
        Me.Label5.Text = "你已經選擇了" & Me.DropDownList2.SelectedValue & "!!!"
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        Me.DropDownList3.Items.Add(Me.TextBox3.Text)
    End Sub

    Protected Sub DropDownList3_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList3.SelectedIndexChanged
        Me.Label5.Text = "你已經選擇了" & Me.DropDownList3.SelectedValue & "!!!"
    End Sub

    Protected Sub DropDownList4_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList4.SelectedIndexChanged
        If Me.DropDownList4.SelectedValue = "其他…" Then
            Me.Panel1.Visible = True
        Else
            Me.Panel1.Visible = False
        End If
        Me.Label5.Text = "你已經選擇了" & Me.DropDownList4.SelectedValue & "!!!"
    End Sub

    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        Me.DropDownList4.Items.Add(Me.TextBox4.Text)
    End Sub
End Class