关于无刷新联动,目前实现的方法有很多种,可以使用XMLHttpRequest对象来实现,也可以采用Ajax Library,另外也可以使用AjaxControlToolkit里的控件来实现.刚刚这些天在一个项目里使用到了这个功能.下面简单介绍下实现的思路.希望对初学者在学习上有所帮助.
通常联动又分静态联动（数据不变）和动态联动（数据会变动），比如省市区县这里固定数据就是很少变动的。又比如一个公司里，下面分得有不同的部分，各部门下又可能有不能的小组......这样的关系，各个小组都有可能随时都会变动的，撤消也可能会增加小组等。下面我就一动态联动简单介绍下。
准备工作：
● 建立数据库
Code
1
USE AJAX
2if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Citys]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
3drop table [dbo].[Citys]
4GO
5
6if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Districts]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
7drop table [dbo].[Districts]
8GO
9
10CREATE TABLE [dbo].[Citys] (
11 [CityID] [int] IDENTITY (1, 1) NOT NULL ,
12 [CityName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL
13) ON [PRIMARY]
14GO
15
16CREATE TABLE [dbo].[Districts] (
17 [DistrictID] [int] IDENTITY (1, 1) NOT NULL ,
18 [DistrictName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
19 [CityID] [int] NULL
20) ON [PRIMARY]
21GO
22
23 ● 初始化数据
● 建立相关类和WebService
City
1public class City
2
{
3
public City() { }
4
public City(int id, string name)
5 {
6 this.CityId = id;
7 this.CityName = name;
8
}
9
10 private int _cityId;
11 public int CityId
12 {
13 get { return _cityId; }
14 set { _cityId = value; }
15 }
16
17 private string _cityName;
18 public string CityName
19 {
20 get { return _cityName; }
21 set { _cityName = value; }
22 }
23
}
District
1public class District
2{
3 public District(){ }
4 public District(int id, string name,int cid)
5 {
6 this.DistrictId = id;
7 this.DistrictName = name;
8 this.CityID = cid;
9 }
10
11 private int _districtId;
12 public int DistrictId
13 {
14 get { return _districtId; }
15 set { _districtId = value; }
16 }
17
18 private string _districtName;
19 public string DistrictName
20 {
21 get { return _districtName; }
22 set { _districtName = value; }
23 }
24
25 private int _cityID;
26 public int CityID
27 {
28 get { return _cityID; }
29 set { _cityID = value; }
30 }
31}
AjaxPattern.WebService
1namespace AjaxPattern
2{
3 /**//// <summary>
4 /// WebService 的摘要说明
5 /// </summary>
6 [WebService(Namespace = "http://tempuri.org/")]
7 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
8 [ScriptService]
9 public class WebService : System.Web.Services.WebService
10 {
11
12 public WebService() { }
13
14 [WebMethod]
15 public City[] GetCitys()
16 {
17 List<City> list = new List<City>();
18 DataTable dt = DataAccess.GetCitys();
19 foreach (DataRow row in dt.Rows)
20 {
21 list.Add(new City(
22 int.Parse(row["CityID"].ToString()),
23 row["CityName"].ToString()));
24 }
25 return list.ToArray();
26 }
27
28 [WebMethod]
29 public District[] GetDistricts(int cityID)
30 {
31 List<District> list = new List<District>();
32 DataTable dt = DataAccess.GetDistricts(cityID);
33 foreach (DataRow row in dt.Rows)
34 {
35 list.Add(new District(
36 int.Parse(row["DistrictID"].ToString()),
37 row["DistrictName"].ToString(),
38 int.Parse(row["CityID"].ToString())));
39 }
40 return list.ToArray();
41 }
42 }
43}
一、使用XMLHttpRequest实现
建立两个aspx文件，AjaxClient.asp,AjaxServer.aspx，下面是两个文件的CS代码定义：
1public partial class AjaxClient : System.Web.UI.Page
2{
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 if (!IsPostBack)
6 {
7 this.ddlCitys.DataSource = new WebService().GetCitys();
8 this.ddlCitys.DataTextField = "CityName";
9 this.ddlCitys.DataValueField = "CityID";
10 this.ddlCitys.DataBind();
11 ddlCitys.Items.Insert(0, new ListItem("--请选择--", "0"));
12 ddlDistricts.Items.Insert(0, new ListItem("--请选择--", "0"));
13
14 this.ddlCitys.Attributes.Add("onchange", "getDistrictByCityID(this.value);");
15 this.ddlDistricts.Attributes.Add("onchange", "displayResults();");
16 }
17 }
18}
在AjaxClient.aspx里放置了两个下拉列表控件，一个用来显示城市，一个用来显示区。在AjaxClient的服务端我们为城市绑定好数据，这里是通过调用WebService里的GetCitys()得到的一个数组，详细可以看上面的WebService的详细定义代码，这里我们还为这两个控件设置了客户端事件及响应事件的方法。下面我们看看AjaxServer.aspx的定义：
1public partial class AjaxServer : System.Web.UI.Page
2{
3 protected void Page_Load(object sender, EventArgs e)
4