Simple Thoughts on Everything

多說無益..做就對啦..衝衝衝..

2008-04-23

CascadingDropDown with PageMethods

  • 3335
  • 0

摘要:CascadingDropDown with PageMethods

今天在工作上有需要一個連動式的dropdownlist..想到之前看到ajaxtoolkit裡有CascadingDropDown這東東..
就拿來研究給它用一下..看看是個多神奇的東西..

網路上教學都是用它跟webservice的結合..我想說..我也只有這一頁會用到..所以我就用PageMethods去完成..

先看.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

using System.Collections.Generic;
using System.Collections.Specialized;
using System.Web.Services;
using AjaxControlToolkit;

public partial class test_test11 : System.Web.UI.Page
{
 [WebMethod]
 public static CascadingDropDownNameValue[] GetColorsForModel(string knownCategoryValues, string category)
 {
     //這行是它寫好的東東在AjaxControlToolkit.dll裡面
     StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

     List<CascadingDropDownNameValue> sArray = new List<CascadingDropDownNameValue>();

     //category是來判斷要跑哪個function
     if (category == "c1")
     {
         //從資料庫抓第一個選項的資料
         //new myDataSetTableAdapters._addressZipC1TableAdapter()._addressZipC1()這是我另外寫的class來抓資料庫的
         DataTable myTb = new myDataSetTableAdapters._addressZipC1TableAdapter()
                             ._addressZipC1();
         return toArray(sArray, myTb);
     }
     if (category == "c2")
     {
         //從資料庫抓第二個選項的資料,kv["c1"]是進來的參數,來提供database來篩選資料
         DataTable myTb = new myDataSetTableAdapters._addressZipC2WhereC1TableAdapter()
                             ._addressZipC2WhereC1(kv["c1"]);
         return toArray(sArray, myTb);
     }
     if (category == "c3")
     {
         //從資料庫抓第三個選項的資料..等等等..跟上面一樣
         DataTable myTb = new myDataSetTableAdapters._addressZipC3WhereC2C3TableAdapter()
                             ._addressZipC3WhereC2C3(kv["c1"], kv["c2"]);
         return toArray(sArray, myTb);
     }
     if (category == "c4")
     {
         //從資料庫抓第四個選項的資料..等等等..跟上面一樣
         DataTable myTb = new myDataSetTableAdapters._addressZipC4WhereC2C3C4TableAdapter()
                             ._addressZipC4WhereC2C3C4(kv["c1"], kv["c2"], kv["c3"]);
         return toArray(sArray, myTb);
     }
     return null;
 }

 //這就是ajaxtoolkit自己寫的class
 private static CascadingDropDownNameValue[] toArray(List<CascadingDropDownNameValue> sArray, DataTable myTb)
 {
     foreach (DataRow ro in myTb.Rows)
     {
         sArray.Add(new CascadingDropDownNameValue(ro[0].ToString(), ro[0].ToString()));
     }
     return sArray.ToArray();
 }

 protected void Page_Load(object sender, EventArgs e)
 {

 }
}
 
再看.aspx
 
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
 </asp:ScriptManager>
 <div>
     <h4>
         <asp:DropDownList ID="DropDownList1" runat="server" Width="140px">
         </asp:DropDownList>
         <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" Category="c1"
             LoadingText="讀取中.." TargetControlID="DropDownList1" ServiceMethod="GetColorsForModel"
             PromptText="請選擇..">
         </ajaxToolkit:CascadingDropDown>
     </h4>
     <h4>
         <asp:DropDownList ID="DropDownList2" runat="server" Width="140px">
         </asp:DropDownList>
         <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" Category="c2"
             LoadingText="讀取中.." TargetControlID="DropDownList2" ServiceMethod="GetColorsForModel"
             ParentControlID="DropDownList1" PromptText="請選擇..">
         </ajaxToolkit:CascadingDropDown>
     </h4>
     <h4>
         <asp:DropDownList ID="DropDownList3" runat="server" Width="140px">
         </asp:DropDownList>
         <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" Category="c3"
             LoadingText="讀取中.." TargetControlID="DropDownList3" ServiceMethod="GetColorsForModel"
             ParentControlID="DropDownList2" PromptText="請選擇..">
         </ajaxToolkit:CascadingDropDown>
     </h4>
     <h4>
         <asp:DropDownList ID="DropDownList4" runat="server" Width="140px">
         </asp:DropDownList>
         <ajaxToolkit:CascadingDropDown ID="CascadingDropDown4" runat="server" Category="c4"
             LoadingText="讀取中.." TargetControlID="DropDownList4" ServiceMethod="GetColorsForModel"
             ParentControlID="DropDownList3" PromptText="請選擇..">
         </ajaxToolkit:CascadingDropDown>
     </h4>
 </div>
 </form>
</body>
 
 
頁面很簡單..就一個ScriptManager..和四個DropDownList跟CascadingDropDown.. 重點就是..ScriptManager的
EnablePageMethods要開..不然用半天..都會跟你說error 500.. 會很傷心的..哈..^^||..
 
結論:
傳統的UpdatePanel去做..其實簡單輕鬆..很容易就做出來了..但是.. 用這CascadingDropDown視覺效果和結合
PageMethods(WebService)效率..是可以一試的.. 留這篇給大家參考ㄅ..^^..