用AjaxPro實現二級聯動

在實際asp.net項目中常常會遇到無刷新二級或者N級(N>=2)聯動狀況，其實N級聯動和二級聯動的原理都是同樣的，實現這種辦法有不少，一種是純腳本實現（動態生成Array數組），一種 是採用微軟的Ajax.net中的UpdatePanel來實現，今天我給你們來展現如何採用AjaxPro來實現，相關文章請參考 http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx《AjaxPro與服務器端交互過程當中如何傳值》一文。

前臺aspx頁面：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Test.aspx.cs "  Inherits = " Test "   %>

<! DOCTYPE html PUBLIC  " -//W3C//Dtd XHTML 1.0 Transitional//EN "   " http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > AjaxPro實現二級聯動 </ title >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < table width = " 200 "  border = " 0 "  align = " center "  cellpadding = " 3 "  cellspacing = " 1 "  bordercolor = " #FFFFFF "  style = " border-collapse: collapse " >
                                 < tr align = " center " >
                                   < td height = " 20 "  colspan = " 2 " >
                                       < strong > AjaxPro實現二級聯動 </ strong >& nbsp; </ td >
                                 </ tr >
                                 < tr  class = " tdbg "   >
                                   < td width = " 30% " >
                                      省份 </ td >
                                   < td width = " 70% "  align = " left " >
                                           < asp:DropDownList ID = " ddlStateList "  runat = " server "  DataTextField = " StateName "  DataValueField = " StateId " >
                                           </ asp:DropDownList ></ td >
                                 </ tr >
                                 < tr  class = " tdbg "   >
                                   < td >< strong > 城市 </ strong ></ td >
                                   < td align = " left " >
                                           < asp:DropDownList ID = " ddlCityList "  runat = " server " >
                                           </ asp:DropDownList ></ td >
                                 </ tr >
                               </ table >
    
     </ div >
     < script language = " javascript "  type = " text/javascript "  defer = " defer " >  
    function ShowCity(id)
    {
        var res = Test.GetCityList(parseInt(id)).value;
        var ddl = document.getElementById( " <%=ddlCityList.UniqueID %> " );
        ddl.length = 0 ;
         if (res)
        {
             // res是服務器返回的一個List<City>集合
             for (var i = 0 ;i < res.length;i ++ )
            {
                ddl.options.add( new  Option(res[i].CityName,res[i].CityId));
                 // 從上面能夠看出能夠直接調用List<City>集合中的元素和它們的屬性
            }
        }
    }
</ script >
     </ form >
</ body >
</ html >

後臺.cs代碼，注意爲了省事，我把兩個實體類也一同歸併到一個.cs文件中了。
Test.cs

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


/* *
 * 寫做說明：本文展現瞭如何利用AjaxPro與服務器交互，而且還展現了在Js中能夠直接調用服務器返回的集合和直接調用服務器上class的屬性
 * 做者：周公
 * 日期：2008-1-1
 * 首發地址： http://blog.csdn.net/zhoufoxcn/
 * */
public   partial   class  Test : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! Page.IsPostBack)
        {
            List < State >  stateList  =   new  List < State > ( 10 );
            stateList.Add( new  State( 0 ,  " 選擇城市 " )); // 默認選項
            stateList.Add( new  State( 1 , " 北京 " ));
            stateList.Add( new  State( 2 ,  " 天津 " ));
            stateList.Add( new  State( 3 ,  " 上海 " ));
            stateList.Add( new  State( 4 ,  " 湖北 " ));
            stateList.Add( new  State( 5 ,  " 湖南 " ));
            stateList.Add( new  State( 6 ,  " 山西 " ));
            ddlStateList.DataSource  =  stateList;
            ddlStateList.DataBind();
            ddlStateList.Attributes[ " onchange " ]  =   " ShowCity(this.options[selectedIndex].value) " ;
        }
        AjaxPro.Utility.RegisterTypeForAjax( typeof (Test)); // 註冊
    }
    [AjaxPro.AjaxMethod]
     public  List < City >  GetCityList( int  stateId)
    {
         // 呵呵，都是我熟悉的城市或者區
        List < City >  cityList  =   new  List < City > ( 12 );
        cityList.Add( new  City( 11 ,  " 海淀區 " ,  1 ));
        cityList.Add( new  City( 12 ,  " 朝陽區 " ,  1 ));
        cityList.Add( new  City( 13 ,  " 大港區 " ,  2 ));
        cityList.Add( new  City( 14 ,  " 南開區 " ,  2 ));
        cityList.Add( new  City( 15 ,  " 普陀區 " ,  3 ));
        cityList.Add( new  City( 16 ,  " 黃浦區 " ,  3 ));
        cityList.Add( new  City( 17 ,  " 黃岡市 " ,  4 ));
        cityList.Add( new  City( 18 ,  " 荊州市 " ,  4 ));
        cityList.Add( new  City( 19 ,  " 長沙市 " ,  5 ));
        cityList.Add( new  City( 20 ,  " 岳陽市 " ,  5 ));
        cityList.Add( new  City( 21 ,  " 太原市 " ,  6 ));
        cityList.Add( new  City( 22 ,  " 大同市 " ,  6 ));
        List < City >  tempList  =   new  List < City > ();
         for  ( int  i  =   0 ; i  <  cityList.Count; i ++ )
        {
             if  (cityList[i].StateId  ==  stateId)
            {
                tempList.Add(cityList[i]);
            }
        }
         return  tempList;
    }
}
///   <summary>
///  省份信息
///   </summary>
public   class  State
{
     private   int  stateId;
     private   string  stateName;
     ///   <summary>
     ///  省份名
     ///   </summary>
     public   string  StateName
    {
         get  {  return  stateName; }
         set  { stateName  =  value; }
    }
    
     ///   <summary>
     ///  省份編號
     ///   </summary>
     public   int  StateId
    {
         get  {  return  stateId; }
         set  { stateId  =  value; }
    }
     public  State( int  stateId,  string  stateName)
    {
         this .stateId  =  stateId;
         this .stateName  =  stateName;
    }
}
///   <summary>
///  城市信息
///   </summary>
public   class  City
{
     private   int  cityId;
     private   int  stateId;
     private   string  cityName;
     ///   <summary>
     ///  城市名稱
     ///   </summary>
     public   string  CityName
    {
         get  {  return  cityName; }
         set  { cityName  =  value; }
    }
    
     ///   <summary>
     ///  城市所在省份編號
     ///   </summary>
     public   int  StateId
    {
         get  {  return  stateId; }
         set  { stateId  =  value; }
    }
    
     ///   <summary>
     ///  城市編號
     ///   </summary>
     public   int  CityId
    {
         get  {  return  cityId; }
         set  { cityId  =  value; }
    }

     public  City( int  cityId,  string  cityName,  int  stateId)
    {
         this .cityId  =  cityId;
         this .cityName  =  cityName;
         this .stateId  =  stateId;
    }
    
}

程序運行效果：

未選擇的效果：

具體代碼很簡單，也作了註釋，若是仍是不懂，請看個人另外一篇文章吧。