如何实现无刷新的DropdownList联动效果

 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 (i = drp2.length; i >= 0; i--){
        drp2.options.remove(i);
    }
    var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");
    // 这里使用escape可以解决中文的问题
    oHttpReq.open("POST", "getData.aspx?state="+escape(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.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){
  // 建立数据源加载第一个DropDownList,也可以默认加载第二个
    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();
    da.Fill(ds);
    this.DropDownList1.DataSource = ds;
    this.DropDownList1.DataTextField = "State";
    this.DropDownList1.DataValueField = "State";
    this.DropDownList1.DataBind();
    // 这里是绑定客户端事件,当第一个DropDownList的选项改变时激发下面的事件onchange,这个事件将调用一个客户端方法load()
    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字符串,最后解析此串。

         该方法可以实现无刷新的联动DropDownList,数据是从后台的数据库中得到的,希望可以起到抛砖引玉的作用,对文章有什么意见或者看法可以发邮件到wu_jian830@hotmail.com或者在CSDN中给我留短信我的ID是cuike519!谢谢阅读!
         文中有什么错误或者不妥当的地方请指正谢谢!



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=81727

<script src="/PromoteIcon.aspx?Id=81727" type="text/javascript"> </script>[ 推荐本文] [ 点击此处收藏本文]   发表于 2004年08月22日 8:44 PM
href="http://blog.csdn.net/cuike519/Services/Pingback.aspx" rel="pingback"/>
style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; WIDTH: 156px; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; HEIGHT: 22px" src="http://blog.csdn.net/search_iframe.html" frameborder="0" scrolling="no">
<script type="text/javascript"> document.write("<img src=http://counter.csdn.net/pv.aspx?id=24 border=0 width=0 height=0>"); </script>

 
MOMO 发表于2004-08-25 5:42 PM  IP: 211.72.108.*
znAD??CIpGiH?AiHXH??H

ilovemomo73327@pchome.com.tw

P¡I

 
MOMO 发表于2004-08-25 5:50 PM  IP: 211.72.108.*
您好,不知道为什么不能执行耶!
我完全都是用你的码喔!
如果可以的话,可以把原档寄给吗?谢谢
ilovemomo73327@pchome.com.tw

而且有很多地方很像有点问题是吗?
如果没有Dro例如pDownList1.DataSource的指派!

 
chyich 发表于2004-08-31 9:07 AM  IP: 61.138.209.*
在Webform2的page_load事件代码加上两行代码就可以了.楼主可能忘了拷了:
if(!this.IsPostBack)
{
SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=tyforty;");
SqlDataAdapter da = new SqlDataAdapter("select state from authors group by state",con);
DataSet ds=new DataSet();
da.Fill(ds,"state");
this.DropDownList1.DataSource=ds.Tables[0].DefaultView;
this.DropDownList1.DataTextField = "State";
this.DropDownList1.DataValueField = "State";
this.DropDownList1.DataBind();
this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
}

 
SpringBell 发表于2004-09-05 10:18 PM  IP: 218.242.143.*
希望能有 vb.net 的版本。

 
ydk2004 发表于2004-09-06 4:46 PM  IP: 61.153.7.*
items = oDoc.selectNodes("//CITY/Table");
for (var item = items.nextNode(); item; item = items.nextNode()){
var city = item.selectSingleNode("//city").nodeTypedValue;

city大小写有什么区别啊

 
cuike519 发表于2004-10-06 9:05 PM  IP: 202.106.160.*
这是删除所有Dropdownlist内容的脚本,请替换原来的
drp2.remove(i);相关的部分代码:
// 清除数据源中的内容
function RemoveAll(oElem) {
var i = 0;
for (i = oElem.length; i >= 0; i--){
oElem.options.remove(i);
}
}

 
kary 发表于2004-10-08 4:12 PM  IP: 220.170.241.*
还有数据没有清除完,要刷新???不知道为什么?

 
tqg1023 发表于2004-10-22 8:05 AM  IP: 61.53.193.*
如果state字段为中文,它的下级DropDownList将无法显示出来,这是为什么?

 
笨鸟 发表于2004-10-25 11:41 AM  IP:
TrackBack来自 《实现无刷新DropDownList联动效果。》

Ping Back来自:blog.csdn.net

 
边城浪子 发表于2004-10-28 10:38 AM  IP: 218.4.73.*
var city = item.selectSingleNode("//city").nodeTypedValue;
这句是错误的,应为
var city = item.selectSingleNode("city").nodeTypedValue;

 
Standy 发表于2004-11-03 4:34 PM  IP: 221.225.175.*
后台不能读取dropdownlist2的值

 
Robin 发表于2004-11-05 11:16 AM  IP: 218.79.108.*
同样的问题:

如果state字段为中文,它的下级DropDownList将无法显

示出来!!!

 
Robin 发表于2004-11-05 12:37 PM  IP: 218.79.108.*
原因找到了,应修改web.config
<globalization requestEncoding="GB2312" responseEncoding="GB2312" culture="zh-CN" fileEncoding="GB2312" />

 
kaidi 发表于2004-11-16 2:21 AM  IP: 222.76.197.*
能有地方调试好的下吗?

 
zhouwei 发表于2004-11-20 5:26 PM  IP: 202.115.75.*
但是怎么给值取出来啊????

实现了,但是得不到我要得那个值!

 
hello  发表于2004-12-08 11:16 AM  IP: 218.15.173.*
好文,斑竹好厉害!

 
que 发表于2004-12-10 10:55 AM  IP: 218.108.47.*
我用了,但第二个空,我逐语句调试
result = oHttpReq.responseText;
oDoc.loadXML(result);不能得到值?
请教一下为什么?

 
cuike519 发表于2004-12-17 9:51 AM  IP: 202.106.160.*
此页面已经做了更新,其中有些代码在从测试工程拷贝的时候有错误,里面的代码部分我已经做了修改,添加了一些注释来帮助理解,如果您需要源代码可以发邮件给我。

--这里怎么没有办法上传附件,如果文章中有测试工程也不能上传!郁闷。

 
jxd728 发表于2004-12-17 6:06 PM  IP: 218.26.189.*
联动是实现了,可是在WebForm2.aspx中怎样获得DropdownList2的值呢?

 
wf 发表于2004-12-18 11:54 AM  IP: 61.53.108.*
我要源代码

我的Email:chinaf@eyou.com

谢了

 
haha 发表于2004-12-27 6:01 PM  IP: 219.238.183.*
jasonguyp@126.com
我也要一份,thank you.

 
vincentree 发表于2004-12-30 10:12 AM  IP: 211.94.236.*
vincentree@eyou.com
谢谢!发一份给我。新年快乐!

 
xiaorong 发表于2004-12-31 6:01 PM  IP: 219.131.4.*
alert(items.nextNode())为null为什么呀?我的下级不会显示出来

如果有也发一份给我xiaorong007@126.com谢谢

 
rxhuang 发表于2005-01-07 9:19 AM  IP: 218.85.69.*
我也要一份,谢谢!!
huangrongxin@126.com

 
morepower 发表于2005-01-13 11:15 AM  IP:
TrackBack来自 《如何实现无刷新的DropdownList联动效果 》

Ping Back来自:blog.csdn.net

 
宋增峰 发表于2005-01-24 3:47 PM  IP: 218.56.61.*
你好!我也想要这个例子的源程序,可心吗!我的邮箱为:songzh@langchao.com,非常感谢!

 
辉煌的未来 发表于2005-02-16 8:47 PM  IP:
TrackBack来自 《如何实现无刷新的DropdownList联动效果 》

Ping Back来自:blog.csdn.net

 
jmtom 发表于2005-02-18 3:20 AM  IP: 218.61.3.*
你好,我也想要源程序,谢谢!:)
Email:jmtom1522@163.com

 
dsfsf 发表于2005-02-22 3:29 PM  IP: 218.104.211.*
偶也要!谢谢
zippro@163.com

 
zhouhp 发表于2005-03-03 11:15 AM  IP: 222.65.216.*
测试了半天,还是不行,result值是一些乱码,我的web.config已经改成gb2312了,而且,dropdownlist2也没有显示,有源程序吗??给我一份zhouhp@96bank.com

 
pjsong 发表于2005-04-13 11:14 AM  IP: 219.82.131.*
二级出不来
pjsong213@yahoo.com.cn

 
luckyprg 发表于2005-06-16 11:46 AM  IP: 61.186.252.*
楼主:
JS中有一点问题:
oHttpReq.open("POST", "getData.aspx?state="+escape(state), false);
这里应该是
oHttpReq.open("POST", "WebForm6.aspx?state="+escape(state), false);
楼主忘了把getData.aspx改成WebForm6.aspx了。

另有两个问题想问一下楼主:
1、DropDownList2在Page_Load时是没有值的,除了在<Page>的onload中加上DropDownList1的onchang动作外在后台应该怎么写呢?
2、能在服务器端给DropDownList2赋初始值吗?我想做成用户控件,所以在修改时要给DropDownList都选中相应值。

 
luckyprg 发表于2005-06-16 2:10 PM  IP: 61.186.252.*
刚忘了留Email:luckyprg@163.com

 
cf000 发表于2005-06-29 4:18 PM  IP: 61.186.252.*
给偶也发一份啦,3Q的 cf000@126.com

 
Boler Guo 发表于2005-07-25 4:42 PM  IP: 61.186.252.*
删除的时候用
drp2.innerHTML = "";
会不会更好一点。

还有,即使这样用页面也会小小闪烁一下,不过这个可能没办法了~

 
Boler Guo 发表于2005-07-25 4:46 PM  IP: 61.186.252.*
删除的时候用
drp2.innerHTML = "";
会不会更好一点。

还有,即使这样用页面也会小小闪烁一下,不过这个可能没办法了~

 
lek  发表于2005-09-08 5:17 PM  IP: 211.100.21.*
用ajax.net其实就可以很好的来解决这个问题。不过ajax的实现原理和你一样也是利用xmlhttp。只是他很好的封装了,这样使用就更方便了

 
zkp0577 发表于2005-09-09 5:30 PM  IP: 211.100.21.*
本人复制代码后,历经辛苦最后在数据源上出了问题,DataBind()方法出错,显示

IListSource 不包含任何数据源。
说明: 执行当前 Web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。

异常详细信息: System.Web.HttpException: IListSource 不包含任何数据源。
源错误:


行 32: this.DropDownList1.DataTextField = "State";
行 33: this.DropDownList1.DataValueField = "State";
行 34: this.DropDownList1.DataBind();
行 35: this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
行 36: }

这又该如何修改?有空的话发源文到zkp0577@sina.com

 
jlwww 发表于2005-09-19 8:52 AM  IP: 211.100.21.*

一用中文就出错了,,求助!!
Email:
jaland@126.com

 
leoajun 发表于2005-09-29 4:41 PM  IP: 211.100.21.*
在第二个下拉菜单中显示不出中文,显示数字没问题,让第二个显示中文就没反应了,web.config也改过了,不知道什么原因.
如果楼主的解决了,也把源码发我一份
leoajun@vip.163.com

 
嘿嘿.. 发表于2005-09-29 4:47 PM  IP: 211.100.21.*
解决了!

 
leoajun 发表于2005-09-29 4:47 PM  IP: 211.100.21.*
解决了,嘿嘿...
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值