連動式下拉式選單CascadingDropDown

有時候我們需要利用一個DropDownList被選取的值去撈出另一個DropDownList的列表，傳統的作法就把第一個DropDownList設定成AutoPostBack設定成True就可以，但是這樣會造成頁面閃爍，在AJAX.NET出現後我們或許會把DropDownList放在UpdatePanel內來避免閃爍，但是回傳的是整個DropDownList現在有了AJAXToolkits後利用其中的CascadingDropDown元件就可以讓傳送的值更少，並且畫面更人性化提高你程式的FU

★注意事項：想玩這玩意當然你必須要有

1. ASP.NET AJAX 1.0版本(下載)
2. ASP.NET AJAX Control Toolkit (下載頁)

▲當我們都安裝好了以後，就來玩玩吧，首先拉兩個DropDownList出來，然後在拉兩個CascadingDropDown出來，設定相關的屬性。

 
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
     </ajaxToolkit:ToolkitScriptManager>  
     <asp:DropDownList ID="DropDownList1" runat="server">  
     </asp:DropDownList>     
     <ajaxToolkit:CascadingDropDown ID="DropDownList1_CascadingDropDown"   
         runat="server" Category="type" Enabled="True" LoadingText="讀取中..."   
         PromptText="請選擇類別" ServicePath="WebService.asmx" TargetControlID="DropDownList1" ServiceMethod="getType">  
     </ajaxToolkit:CascadingDropDown>  
   
 
 <asp:DropDownList ID="DropDownList2" runat="server">  
    </asp:DropDownList>  
    <ajaxToolkit:CascadingDropDown ID="DropDownList2_CascadingDropDown"   
        runat="server" Category="kind" Enabled="True" LoadingText="讀取中..."   
        PromptText="請選擇種類" TargetControlID="DropDownList2"   
        ServicePath="WebService.asmx"  ServiceMethod="getkind"   
        UseContextKey="True" ParentControlID="DropDownList1">  
    </ajaxToolkit:CascadingDropDown>  

▲程式頁面看你想做啥自己寫吧，因為此範例主要是連動並不是選到最後要執行什麼


▲依照上方的設定我們有使用一個叫做WebService的網路服務並且分別調用其中的gettype和getkind方法，因此我的們網路服務就必須撰寫以下code

  [WebMethod]
 public CascadingDropDownNameValue[] getType(string knownCategoryValues, string category)
 {
     List values = new List();
     SqlConnection conn = demotools.getSqlConnection();
     SqlCommand comm = new SqlCommand("SQL語句", conn);
     conn.Open();
     SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
     while (reader.Read())
     {
         values.Add(new CascadingDropDownNameValue(reader[1].ToString(), reader[0].ToString()));
     }
     conn.Dispose();
     comm.Dispose();
     reader.Dispose();
     return values.ToArray();
 }
 [WebMethod]
 public CascadingDropDownNameValue[] getkind(string knownCategoryValues, string category)
 {
     StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
     List values = new List();
     SqlConnection conn = demotools.getSqlConnection();
     SqlCommand comm = new SqlCommand("SELECT text, Id FROM View WHERE (parnetId = " + kv["t"] + ")", conn);
     conn.Open();
     SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection);
     while (reader.Read())
     {
         values.Add(new CascadingDropDownNameValue(reader[0].ToString(), reader[1].ToString()));
     }
     conn.Dispose();
     comm.Dispose();
     reader.Dispose();
     return values.ToArray();
 } 

其中說明一下如果我們在getkind方法中直接拿(knownCategoryValues)傳來的值是會很難用的，因為調用getkind方法的是DropDownList2而DropDownList2的觸發是DropDownList1，所以它會把你在DropDownList1_CascadingDropDown設定的Category拿出來用，因為我們設定的Category=t，所以假如它傳出來的值是98那直接用knownCategoryValues得到的值會是t:98，這種鬼東西多難用可是使用

StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); 

就可以利用kv["t"]直接得到98這個值。


本範例是使用WebService當然你也可以使用PageMethod，但使用PageMethod的傳輸量會比WebService多，其中的考量demo也不方便發表，就您自行斟酌吧，如果您想知道使用PageMethod的範例可以到demo朋友的部落格觀看。



http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/CCDWithDB.aspx

目前尚無評論...