用AjaxPro实现二级联动-阿里云开发者社区

开发者社区> 技术小甜> 正文

用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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10065 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13876 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9157 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4654 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4499 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7361 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载