用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;
    }
    
}

程序运行效果：
未选择的效果：

选择北京的效果：

选择周公的家乡湖北黄冈的效果：

具体代码很简单，也做了注释，如果还是不懂，请看我的另一篇文章吧。