DropDownList連動

法1:
將DropDownList設成AutoPostBack=true
在第一個DropDownList中的SelectedIndex事件裡撰寫程式
缺:頁面會閃爍

aspx
<asp:DropDownList ID="DropDownList1" runat="server" OnInit="DropDownList1_Init" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
            <asp:ListItem >請選擇第一層項目</asp:ListItem>
        </asp:DropDownList>

<asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem >請先選擇第一層項目</asp:ListItem>
        </asp:DropDownList>

第一個下拉式AutoPostBack要改為True



cs
              protected void DropDownList1_Init(object sender, EventArgs e)   //初始事件
        {

            List<string> data = new List<string>();
            data = 從資料庫取得資料 ;    

            for (int i = 0; i < data.Count; i++)
            {
                DropDownList1.Items.Add(data[i]);                    //放入下拉式一
            }
   }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList2.Items.Clear();                                 //清除下拉式二的所有選項(否則若一更換會出現之前的項目)
            DropDownList2.Items.Add("請選擇第二層項目");

                List<string> data = new List<string>();

                data = 依照下拉式1的選項當作條件去資料庫獲取所要資料

                for (int i = 0; i < data.Count; i++)
                {
                    DropDownList2.Items.Add(data[i]);
                }
              // DropDownList2.DataBind();         //不用此行亦可,原因未知
        }


--------------------------------------------------------------------------------------

法2
使用UpdatePanel
設定以及cs的程式碼都跟上方一樣
aspx中多拉出一個UpdatePanel元件,並將被連動的物件放在UpdatePanel元件裡面
UpdatePanel為ajax元件,故需要拉ScriptManager元件

先拉出元件
工具箱--->UpdataePanel

未設定之程式碼
aspx
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>    要連動的部分放在之間
                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem>請先選擇第一層項目</asp:ListItem>
                </asp:DropDownList>    //
            </ContentTemplate>
        </asp:UpdatePanel>

屬性-->UpdataeMode從Always改為 Conditional


屬性-->Triggers按旁邊的"..."按鈕會跑出視窗


點選加入,Control ID選擇下拉式1
                    EventName選擇事件
(在 <Triggerrs> 下的 <asp:AsyncPostBackTrigger> 設定觸發條件,ControlID 為元件 ID,EventName 為觸發方式,SelectedIndexChanged 為 DropdownList 觸發方法。)


到此設定完成,但因為是ajax,故直接執行會產生以下畫面


再拉一個ScriptManager進到asp:UpdatePanel 

設定完成後之aspx程式碼
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList2" runat="server">
                    <asp:ListItem>請先選擇第一層項目</asp:ListItem>
                </asp:DropDownList>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>

控制項(DropDownList1)不能放到UpdatePanel裡,會沒反應





參考
http://fishsses.pixnet.net/blog/post/52406822-%E4%BD%BF%E7%94%A8-updatepanel-%E5%AF%A6%E7%8F%BE-dropdownlist-%E4%B8%8D%E5%88%B7%E6%96%B0%E9%80%A3%E5%8B%95%EF%BC%8C%E5%8C%85

UpdatePanel 的屬性、事件的相關說明
屬性或事件名稱作用和解釋
ChildrenAsTriggers
當 UpdateMode 屬性為 Condititonal 時, UpdatePanel 中的子控件的局部回傳會引發 UpdatePanel 的更新。
Triggers用來引發更新的事件。
UpdateMode
表示 UpdatePanel 的更新模式,有兩個值:Always 與 Conditional ,預設值為 Always 。
Always 是不管有沒有 Tiggers,其他元件都將更新該 UpdatePanel 。
Conditional 表示只有當 UpdatePanel  的 ChildrenAsTriggers 屬性為 true 時,才會觸發 UpdatePanel 中子控件引發的局部回傳或者整頁回傳。
如果當 UpdatePanel  的 ChildrenAsTriggers 屬性為 false 時,可設定UpdatePanel 子控制項 Triggers 中的 AsyncPostBackTrigger 來實現局部回傳。

UpdatePanel 的 UpdateMode 屬性有兩個值,分別為 Always 與 Conditional ,預設值為 Always ,如果 UpdateMode 屬性設定為 Always每次收到源自該網頁任何部分的回傳時都會更新 UpdatePanel 控制項的內容。 這包括來自其他 UpdatePanel 控制項內部之控制項的非同步回傳,以及來自並非位於 UpdatePanel 控制項內部之控制項的回傳(意思是︰當設定為 Always  時,頁面上 UpdatePanel 控制項中的任何一個元件觸發動作,都會觸發頁面上任何一個 UpdatePanel 的更新。)
為了讓 UpdatePanel 運作效能更好,可將 UpdateMode 屬性設置為 Conditional,但必須宣告 UpdatePanel 控制項的 Triggers 子控制項中的 AsyncPostBackTrigger 觸發程序,才會觸發元件下的更新程序(EX︰ DropdownList 的連動)。這樣的好處是一來效能增加,二來不管元件(Textbox、GridView、DropdownList等)在 UpdatePanel 控制項之內或之外都可被觸發。
如果 UpdatePanel 控制項的 ChildrenAsTriggers 屬性設定為 true 包在 UpdatePanel 控制項的內的元件(Textbox、GridView、DropdownList等)會全部被更新,這樣會浪費系統效能,所以可將 ChildrenAsTriggers 屬性設定為 false,並設定每一個元件的觸發程序,這樣可一次只更新一個元件,而不是整個 UpdatePanel 控制項都更新。

留言

  1. List data = new List();
    data = 從資料庫取得資料 ;


    要怎麼取得,可以交一下嗎?

    回覆刪除
    回覆
    1. 你的資料庫是何種呢?
      前端指定好或是後端動態取得呢?
      或是網路關鍵字搜一下應該範例都蠻多的喔

      刪除
    2. 程式連結有很多喔,可能是微軟的資料模型,或是ODBC等等方式,你可能需要先確定你要用什麼方式&資料庫,不然我很難正確回答

      刪除

張貼留言

這個網誌中的熱門文章

SQL SEVER備份與還原遭遇問題

asp.net頁面間傳值