AjaxPro.2.dll级联下拉框，省市县

1.说明AjaxPro.2.dll的简单使用。实现省市县级联下拉框异步刷新。
2. 首先添加引用。在bin->添加引用->添加AjaxPro.2.dll即可。
3. 修改web.config。在System.web和compilation节点之间添加。如下所示：
   

代码

< system.web >
   
     < httpHandlers >
       < add  verb ="POST,GET"   path ="ajaxpro/*.ashx"  type ="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
     </ httpHandlers >
    
     < compilation  debug ="true"  targetFramework ="4.0" />

 

   
4. 在page_load先注册一下，如下所示。注意参数名字为该页面的类名称。
 

 

代码

   public   partial   class  CascadeDropdownlist : System.Web.UI.Page
   {
     protected   void  Page_Load( object  sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax( typeof (CascadeDropdownlist));
。。。。。。

 

5. 添加方法。注意先要添加[AjaxPro.AjaxMethod]。而且在返回城市列表的时候本人返回的是dataset或者datatable，如果返回的是数组或者字符串之类的，那么前台控件绑定的时候会出错。本人也是初学，具体的原理不是很清楚。还望高手指教。

  

代码

  [AjaxPro.AjaxMethod]
     public  DataSet   BindCity( string  ProvinceID)
    {
         string  sql  =   " select * from City where ProvinceID=' "   +  ProvinceID  +   " ' " ;
        db db  =   new  db();
        DataSet ds  =  db.GetDataSet(sql,  " city " );
        db.Close();
         return  ds;
    }

 

6. 前台页面

 

代码

    < body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:DropDownList  ID ="ddlProvince"  runat ="server"   >
         </ asp:DropDownList >
         < asp:DropDownList  ID ="ddlCity"  runat ="server" >
         </ asp:DropDownList >
         < asp:DropDownList  ID ="ddlArea"  runat ="server" >
         </ asp:DropDownList >
     </ div >
     </ form >
</ body >

 

7. JS脚本。这两个方法其实差不多，搞明白一个就基本OK了。起初将列表绑定到下拉框总想用city.Options.Add(new Option(value,text))这样的方法，结果失败了。调用不到。后来改用的下面的写法。
  

代码

  < script language  = " javascript "  type  = " text/javascript "   >
     // 根据省ID绑定市列表
         function  BindCity() {
             var  province  =  document.getElementById( " ddlProvince " );
             var  id  =  province.value;
             var  city  =  document.getElementById( " ddlCity " );
            city.length  =   1 ;
             var  area  =  document.getElementById( " ddlArea " );
            area.length  =   1 ;
             var  ds  =  CascadeDropdownlist.BindCity(id).value;
             if  (ds  !=   null   &&   typeof  (ds)  ==   " object "   &&  ds.Tables  !=   null ) {
                 if  (ds.Tables[ 0 ].Rows.length  >   0 ) {
                     for  ( var  i  =   0 ; i  <  ds.Tables[ 0 ].Rows.length; i ++ ) {
                         var  op  =  document.createElement( " option " );
                        op.setAttribute( " value " ,ds.Tables[ 0 ].Rows[i][ " CityID " ]);
                         var  txt  =  document.createTextNode(ds.Tables[ 0 ].Rows[i][ " City " ]);
                        op.appendChild(txt);
                        city.appendChild(op);
                    }
                }
            }
        }
         // 根据市ID绑定县列表
            function  BindArea() {
             var  city  =  document.getElementById( " ddlCity " );
             var  id  =  city.value;
             var  area  =  document.getElementById( " ddlArea " );
            area.length  =   1 ;
             var  ds  =  CascadeDropdownlist.BindArea(id).value;
             if  (ds  !=   null   &&   typeof  (ds)  ==   " object "   &&  ds.Tables  !=   null ) {
                 if  (ds.Tables[ 0 ].Rows.length  >   0 ) {
                     for  ( var  i  =   0 ; i  <  ds.Tables[ 0 ].Rows.length; i ++ ) {
                         var  op  =  document.createElement( " option " );
                        op.setAttribute( " value " , ds.Tables[ 0 ].Rows[i][ " AreaID " ]);
                         var  txt  =  document.createTextNode(ds.Tables[ 0 ].Rows[i][ " Area " ]);
                        op.appendChild(txt);
                        area.appendChild(op);
                    }
                }
            }
     < / script>

 

OK，至此一个简单的小例子完成了。