用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;
    }
    
}
程序运行效果:
未选择的效果:

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









本文转自周金桥51CTO博客,原文链接: http://blog.51cto.com/zhoufoxcn/167042 ,如需转载请自行联系原作者
相关文章
|
2月前
|
JavaScript
layui二级联动
layui二级联动
|
10月前
|
JavaScript 索引
jQuery 隔行变色
jQuery 隔行变色
38 0
|
7月前
|
前端开发 JavaScript
bootstrapValidator的使用
bootstrapValidator的使用
41 0
|
12月前
|
JavaScript
简单的二级联动效果
简单的二级联动效果
55 0
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
165 0
|
XML JavaScript 前端开发
jqGrid 详解大全
jqGrid 各种参数 详解 JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。
3515 0
|
前端开发 JavaScript
dwz中对jqGrid设置a标签
dwz中对jqGrid设置a标签
153 0
dwz中对jqGrid设置a标签
|
Web App开发 JavaScript 前端开发
javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName()
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。 (1)getElementById():                       getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
1186 0