沈瑞华的博客

专注于.net

统计

随笔 - 53
文章 - 2
评论 - 30
引用 - 1

公告

正在阅读

我的QQ：247467836

与我联系

发短消息

搜索

常用链接

我的随笔
我的空间
我的短信
我的评论
更多链接

我的参与
我的新闻
最新评论
我的标签

留言簿

给我留言
查看留言

随笔分类

Ajax(12) (rss)
Asp.Net(13) (rss)
CSS(1) (rss)
Javascript(16) (rss)
Web Service(3) (rss)
XML(6) (rss)

随笔档案

2007年10月 (20)
2007年9月 (7)
2007年7月 (3)
2007年6月 (4)
2007年5月 (18)

收藏夹

.net (rss)

ajax

Dflying Chen

asp.net

开源之家
天轰穿
张老三

积分与排名

积分 - 14038
排名 - 2738

阅读排行榜

1. Ajax自动提示功能（改造自《Ajax实战》）(1282)
2. 使用asp.net操作Cookies(1052)
3. 使用XmlReader类读取XML文件(825)
4. 通用的net.ContentLoader对象(791)
5. Ajax的实现原理（asp.net ajax读书笔记）(714)

评论排行榜

1. 微软的东西真变态(6)
2. Ajax自动提示功能（改造自《Ajax实战》）(5)
3. 通用的net.ContentLoader对象(4)
4. 关于updatepanel与FileUpload的问题(3)
5. 使用XmlWriter写入XML数据(3)

使用Ajax实现动态双组合功能(asp.net)

HTMLPage.htm文件内容：
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml" >
3

<head>
4

<title>使用Ajax实现动态双组合功能</title>
5

function injectComponentBehaviors()
8

{
9

new DoubleCombo("region","territory","DoubleCombo.aspx");
10

}
11

</script>
12

</head>
13

<body onload="injectComponentBehaviors()">
14

<form id="form1" action="">
15

示例：使用Ajax实现动态双组合功能（数据来自Northwind的Territories表）<br />
16

<br />
17

地区：<select id="region" name="region">
18

<option value="-1">Pick A Region</option>
19

<option value="1">Eastern</option>
20

<option value="2">Western</option>
21

<option value="3">Northern</option>
22

<option value="4">Southern</option>
23

</select>
24

  <br />
25

<br />
26

城市：<select id="territory" name="territory" style="width:200px"></select>
27

</form>
28

</body>
29

</html>
30

doubleCombo.js 文件:
1

// doubleCombo.js 文件
2

//net.ContentLoader负责创建xmlHttpRequest对象，从DoubleCombo对象中获取
3

//参数并向服务器发送异步请求;
4

//DoubleCombo对象负责根据从服务器端返回的XML文档对选择框内容予以更新
5

//DoubleCombo对象
7

DoubleCombo = function (masterId,slaveId,url)
8

{
9

this.master = document.getElementById(masterId);
10

this.slave = document.getElementById(slaveId);
11

this.ajaxHelper = new net.ContentLoader(this,url,"POST");
12

this.initiallizeBehavior();
13

}
14

DoubleCombo.prototype =
16

{
17

initiallizeBehavior:function()
18

{
19

var oThis = this;
20

this.master.onchange = function()
21

{
22

var iCurrentIndex = oThis.master.selectedIndex;
23

if(parseInt(iCurrentIndex) != 0)
24

{
25

var query = oThis.master.options[iCurrentIndex].value;
26

oThis.ajaxHelper.sendRequest("regionid="+query);
27

}
28

}
29

},
30

ajaxUpdate:function(request)
32

{
33

var slaveOptions = this.createOptions(request.responseXML.documentElement);
34

this.slave.length = 0;
35

for(var i =0;i<slaveOptions.length;i++)
36

{
37

try
38

{
39

this.slave.add(slaveOptions[i],null);
40

}
41

catch(oError)
42

{
43

this.slave.add(slaveOptions[i],-1);
44

}
45

}
46

},
47

createOptions:function(ajaxResponse)
49

{
50

var newOptions =new Array();
51

var entries = ajaxResponse.getElementsByTagName("entry");
52

for(var i = 0;i<entries.length;i++)
53

{
54

var text = this.getElementContent(entries[i].childNodes[0]);
55

var value =this.getElementContent(entries[i].childNodes[1]);
56

newOptions.push(new Option(text,value));
57

}
58

return newOptions;
59

},
60

//针对IE和Mozilla的不同处理
62

getElementContent:function(element)
63

{
64

return (element.text != undefined) ? element.text:element.textContent;
65

}
66

}
67

var net = new Object();
69

net.ContentLoader = function (component,url,method)
70

{
71

//Component对象的方法负责更新控件及处理出错
72

this.component = component;
73

this.url = url;
74

this.method = method;
75

}
76

net.ContentLoader.prototype =
78

{
79

//获取xmlHttpRequest对象
80

getTransport:function()
81

{
82

var transport;
83

//针对Mozilla
84

if(window.XMLHttpRequest)
85

{
86

transport = new XMLHttpRequest();
87

}
88

//针对IE
89

else if(window.ActiveXObject)
90

{
91

var xmlVersions = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
92

"MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
93

for(var i = 0;i<xmlVersions.length;i++)
94

{
95

try
96

{
97

transport = new ActiveXObject(xmlVersions[i]);
98

}
99

catch(oError)
100

{
101

102

}
103

}
104

}
105

return transport;
106

},
107

108

//向服务器发送请求的方法
109

sendRequest:function(arg)
110

{
111

var request = this.getTransport();
112

request.open(this.method,this.url,true);
113

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
114

var oThis = this;
115

request.onreadystatechange = function()
116

{
117

oThis.handleAjaxResponse(request);
118

};
119

request.send(arg);
120

},
121

122

//Ajax的响应方法
123

handleAjaxResponse:function(request)
124

{
125

if(request.readyState == 4)
126

{
127

if(request.status == 0 || (request.status >= 200 && request.status < 300))
128

{
129

this.component.ajaxUpdate(request);
130

}
131

else
132

{
133

//出现错误，写系统日志
134

}
135

}
136

}
137

}
138

139

140

DoubleCombo.aspx文件代码：
1

using System;
2

using System.Data;
3

using System.Configuration;
4

using System.Collections;
5

using System.Web;
6

using System.Web.Security;
7

using System.Web.UI;
8

using System.Web.UI.WebControls;
9

using System.Web.UI.WebControls.WebParts;
10

using System.Web.UI.HtmlControls;
11

using System.Xml;
12

using System.Data.SqlClient;
13

public partial class DoubleCombo : System.Web.UI.Page
15

{
16

protected void Page_Load(object sender, EventArgs e)
17

{
18

Response.ContentType = "text/xml";
19

Response.Charset = "utf-8";
20

string strRegionId = Request.Form["regionid"];
21

string strSql = "select TerritoryDescription,TerritoryID from Territories where regionid='" + strRegionId + "' order by TerritoryDescription";
22

DataTable dtOptions = FillDataTable(strSql);
23

XmlDocument xmlDoc = CreateXMLDoc(dtOptions);
24

Response.Clear();
25

Response.Write(xmlDoc.InnerXml);
26

Response.End();
27

}
28

public XmlDocument CreateXMLDoc(DataTable dt)
30

{
31

XmlDocument xmlDoc = new XmlDocument();
32

XmlDeclaration xmldecl = xmlDoc.CreateXmlDeclaration("1.0", "utf-8","no");
33

xmlDoc.AppendChild(xmldecl);
34

XmlElement eRoot= xmlDoc.CreateElement("selectChoice");
35

xmlDoc.AppendChild(eRoot);
36

XmlDocumentFragment xmlFrage = xmlDoc.CreateDocumentFragment();
37

foreach (DataRow row in dt.Rows)
38