星期三, 4月 23, 2008

CascadingDropDown with PageMethods

今天在工作上有需要一個連動式的dropdownlist..想到之前看到ajaxtoollit裡有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)效率..是可以一試的..
留這篇給大家參考ㄅ..^^..

參考:
http://asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

1 則留言:

akhu309 提到...

請問可以把這份程式的Demo寄給我參考嗎?

因為我怎麼試都是Error 500

akhu309@gmail.com

謝謝