`
guanhuaing
  • 浏览: 1189279 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多
1<!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">
7functioninjectComponentBehaviors()
8{
9newDoubleCombo("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&nbsp;&nbsp;<br/>
25<br/>
26城市:<selectid="territory"name="territory"style="width:200px"></select>
27</form>
28</body>
29</html>
30
doubleCombo.js 文件:
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1//doubleCombo.js文件
2//net.ContentLoader负责创建xmlHttpRequest对象,从DoubleCombo对象中获取
3//参数并向服务器发送异步请求;
4//DoubleCombo对象负责根据从服务器端返回的XML文档对选择框内容予以更新
5
6//DoubleCombo对象
7DoubleCombo=function(masterId,slaveId,url)
8{
9this.master=document.getElementById(masterId);
10this.slave=document.getElementById(slaveId);
11this.ajaxHelper=newnet.ContentLoader(this,url,"POST");
12this.initiallizeBehavior();
13}

14
15DoubleCombo.prototype=
16{
17initiallizeBehavior:function()
18{
19varoThis=this;
20this.master.onchange=function()
21{
22variCurrentIndex=oThis.master.selectedIndex;
23if(parseInt(iCurrentIndex)!=0)
24{
25varquery=oThis.master.options[iCurrentIndex].value;
26oThis.ajaxHelper.sendRequest("regionid="+query);
27}

28}

29}
,
30
31ajaxUpdate:function(request)
32{
33varslaveOptions=this.createOptions(request.responseXML.documentElement);
34this.slave.length=0;
35for(vari=0;i<slaveOptions.length;i++)
36{
37try
38{
39this.slave.add(slaveOptions[i],null);
40}

41catch(oError)
42{
43this.slave.add(slaveOptions[i],-1);
44}

45}

46}
,
47
48createOptions:function(ajaxResponse)
49{
50varnewOptions=newArray();
51varentries=ajaxResponse.getElementsByTagName("entry");
52for(vari=0;i<entries.length;i++)
53{
54vartext=this.getElementContent(entries[i].childNodes[0]);
55varvalue=this.getElementContent(entries[i].childNodes[1]);
56newOptions.push(newOption(text,value));
57}

58returnnewOptions;
59}
,
60
61//针对IE和Mozilla的不同处理
62getElementContent:function(element)
63{
64return(element.text!=undefined)?element.text:element.textContent;
65}

66}

67
68varnet=newObject();
69net.ContentLoader=function(component,url,method)
70{
71//Component对象的方法负责更新控件及处理出错
72this.component=component;
73this.url=url;
74this.method=method;
75}

76
77net.ContentLoader.prototype=
78{
79//获取xmlHttpRequest对象
80getTransport:function()
81{
82vartransport;
83//针对Mozilla
84if(window.XMLHttpRequest)
85{
86transport=newXMLHttpRequest();
87}

88//针对IE
89elseif(window.ActiveXObject)
90{
91varxmlVersions=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
92"MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
93for(vari=0;i<xmlVersions.length;i++)
94{
95try
96{
97transport=newActiveXObject(xmlVersions[i]);
98}

99catch(oError)
100{
101
102}

103}

104}

105returntransport;
106}
,
107
108//向服务器发送请求的方法
109sendRequest:function(arg)
110{
111varrequest=this.getTransport();
112request.open(this.method,this.url,true);
113request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
114varoThis=this;
115request.onreadystatechange=function()
116{
117oThis.handleAjaxResponse(request);
118}
;
119request.send(arg);
120}
,
121
122//Ajax的响应方法
123handleAjaxResponse:function(request)
124{
125if(request.readyState==4)
126{
127if(request.status==0||(request.status>=200&&request.status<300))
128{
129this.component.ajaxUpdate(request);
130}

131else
132{
133//出现错误,写系统日志
134}

135}

136}

137}

138
139
140
DoubleCombo.aspx文件代码:
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1usingSystem;
2usingSystem.Data;
3usingSystem.Configuration;
4usingSystem.Collections;
5usingSystem.Web;
6usingSystem.Web.Security;
7usingSystem.Web.UI;
8usingSystem.Web.UI.WebControls;
9usingSystem.Web.UI.WebControls.WebParts;
10usingSystem.Web.UI.HtmlControls;
11usingSystem.Xml;
12usingSystem.Data.SqlClient;
13
14publicpartialclassDoubleCombo:System.Web.UI.Page
15{
16protectedvoidPage_Load(objectsender,EventArgse)
17{
18Response.ContentType="text/xml";
19Response.Charset="utf-8";
20stringstrRegionId=Request.Form["regionid"];
21stringstrSql="selectTerritoryDescription,TerritoryIDfromTerritorieswhereregionid='"+strRegionId+"'orderbyTerritoryDescription";
22DataTabledtOptions=FillDataTable(strSql);
23XmlDocumentxmlDoc=CreateXMLDoc(dtOptions);
24Response.Clear();
25Response.Write(xmlDoc.InnerXml);
26Response.End();
27}

28
29publicXmlDocumentCreateXMLDoc(DataTabledt)
30{
31XmlDocumentxmlDoc=newXmlDocument();
32XmlDeclarationxmldecl=xmlDoc.CreateXmlDeclaration("1.0","utf-8","no");
33xmlDoc.AppendChild(xmldecl);
34XmlElementeRoot=xmlDoc.CreateElement("selectChoice");
35xmlDoc.AppendChild(eRoot);
36XmlDocumentFragmentxmlFrage=xmlDoc.CreateDocumentFragment();
37foreach(DataRowrowindt.Rows)
38{
39XmlElementeSelectElement=xmlDoc.CreateElement("entry");
40eSelectElement.InnerXml="<optionText>"+row["TerritoryDescription"]+"</optionText>";
41eSelectElement.InnerXml+="<optionValue>"+row["TerritoryID"]+"</optionValue>";
42xmlFrage.AppendChild(eSelectElement);
43}

44eRoot.AppendChild(xmlFrage);
45returnxmlDoc;
46}

47
48publicDataTableFillDataTable(stringstrSql)
49{
50stringstrConn="server=localhost;database=NorthWind;uid=sa;pwd=;";
51DataSetds=newDataSet();
52newSqlDataAdapter(strSql,strConn).Fill(ds);
53returnds.Tables[0];
54}

55}

56
分享到:
评论

相关推荐

    一个基于Ajax的通用(组合)查询(ASP.NET)。

    一个基于Ajax的通用(组合)查询(ASP.NET)。

    ASP.NET 控件的使用

    9.3.5 使用ASP.NET的Profile-Parameter对象 281 9.3.6 使用QueryStringParameter对象 282 9.3.7 使用SessionParameter对象 284 9.4 通过程序执行SqlDataSource命令 285 9.4.1 添加ADO.NET参数 285 9.4.2 执行Insert...

    asp.net知识库

    Visual Web Development 2005开发ASP.NET使用小技巧 ASP.NET 2.0 异步页面原理浅析 [1] [原] 自定义通用System.Web.UI.IHierarchicalDataSource简单实现 在 ASP.NET 2.0 中创建 Web 应用程序主题 ASP.NET 2.0 中的...

    ajax asp.net通用查询

    多条件无刷新查询示例源码。可以按照选择的字段(编号、日期等)进行特殊格式的查询,并可以增加条件任意组合查询。vs2010测试无错。

    ASP.NET.4揭秘

    9.3 在sqldatasource控件中使用asp.net参数308 9.3.1 使用asp.net参数对象308 9.3.2 使用asp.net的controlparameter对象311 9.3.3 使用asp.net的cookieparameter对象315 9.3.4 使用asp.net的formparameter对象317 ...

    庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术

    第1章 服务器控件概述及开发环境部署 .1 1.1 自定义服务器控件 1 1.2 服务器控件在软件开发过程中的作用 1 ...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    ASP.NET4高级程序设计(第4版) 3/3

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    asp.net验证码控件

    拖入即可应用!!!!!!一、控件特点: 1、使用... 5、有数字、小写字母、大写字母三种及任意两种组合、三种组合字符选择。 6、兼容IE及FireFox。 二、使用说明。 1、属性。 IsMatch:指示用户输入的验证码是否正确

    庖丁解牛纵向切入ASP.NET 3.5控件和组件开发技术.pdf

    对大部分使用asp.net技术开发两年左右的开发人员来说,本书75%以上的内容可能没有接触过,本书将通过笔者精心准备的一些生动的例子来阐述这些内容。.  本书适合从事asp.net技术多年想往深度理解asp.net工作机制的...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646

    ASP.NET 验证码控件及其好用【推荐】

    ASP.NET 验证码控件及其好用【推荐】 网上寻的 一、控件特点: 1、使用方便,只需要从工具栏直接拖到页面即可自动验证,零代码使用。 2、自动完成客户端以及服务器的验证码验证,Ajax验证,随用户输入即时 验证...

    亮剑.NET深入体验与实战精要2

    8.2.1 安装ASP.NET 2.0 Ajax Extensions 333 8.2.2 创建ASP.NET Ajax应用程序 333 8.2.3 ScriptManager控件使用技巧 335 8.2.4 UpdaetPanel控件使用技巧 336 8.2.5 AsyncPostBackTrigger实现 外部控件引发局部刷新...

    Telerik_UI_for_ASP.NET_AJAX_2018

    新增: MaxJsonLength增加到int.MaxValue 支持Encryption Algorithm 4 为获取和设置Underline新增SpreadsheetRange公开方法 ...修复用于RadGrid的CombinedScript.js中的CDN脚本组合 其他一些小的修复

    Microsoft .NET Framework 3.5 Service Pack 1

    ASP.NET AJAX 的一项新增功能,对管理浏览器历史记录提供了支持(支持后退按钮)。有关更多信息,请参见 What’s New in ASP.NET and Web Development(ASP.NET 和 Web 开发中的新增功能)。 对公共语言运行时的...

    亮剑.NET深入体验与实战精要3

    8.2.1 安装ASP.NET 2.0 Ajax Extensions 333 8.2.2 创建ASP.NET Ajax应用程序 333 8.2.3 ScriptManager控件使用技巧 335 8.2.4 UpdaetPanel控件使用技巧 336 8.2.5 AsyncPostBackTrigger实现 外部控件引发局部刷新...

Global site tag (gtag.js) - Google Analytics