使用Ajax实现动态双组合功能(asp.net)
2016-09-19 08:20
477 查看
HTMLPage.htm文件内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>使用Ajax实现动态双组合功能</title>
<script type="text/javascript" src="doubleCombo.js"></script>
<script type="text/javascript">
function injectComponentBehaviors()
{
new DoubleCombo("region","territory","DoubleCombo.aspx");
}
</script>
</head>
<body onload="injectComponentBehaviors()">
<form id="form1" action="">
示例：使用Ajax实现动态双组合功能（数据来自Northwind的Territories表）<br />
<br />
地区：<select id="region" name="region">
<option value="-1">Pick A Region</option>
<option value="1">Eastern</option>
<option value="2">Western</option>
<option value="3">Northern</option>
<option value="4">Southern</option>
</select>
<br />
<br />
城市：<select id="territory" name="territory" style="width:200px"></select>
</form>
</body>
</html>
doubleCombo.js 文件:
// doubleCombo.js 文件
//net.ContentLoader负责创建xmlHttpRequest对象，从DoubleCombo对象中获取
//参数并向服务器发送异步请求;
//DoubleCombo对象负责根据从服务器端返回的XML文档对选择框内容予以更新
//DoubleCombo对象
DoubleCombo = function (masterId,slaveId,url)
{
this.master = document.getElementById(masterId);
this.slave = document.getElementById(slaveId);
this.ajaxHelper = new net.ContentLoader(this,url,"POST");
this.initiallizeBehavior();
}
DoubleCombo.prototype =
{
initiallizeBehavior:function()
{
var oThis = this;
this.master.onchange = function()
{
var iCurrentIndex = oThis.master.selectedIndex;
if(parseInt(iCurrentIndex) != 0)
{
var query = oThis.master.options[iCurrentIndex].value;
oThis.ajaxHelper.sendRequest("regionid="+query);
}
}
},
ajaxUpdate:function(request)
{
var slaveOptions = this.createOptions(request.responseXML.documentElement);
this.slave.length = 0;
for(var i =0;i<slaveOptions.length;i++)
{
try
{
this.slave.add(slaveOptions[i],null);
}
catch(oError)
{
this.slave.add(slaveOptions[i],-1);
}
}
},
createOptions:function(ajaxResponse)
{
var newOptions =new Array();
var entries = ajaxResponse.getElementsByTagName("entry");
for(var i = 0;i<entries.length;i++)
{
var text = this.getElementContent(entries[i].childNodes[0]);
var value =this.getElementContent(entries[i].childNodes[1]);
newOptions.push(new Option(text,value));
}
return newOptions;
},
//针对IE和Mozilla的不同处理
getElementContent:function(element)
{
return (element.text != undefined) ? element.text:element.textContent;
}
}
var net = new Object();
net.ContentLoader = function (component,url,method)
{
//Component对象的方法负责更新控件及处理出错
this.component = component;
this.url = url;
this.method = method;
}
net.ContentLoader.prototype =
{
//获取xmlHttpRequest对象
getTransport:function()
{
var transport;
//针对Mozilla
if(window.XMLHttpRequest)
{
transport = new XMLHttpRequest();
}
//针对IE
else if(window.ActiveXObject)
{
var xmlVersions = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0;i<xmlVersions.length;i++)
{
try
{
transport = new ActiveXObject(xmlVersions[i]);
}
catch(oError)
{
}
}
}
return transport;
},
//向服务器发送请求的方法
sendRequest:function(arg)
{
var request = this.getTransport();
request.open(this.method,this.url,true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var oThis = this;
request.onreadystatechange = function()
{
oThis.handleAjaxResponse(request);
};
request.send(arg);
},
//Ajax的响应方法
handleAjaxResponse:function(request)
{
if(request.readyState == 4)
{
if(request.status == 0 || (request.status >= 200 && request.status < 300))
{
this.component.ajaxUpdate(request);
}
else
{
//出现错误，写系统日志
}
}
}
}
DoubleCombo.aspx文件代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Xml;
using System.Data.SqlClient;
public partial class DoubleCombo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/xml";
Response.Charset = "utf-8";
string strRegionId = Request.Form["regionid"];
string strSql = "select TerritoryDescription,TerritoryID from Territories where regionid='" + strRegionId + "' order by TerritoryDescription";
DataTable dtOptions = FillDataTable(strSql);
XmlDocument xmlDoc = CreateXMLDoc(dtOptions);
Response.Clear();
Response.Write(xmlDoc.InnerXml);
Response.End();
}
public XmlDocument CreateXMLDoc(DataTable dt)
{
XmlDocument xmlDoc = new XmlDocument();
XmlDeclaration xmldecl = xmlDoc.CreateXmlDeclaration("1.0", "utf-8","no");
xmlDoc.AppendChild(xmldecl);
XmlElement eRoot= xmlDoc.CreateElement("selectChoice");
xmlDoc.AppendChild(eRoot);
XmlDocumentFragment xmlFrage = xmlDoc.CreateDocumentFragment();
foreach (DataRow row in dt.Rows)
{
XmlElement eSelectElement = xmlDoc.CreateElement("entry");
eSelectElement.InnerXml = "<optionText>" + row["TerritoryDescription"] + "</optionText>";
eSelectElement.InnerXml += "<optionValue>" + row["TerritoryID"] + "</optionValue>";
xmlFrage.AppendChild(eSelectElement);
}
eRoot.AppendChild(xmlFrage);
return xmlDoc;
}
public DataTable FillDataTable(string strSql)
{
string strConn = "server=localhost;database=NorthWind;uid=sa;pwd=;";
DataSet ds = new DataSet();
new SqlDataAdapter(strSql, strConn).Fill(ds);
return ds.Tables[0];
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>使用Ajax实现动态双组合功能</title>
<script type="text/javascript" src="doubleCombo.js"></script>
<script type="text/javascript">
function injectComponentBehaviors()
{
new DoubleCombo("region","territory","DoubleCombo.aspx");
}
</script>
</head>
<body onload="injectComponentBehaviors()">
<form id="form1" action="">
示例：使用Ajax实现动态双组合功能（数据来自Northwind的Territories表）<br />
<br />
地区：<select id="region" name="region">
<option value="-1">Pick A Region</option>
<option value="1">Eastern</option>
<option value="2">Western</option>
<option value="3">Northern</option>
<option value="4">Southern</option>
</select>
<br />
<br />
城市：<select id="territory" name="territory" style="width:200px"></select>
</form>
</body>
</html>
doubleCombo.js 文件:
// doubleCombo.js 文件
//net.ContentLoader负责创建xmlHttpRequest对象，从DoubleCombo对象中获取
//参数并向服务器发送异步请求;
//DoubleCombo对象负责根据从服务器端返回的XML文档对选择框内容予以更新
//DoubleCombo对象
DoubleCombo = function (masterId,slaveId,url)
{
this.master = document.getElementById(masterId);
this.slave = document.getElementById(slaveId);
this.ajaxHelper = new net.ContentLoader(this,url,"POST");
this.initiallizeBehavior();
}
DoubleCombo.prototype =
{
initiallizeBehavior:function()
{
var oThis = this;
this.master.onchange = function()
{
var iCurrentIndex = oThis.master.selectedIndex;
if(parseInt(iCurrentIndex) != 0)
{
var query = oThis.master.options[iCurrentIndex].value;
oThis.ajaxHelper.sendRequest("regionid="+query);
}
}
},
ajaxUpdate:function(request)
{
var slaveOptions = this.createOptions(request.responseXML.documentElement);
this.slave.length = 0;
for(var i =0;i<slaveOptions.length;i++)
{
try
{
this.slave.add(slaveOptions[i],null);
}
catch(oError)
{
this.slave.add(slaveOptions[i],-1);
}
}
},
createOptions:function(ajaxResponse)
{
var newOptions =new Array();
var entries = ajaxResponse.getElementsByTagName("entry");
for(var i = 0;i<entries.length;i++)
{
var text = this.getElementContent(entries[i].childNodes[0]);
var value =this.getElementContent(entries[i].childNodes[1]);
newOptions.push(new Option(text,value));
}
return newOptions;
},
//针对IE和Mozilla的不同处理
getElementContent:function(element)
{
return (element.text != undefined) ? element.text:element.textContent;
}
}
var net = new Object();
net.ContentLoader = function (component,url,method)
{
//Component对象的方法负责更新控件及处理出错
this.component = component;
this.url = url;
this.method = method;
}
net.ContentLoader.prototype =
{
//获取xmlHttpRequest对象
getTransport:function()
{
var transport;
//针对Mozilla
if(window.XMLHttpRequest)
{
transport = new XMLHttpRequest();
}
//针对IE
else if(window.ActiveXObject)
{
var xmlVersions = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0;i<xmlVersions.length;i++)
{
try
{
transport = new ActiveXObject(xmlVersions[i]);
}
catch(oError)
{
}
}
}
return transport;
},
//向服务器发送请求的方法
sendRequest:function(arg)
{
var request = this.getTransport();
request.open(this.method,this.url,true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var oThis = this;
request.onreadystatechange = function()
{
oThis.handleAjaxResponse(request);
};
request.send(arg);
},
//Ajax的响应方法
handleAjaxResponse:function(request)
{
if(request.readyState == 4)
{
if(request.status == 0 || (request.status >= 200 && request.status < 300))
{
this.component.ajaxUpdate(request);
}
else
{
//出现错误，写系统日志
}
}
}
}
DoubleCombo.aspx文件代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Xml;
using System.Data.SqlClient;
public partial class DoubleCombo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/xml";
Response.Charset = "utf-8";
string strRegionId = Request.Form["regionid"];
string strSql = "select TerritoryDescription,TerritoryID from Territories where regionid='" + strRegionId + "' order by TerritoryDescription";
DataTable dtOptions = FillDataTable(strSql);
XmlDocument xmlDoc = CreateXMLDoc(dtOptions);
Response.Clear();
Response.Write(xmlDoc.InnerXml);
Response.End();
}
public XmlDocument CreateXMLDoc(DataTable dt)
{
XmlDocument xmlDoc = new XmlDocument();
XmlDeclaration xmldecl = xmlDoc.CreateXmlDeclaration("1.0", "utf-8","no");
xmlDoc.AppendChild(xmldecl);
XmlElement eRoot= xmlDoc.CreateElement("selectChoice");
xmlDoc.AppendChild(eRoot);
XmlDocumentFragment xmlFrage = xmlDoc.CreateDocumentFragment();
foreach (DataRow row in dt.Rows)
{
XmlElement eSelectElement = xmlDoc.CreateElement("entry");
eSelectElement.InnerXml = "<optionText>" + row["TerritoryDescription"] + "</optionText>";
eSelectElement.InnerXml += "<optionValue>" + row["TerritoryID"] + "</optionValue>";
xmlFrage.AppendChild(eSelectElement);
}
eRoot.AppendChild(xmlFrage);
return xmlDoc;
}
public DataTable FillDataTable(string strSql)
{
string strConn = "server=localhost;database=NorthWind;uid=sa;pwd=;";
DataSet ds = new DataSet();
new SqlDataAdapter(strSql, strConn).Fill(ds);
return ds.Tables[0];
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Spring AOP AspectJ切入点表达式的例子
- asp.net设置某项被选中时，未找到值会报错
- dotnet Core Asp.net 项目搭建
- ASP.Net 关于前台JS给input赋值后，runat="server" 后台利用ID.Value还是获取不到的问题
- ASP.NET MVC 5 局部视图不支持异步问题
- 带你读开源—ASP.NET_MVC（十四）
- ASP.NET MVC pager
- 开发ASP.NET MVC 在线录音录像（音视频录制并上传）
- 开发ASP.NET MVC 开发名片二维码生成工具 （原创）
- ASP.NET控件之RadioButtonList详解
- v14.0\AspNet\Microsoft.Web.AspNet.Props 找不到
- ASP.NET MVC实现多个按钮提交的方法
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（74）-微信公众平台开发-自定义菜单
- spring AOP (使用AspectJ的xml方式 的aop实现) (7)
- spring AOP (使用AspectJ的注解方式 的aop实现) (6)
- OWASP Top 10十大风险 – 10个最重大的Web应用风险与攻防
- OWASP Top 10十大风险 – 10个最重大的Web应用风险与攻防
- windows下面安装casperjs
- ASPNETMVCSHOP
- 解决ASP.NET Core VS2015 没有“新搭建基架的项目” no New Scaffolded Item