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

ASP.NET
asp.net GridView控件中模板列CheckBox全选、反选、取消
asp.net GridView 删除时弹出确认对话框(包括内容提示)
asp.net DropDownList 三级联动下拉菜单实现代码
asp DataTable添加列和行的三种方法
Asp.net 页面调用javascript变量的值
asp.net 长文章通过设定的行数分页
asp.net 定时间点执行任务的简易解决办法
asp.net 页面延时五秒，跳转到另外的页面
asp.net 动态输出透明gif图片
asp.net DataList与Repeater用法区别
asp.net Javascript获取CheckBoxList的value
asp.net程序在调式和发布之间图片路径问题的解决方法
asp.net下生成英文字符数字验证码的代码
asp.net 页面版文本框智能提示JSCode (升级版)
ASP.NET URL伪静态重写实现方法
ASP.NET 2.0 中Forms安全认证
asp.net 动态添加多个用户控件
asp.net Repeater显示父子表数据,无闪烁
asp.net 无法获取的内部内容，因为该内容不是文本 的解决方法
asp.net GridView排序简单实现

No. « 167 168 169 170 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 160 ::
收藏到网摘: 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字符串，最后解析此串。