利用ASP.NET 2.0的用戶端回調功能製作下拉框無限級聯動

記得以前做asp的時候，常會碰到下拉框多級聯動，比如說在註冊的時候，需要選擇省和城市，這就需要二級聯動，那個時候一個普遍的做法就是利用javascript指令碼來實現，先把資料從資料庫中讀取出來，放到javascript的數組中，在下拉框的onchange事件觸發時，就可以直接從javascript的數組中讀取想要的資料。後來在asp.net
1.0中開發時，這種方法也通用，但如果要多級的話，有一個很大的缺點，就是它需要把資料一次性全部讀到javascript的數組中，如果資料非常龐大的話，這部分開銷是很大的，有時候不把資料放到資料中中，而是直接寫在javascript中，這樣不易於維護，而且代碼也太長，如果要開發可以無限級聯的話，那更是比較頭痛。自從asp,net
2.0問世後，開始學習新技術，發現asp,net2.0不僅在控制項上，功能上都產生了大變化，而且在對javascript客戶指令碼的調用功能也更加強大了，特別是出現了ajax功能，即用戶端回調功能（當然這隻是一個小小的ajax功能，如果要實現功能更強大的無重新整理可看atlas），利用這個特性可以很方便的開發現無限級聯動的下拉框效果。

　　1、先在資料庫裡建立相應的資料表如下：

　2、建立讀取資料表的函數，這裡就不寫出來了，我想每個人都會有不同的方法去實現這一功能。
   
3、接下來，我們就可以進行版面設定了，我們先做一個二級聯動的效果，在頁面上放置二個下拉框控制項，上面一個為TestDropDownList，下面一個為Item1，再加入一個objectdatasource控制項，用來讀取parentId為0的所有記錄綁定到TestDropDownList下拉框中，如：

　　如果要使用用戶端回調，必須要實現System.Web.UI.ICallbackEventHandler介面。

1public partial class Test : System.Web.UI.Page ,
System.Web.UI.ICallbackEventHandler
2{
　　該介面下面，有二個方法：

　　a)、void System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string
eventArguent)

　　該方法接收用戶端傳過來的參數enentArguent，這個參數好象只能是string型，並且沒有傳回值，我們可以根據傳過來的參數，來執行相應的功能，在這裡我們不能對頁面進行重新綁定等操作，但能夠跟資料庫進行互動操作，如讀取、刪除、插入等操作，在本文的例子中，這裡從用戶端傳過來的是parentId的值，再從資料庫中讀取parentId為相應值的所有記錄，具體代碼如下：

 1void
System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string
eventArguent)
 2    {
 3        DataSet ds = new
GetData().TestByParentId(Convert.ToInt32(eventArguent));
 4       
foreach(DataRow row in ds.Tables[0].Rows)
 5        {
 6            if
(result.Equals(string.Empty))
 7            {
 8                result =
row["pkId"] + "@" + row["name"].ToString();
 9            }
10           
else
11            {
12                result = result + "," +
row["pkId"] + "@" + row["name"].ToString();
13            }
14       
}
15    }

　　在這裡，通過TestByParentId(Convert.ToInt32(enentArguent))函數讀到相應資料，並把得到的資料作了一些處理，這個為什麼要這樣做，請繼續往下看。這裡的result為string型變數。

　　b)、string System.Web.UI.ICallbackEventHandler.GetCallbackResult()

　　這是第二個方法，該方法沒有參數，返回只能返回string型。這個方法是用來資料回調的，上面那個方法接收用戶端傳過來的參數，進行處理後，還要把處理後的我們想要的資料傳回到用戶端去執行，才會有用。這裡我們也看到了，由於該方法只能返回string型，而在下拉框必須有二個值，一個是DataValue,另一個是DataText，所以在上面的方法中，通過＠符號，把這二個值合在一起，便於在用戶端程式中進行分離。這個方法功能很簡單，就是把result返回即可，如下：

1string
System.Web.UI.ICallbackEventHandler.GetCallbackResult()
2    {
3       
return result;
4    }

　　現在我們實現了System.Web.UI.ICallbackEventHandler介面下的全部方法，接下來我們就可以來寫用戶端的程式了，用javascript來實現。這裡主要也有二個方法，第一個方法用來接受下拉框控制項的onchange事件觸發響應，另一個用來接收string
System.Web.UI.ICallbackEventHandler.GetCallbackResult()方法傳遞過來的result值，並做相應處理，把資料繫結到第二個下拉框中去，實現
二級聯動。主要代碼如下

　　a)、第一個方法

1 function CallServer(input, context)
2    {
3       
context.length=0;
4        context.options[context.length]=new
Option("資料讀取中","0");
5       
6        arg = input.value;
7       
<%=callback %>
8    }

　　這裡有二個參數，input是用來觸發onchange的下拉框控制項名稱，context是要級聯的下拉框名稱，這裡在資料還沒有綁定之前，級聯下拉框顯示“資料讀取中...”字樣。arg接收input下拉框的值，這個值以後是傳遞到上面的eventArguent參數中去，其中的<%=callback%>我們下面再介紹。

　　b)、第二個方法

 1 function ReceiveServerData(result, context)
 2   
{
 3        context.length=0;
 4        var arrData =
result.split(",");
 5        for (var i = 0; i < arrData.length;
i++)
 6        {
 7            var data =
arrData[i].split("@");
 8            context.options[context.length]=new
Option(data[1],data[0]);
 9        }
10      
11    }

　　這裡也有二個參數，其中result，就是接收上面講到的result值，而context同第一個方法的context。這裡通過js的split方法，把資料進行處理，再綁定到context控制項中去，通過這個就可以在第二個下拉框中出現相應的值了。

　　做到這裡基本上已經大功告成了，不過還有最後一步，這也是最重要的一步，我們現在做的只是用戶端歸用戶端，伺服器方法歸伺服器方法，那麼怎麼樣把這二個聯絡起來呢，這也是實現用戶端回調的關鍵區段，這裡需要使用Page.ClientScript.GetCallbackEventReference方法，下面是摘自MSDN2上的對ClientScript.GetCallbackEventReference(……)的詳細說明。

  public string GetCallbackEventReference (Control control,string
argument,string clientCallback,string context)

　　參數：

  參數 　　　　　　　　作用
  control 處理用戶端回調的伺服器 Control。該控制項必須實現
ICallbackEventHandler 介面並提供 RaiseCallbackEvent 方法。
  argument
從用戶端指令碼傳遞一個參數到伺服器端的RaiseCallbackEvent 方法。
  clientCallback
一個用戶端事件處理常式的名稱，該處理常式接收伺服器端事件返回的結果。
  context
啟動回調之前在用戶端的用戶端指令碼資訊。指令碼的結果傳回給用戶端事件處理常式。
  傳回值 調用用戶端回調的用戶端函數的名稱。 
  

　　下面是ClientScriptManager.GetCallbackEventReference 方法的重載列表
  
  名稱
說明
  ClientScriptManager.GetCallbackEventReference (Control, String, String,
String) 擷取一個對用戶端函數的引用；調用該函數時，將啟動一個對伺服器端事件的用戶端回調。此重載方法的用戶端函數包含指定的控制項、參數、用戶端指令碼和上下文。

  ClientScriptManager.GetCallbackEventReference (Control, String, String,
String, Boolean)
擷取一個對用戶端函數的引用；調用該函數時，將啟動一個對伺服器端事件的用戶端回調。此重載方法的用戶端函數包含指定的控制項、參數、用戶端指令碼、上下文和布爾值。

  ClientScriptManager.GetCallbackEventReference (Control, String, String,
String, String, Boolean)
擷取一個對用戶端函數的引用；調用該函數時，將啟動一個對伺服器端事件的用戶端回調。此重載方法的用戶端函數包含指定的控制項、參數、用戶端指令碼、上下文、錯誤處理程式和布爾值。

  ClientScriptManager.GetCallbackEventReference (String, String, String,
String, String, Boolean)
擷取一個對用戶端函數的引用；調用該函數時，將啟動一個對伺服器端事件的用戶端回調。此重載方法的用戶端函數包含指定的目標、參數、用戶端指令碼、上下文、錯誤處理程式和布爾值。 

　　主要實現如下：

    在page_load裡加入下面語句

    1callback = Page.ClientScript.GetCallbackEventReference(this,
"arg", "ReceiveServerData", "context");

   
其中，arg就是用來從用戶端傳遞參數，最終傳到enentArguent中，ReceiveServerData是一個用戶端方法，用來接收伺服器端回調過來的資料。

    再把callback這個字串放在第一個用戶端方法下面（請看上面的第一個用戶端方法）

    這個完成後，我們只要把第一個下拉框的onchange用戶端事件加入就可以了，在page_load裡加入

    1TestDropDownList.Attributes["onchange"] =
"javascript:CallServer(TestDropDownList , Item1)";

    做完所有這些，程式應該能夠正常動行了

　　現在二級聯動已經成功，那怎麼能夠實現多級的呢，其實大家只要仔細的看一下，就不難發現，當我觸到一個下拉框的onchange事件，通過callServer讀取值，再通過<%callback%>來啟動
void System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string
eventArguent)這個方法，把資料處理後，通過string
System.Web.UI.ICallbackEventHandler.GetCallbackResult()方法返回，再由ReceiveServerData用戶端來把資料繫結到相應原下拉框中，而這裡的二個互動的下拉框都是通過參數來傳遞的，
TestDropDownList.Attributes["onchange"] =
"javascript:CallServer(TestDropDownList ,
Item1)";　這樣的話，我們可以改變這裡傳遞的控制項參數名，就可以重複利用這四個方法，也就是這樣就可以實現，無限級聯動。我們再加入一個下拉框，取名Item2，我們只要在page_load中加入如下語句即可：

1Item1.Attributes["onchange"] = "javascript:CallServer(Item1 , Item2)";

　　就就可以三級聯動了，如果要四級，五級，只要加入下應的下拉框，並在page_load中加入相應的onchange事件觸發，就可以實現了

　　不過這種方法目前還有一個很大的二個缺點：

    1、那就是當第一個選擇後，第二個下拉框會出現相應的值，而第三個以及下面的幾個不會變，只有再選擇第二個下拉框的值後，第三個才會改變

   
2、由於1的問題，導致如果第二個下拉框中只有一個值，那麼第三個以及以下幾個都不能發生改變了，不知道大家有沒有好的解決方案，我相信應該有解決的方法的。

    由於本人水平有限，可能有不當之處，希望大家能夠指正，謝謝！