Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/16 2:54:58
用AjaxPro实现二级联动_[AJAX教程]

用AjaxPro实现二级联动_[AJAX教程]

















在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况,其实N级联动和二级联动的原理都是一样的,实现这种办法有很多,一种是纯脚本实现(动态生成Array数组),一种 是采用微软的Ajax.net中的UpdatePanel来实现,今天我给大家来展示如何采用AjaxPro来实现,相关文章请参考《AjaxPro与服务器端交互过程中如何传值》一文。




前台aspx页面:







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





AjaxPro实现二级联动







AjaxPro实现二级联动&nbsp;



省份





城市










后台.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 stateList = new List(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 GetCityList(int stateId)
{
//呵呵,都是我熟悉的城市或者区
List cityList = new List(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 tempList = new List();
for (int i = 0; i < cityList.Count; i++)
{
if (cityList[i].StateId == stateId)
{
tempList.Add(cityList[i]);
}
}
return tempList;
}
}
///
/// 省份信息
///

public class State
{
private int stateId;
private string stateName;
///
/// 省份名
///

public string StateName
{
get { return stateName; }
set { stateName = value; }
}

///
/// 省份编号
///

public int StateId
{
get { return stateId; }
set { stateId = value; }
}
public State(int stateId, string stateName)
{
this.stateId = stateId;
this.stateName = stateName;
}
}
///
/// 城市信息
///

public class City
{
private int cityId;
private int stateId;
private string cityName;
///
/// 城市名称
///

public string CityName
{
get { return cityName; }
set { cityName = value; }
}

///
/// 城市所在省份编号
///

public int StateId
{
get { return stateId; }
set { stateId = value; }
}

///
/// 城市编号
///

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

}



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

选择北京的效果:






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




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

来源:http://blog.csdn.net/zhoufoxcn

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759