当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 如何实现无刷新的DropdownList联动效果

ASP.NET
Asp.net 时间操作基类(支持短日期,长日期,时间差)
asp.net 获取机器硬件信息(cpu频率、磁盘可用空间、内存容量等)
asp.net 数据库备份还原(sqlserver+access)
Asp.Net 数据操作类(附通用数据基类)
Asp.net 弹出对话框基类(输出alet警告框)
Asp.net 文件上传类(取得文件后缀名,保存文件,加入文字水印)
Asp.net Socket客户端(远程发送和接收数据)
Asp.net 字符串操作基类(安全,替换,分解等)
Asp.Net数据输出到EXCEL表格中
asp.net Gridview里添加汇总行
asp.net UpdatePanel的简单用法
asp.net ajaxControlToolkit FilteredTextBoxExtender的简单用法
this connector is disabled错误的解决方法
sql事务应用积累
asp.net Page.Controls对象(找到所有服务器控件)
在asp.NET中字符串替换的五种方法
ASP.NET缓存方法分析和实践示例代码
asp.net 在DNN模块开发中遇到的resx怪问题
ASP.NET State service状态服务的问题解决方法
asp.net 结合mysql存储过程进行分页代码

No. « 50 51 52 53 »

技术文章搜索

关键字

ASP.NET 中的 如何实现无刷新的DropdownList联动效果

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 321 ::
收藏到网摘: n/a

ASP.NET给我们带了了事件模型的编程机制，这使得我们将所有的任务都放在 服务器 上执行哪怕是一个小小变动，其实这到不是什么问题，可是有一点我们无法忍受，如果我们改变某一个输入框中的内容页面要刷新，改变DropDownlist的选择项需要更新另一个Dropdownlist需要刷新，真是郁闷。

下面我将描述一种原始的方法，之所以说它原是是因为这种方法在ASP.NET之前就已经有了，我想这两者之间的关系我不必详细描述，我们今天要说的是如何不刷新页面更新DropDownList，该方法旨在抛砖引玉，其实使用该方法可以实现许多不刷新网页就和后台交互的应用，好了废话就不说了，看看我们的例子吧，首先我们需要一个放置两个DropDownList的页面，假如它叫WebForm2.aspx，页面的代码如下：

以下为引用的内容：
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="WebApptest1.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
　<title>WebForm2</title>
　<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
　<meta content="C#" name="CODE_LANGUAGE">
　<meta content="JavaScript" name="vs_defaultClientScript">
　<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
　<script>
　　　function load(state){
　　　 var drp2 = document.getElementById("DropDownList2");
　　　 for(var i = 0;i<=drp2.options.length -1;i++){
　　drp2.remove(i);
　　　 }
　　　　　　　　　　　　　　var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
　　　 var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　　 oHttpReq.open("POST", "webform6.aspx?state="+state, false);
　　　 oHttpReq.send("");
　　　 result = oHttpReq.responseText;
　　　 oDoc.loadXML(result);
　　　 items = oDoc.selectNodes("//CITY/Table");
　　　 for (var item = items.nextNode(); item; item = items.nextNode()){
　　var city = item.selectSingleNode("//city").nodeTypedValue;
　　var newOption = document.createElement("OPTION");
　　newOption.text = city;
　　newOption.value = city;
　　drp2.options.add(newOption);
　　　 }
　　　}
　</script>
</HEAD>
<body MS_POSITIONING="flowLayout">
　<form id="Form1" method="post" runat="server">
　 <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
　 <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
　</form>
</body>
</HTML>

上面的页面中有两个DropDownList和一段js脚本，该脚本可以直接写在页面也可以写在后台在Regeist到页面上（后者更灵活一些）该页的后台代码如下所示，在Page_Load里面写如下的代码：

以下为引用的内容：
if(!this.IsPostBack){
　SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=sa;");
　SqlDataAdapter da = new SqlDataAdapter("select state from authors group by state",con);
　DataSet ds = new DataSet();
　this.DropDownList1.DataTextField = "State";
　this.DropDownList1.DataValueField = "State";
　this.DropDownList1.DataBind();
　this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
}

在上面的代码中我们做了两件事情：1、帮定其中一个DropDownList（你也可以同时绑定两个）。2、指定该 控件 的客户端脚本。下面我们详细介绍一下上面的js代码，首先得到页面上要联动的DorpDownList对象，将他的Options清空，再创建两个客户端对象oHttpReq和oDoc对象，其中一个负责发送请求另一个负责得到响应结果，我们将用户选择的State发送到名为WebForm6.aspx的页面，该页面将处理这个请求并返回一个响应，该响应的结果是一个XML文件，稍候介绍WebForm6.aspx里面的代码。我们将返回的结果使用loadXML方法Load到oDoc对象里面，然后就可以使用selectNodes方法得到所有的city节点，接着循环这些节点在客户端创建Option对象，最后将这些Option对象Add到DropDwonList2里面去。

下面我们看看WebFowm6.aspx都做了些什么事情，该页面的HTML页面是一个除了包括<@Page>指令意外什么都没有的页面，后台的Page_Load代码如下：

以下为引用的内容：
private void Page_Load(object sender, System.EventArgs e){
　// Put user code to initialize the page here
　if(this.Request["state"]!=null){
　string state = this.Request["state"].ToString();
　SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=sa;");
　SqlDataAdapter da = new SqlDataAdapter("select city from authors where state = '"+state+"'",con);
　DataSet ds = new DataSet("CITY");
　da.Fill(ds);
　XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
　writer.Formatting = Formatting.Indented;
　writer.Indentation = 4;
　writer.IndentChar = ' ';
　ds.WriteXml(writer);
　writer.Flush();
　Response.End();
　writer.Close();
}

该方法得到用户选择的state通过查询以后得到一个DataSet对象，使用该对象的WriteXML方法直接将内容写到Response.OutputStream里面然后传递到客户端，客户端的load方法通过result =oHttpReq.responseText;句话得到一个XML字符串，最后解析此串。