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

最新推荐文章于 2025-12-07 21:43:11 发布

最新推荐文章于 2025-12-07 21:43:11 发布 · 160 阅读

文章标签：

#ui #javascript #xhtml #ViewUI

本文介绍了一个使用Ajax技术实现的动态双组合功能示例，通过地区选择自动更新对应的城市选项。该示例基于Northwind数据库的Territories表，并详细展示了前端与后端的实现代码。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

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

<head>
4

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

<scripttype="text/javascript"src="doubleCombo.js"></script>
6

<scripttype="text/javascript">

functioninjectComponentBehaviors()
8

{
9

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

}
11

</script>
12

</head>
13

<bodyonload="injectComponentBehaviors()">
14

<formid="form1"action="">
15

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

<br/>
17

地区：<selectid="region"name="region">
18

<optionvalue="-1">PickARegion</option>
19

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

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

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

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

</select>
24

  <br/>
25

<br/>
26

城市：<selectid="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=newnet.ContentLoader(this,url,"POST");
12

this.initiallizeBehavior();
13

}
14

DoubleCombo.prototype=
16

{
17

initiallizeBehavior:function()
18

{
19

varoThis=this;
20

this.master.onchange=function()
21

{
22

variCurrentIndex=oThis.master.selectedIndex;
23

if(parseInt(iCurrentIndex)!=0)
24

{
25

varquery=oThis.master.options[iCurrentIndex].value;
26

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

}
28

}
29

},
30

ajaxUpdate:function(request)
32

{
33

varslaveOptions=this.createOptions(request.responseXML.documentElement);
34

this.slave.length=0;
35

for(vari=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

varnewOptions=newArray();
51

varentries=ajaxResponse.getElementsByTagName("entry");
52

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

{
54

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

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

newOptions.push(newOption(text,value));
57

}
58

returnnewOptions;
59

},
60

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

getElementContent:function(element)
63

{
64

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

}
66

}
67

varnet=newObject();
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

vartransport;
83

//针对Mozilla
84

if(window.XMLHttpRequest)
85

{
86

transport=newXMLHttpRequest();
87

}
88

//针对IE
89

elseif(window.ActiveXObject)
90

{
91

varxmlVersions=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
92

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

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

{
95

try
96

{
97

transport=newActiveXObject(xmlVersions[i]);
98

}
99

catch(oError)
100

{
101

102

}
103

}
104

}
105

returntransport;
106

},
107

108

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

sendRequest:function(arg)
110

{
111

varrequest=this.getTransport();
112

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

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

varoThis=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

usingSystem;
2

usingSystem.Data;
3

usingSystem.Configuration;
4

usingSystem.Collections;
5

usingSystem.Web;
6

usingSystem.Web.Security;
7

usingSystem.Web.UI;
8

usingSystem.Web.UI.WebControls;
9

usingSystem.Web.UI.WebControls.WebParts;
10

usingSystem.Web.UI.HtmlControls;
11

usingSystem.Xml;
12

usingSystem.Data.SqlClient;
13

publicpartialclassDoubleCombo:System.Web.UI.Page
15

{
16

protectedvoidPage_Load(objectsender,EventArgse)
17

{
18

Response.ContentType="text/xml";
19

Response.Charset="utf-8";
20

stringstrRegionId=Request.Form["regionid"];
21

stringstrSql="selectTerritoryDescription,TerritoryIDfromTerritorieswhereregionid='"+strRegionId+"'orderbyTerritoryDescription";
22

DataTabledtOptions=FillDataTable(strSql);
23

XmlDocumentxmlDoc=CreateXMLDoc(dtOptions);
24

Response.Clear();
25

Response.Write(xmlDoc.InnerXml);
26

Response.End();
27

}
28

publicXmlDocumentCreateXMLDoc(DataTabledt)
30

{
31

XmlDocumentxmlDoc=newXmlDocument();
32

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

xmlDoc.AppendChild(xmldecl);
34

XmlElementeRoot=xmlDoc.CreateElement("selectChoice");
35

xmlDoc.AppendChild(eRoot);
36

XmlDocumentFragmentxmlFrage=xmlDoc.CreateDocumentFragment();
37

foreach(DataRowrowindt.Rows)
38

{
39

XmlElementeSelectElement=xmlDoc.CreateElement("entry");
40

eSelectElement.InnerXml="<optionText>"+row["TerritoryDescription"]+"</optionText>";
41

eSelectElement.InnerXml+="<optionValue>"+row["TerritoryID"]+"</optionValue>";
42

xmlFrage.AppendChild(eSelectElement);
43

}
44

eRoot.AppendChild(xmlFrage);
45

returnxmlDoc;
46

}
47

publicDataTableFillDataTable(stringstrSql)
49

{
50

stringstrConn="server=localhost;database=NorthWind;uid=sa;pwd=;";
51

DataSetds=newDataSet();
52

newSqlDataAdapter(strSql,strConn).Fill(ds);
53

returnds.Tables[0];
54

}
55

}
56