首页 > 语言 > 关键词 > 最新资讯 > 正文

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

2007-10-10 09:48 · 稿源:网页教学网

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字符串,最后解析此串。

  • 相关推荐
  • 大家在看
  • 研究机构:全球云计算市场规模2024年有望超过1万亿美元

    10月19日消息,据国外媒体报道,今年的疫情,加速了企业向云计算的转变,全球云计算市场在未来几年也将快速增长。研究机构预计,包括云计算硬件、软件及服务在内的全球云计算市场的规模,在2024年有望超过1万亿美元,复合年均增长率将达到15.7%。预计全球云计算市场规模有望在2024年达到1万亿美元的这一研究机构的一名高管透露,基于疫情期间的经验,大部分的企业的数字基础设施和应用服务将加速向以云为中心转变,到?

  • 特斯拉德州超级工厂建设加速 首批立柱已竖立在现场

    10月19日消息,据国外媒体报道,电动汽车制造商特斯拉加速了其德州超级工厂的建设。最近拍摄的工厂图片和视频显示,该工厂的首批立柱已经竖立在现场。今年7月份,特斯拉CEO埃隆·马斯克(Elon Musk)表示,特斯拉的下一座超级工厂将建在德州奥斯汀。该工厂将是特斯拉继内华达州超级工厂、纽约超级工厂、上海超级工厂和柏林超级工厂之后的第五家工厂,也将是继弗里蒙特工厂、上海工厂和柏林工厂之后的第四家汽车组装工?

  • 人人车创始人李健退出,不再担任公司投资人、执行董事

    10月16日,北京人人车网络技术有限公司发生多项工商变更,法定代表人由杜希勇变更为赵松。股东变更方面,该公司创始人李健(退出前持股96.00%)和王清翔退出,新增股东王雪、 祥瑞科耀(北京)科技有限公司。

  • iPhone12序列号查询地址 苹果12手机序列号查询

    苹果iPhone12手机在10月23日正式发售上市,接下来相信会有不少用户陆续收到手机,拿到手机的时候需要进行查询序列号,那么官方序列号查询地址在哪里呢,我们来一起看下具体的查询方法。

  • 程武解析内容生产“三级跳” 加码影视投入和强化产业耦合

    10月19日,腾讯影业、新丽传媒、阅文影视在上海举办联合发布会。在腾讯新文创战略的纵深推进下,三家公司以整体影视生产体系首次亮相,成为腾讯和阅文深度布局影视业务、强化数字内容业务耦合的“三驾马车”。腾讯集团副总裁、阅文集团首席执行官、腾讯影业首席执行官、腾讯动漫董事长程武在本次发布会上,腾讯集团副总裁、阅文集团首席执行官、腾讯影业首席执行官、腾讯动漫董事长程武以《聚合数字内容“新基建” 释放光影大能量》为?

  • 科大讯飞智能录音笔SR701不止于录音

    近日,关于讯飞智能录音笔SR701的讨论一直很多,据说不论你说什么有难度的内容,只要你说的出来,它就能给你转写出来,于是我就入手了,下面就来看看我的评测体验。讯飞智能录音笔SR701最为吸引人的功能,根据不同的场景下进行智能录音处理。在这一功能的加持之下,讯飞智能录音笔实现了快速将录音转写为文字,录音转文字准确率、翻译准确率都非常高。讯飞智能录音笔SR701的顶部设计有两个定向麦克风,可以根据不同方位进行收音。?

  • 字节跳动否认入局社区团购 回应称消息不实

    今天,AI财经社报道称,字节跳动正在布局社区团购,以高出市场两倍薪资挖人。报道称字节跳动最快将于11月在山东中部地区试点,最慢12月推进。

  • 黑龙江酸汤子中毒事件9人全部身亡 米酵菌酸危险别忽视

    前几天黑龙江鸡西市鸡东县发生了一起惨剧,家庭聚餐中有9人食用了当地特色食物酸汤子,导致中毒。今天下午,中毒事件中唯一的幸运者也不幸死亡,最终这起事故中的9人都不幸遇难了。最初的检验

  • 苹果内部培训文档曝光:iPhone 12双卡模式下无法开启5G

    今年iPhone 12全系都采用双卡双待,唯一的例外是国行版,iPhone 12 mini为单卡。当然,其它国行型号的双卡也与国外不同,前者是实体双卡,后者则是实体SIM+eSIM。不过,在国外社区出现了据称来

  • 今日油条被起诉后公开信致歉:以头条为榜样 立志做好早餐店

    近日,河南一家名为今日油条的网红店引起众网友关注。从网友晒出的图片来看,这家网红店从名字到图片,再掉店内装修,都与今日头条APP有相似之处。就连菜单,也根据今日头条APP界面来进行设计

  • 荣耀天猫共建首个淘宝直播基地 双11将正式启用

    今日,荣耀与天猫联合宣布,将在今年天猫双11期间正式启用行业内首个共建的淘宝直播基地。

  • 90后植发人数占比57.4%,新生植发提醒您选对植发医院很重要

    网络上有句话,猝死不是 90 后担心的问题,脱发才是最担心的问题。这句话一发布在微博上,立刻引发了成千上万的转发。之后,端着保温杯的年轻人,让“保温杯”和“枸杞水”的热量空前发酵。人们见面和取笑的方式开始变成“昨晚你什么时候熬夜”和“你今天掉了多少根头发”。“熬夜”、“脱发”和“保持健康”已经成为年轻人话题的新焦点。据之前有医生接受媒体采访时表示,目前脱发人群当中,38%是 80 后,还有36%是 90 后,最小年

  • 方太荣获中国标准创新贡献奖一等奖

    转载自甬派客户端 记者金鹭刚刚,甬派记者获悉,作为《家用和类似用途电器的抗菌、除菌、净化功能通则》等8项标准的主要完成单位,宁波方太厨具有限公司荣获2020年中国标准创新贡献奖标准项目奖一等奖。据了解,中国标准创新贡献奖是我国标准化领域的最高奖项,由国家质检总局和国家标准委于2006年设立。奖项的设立旨在表彰在标准化活动中作出突出贡献的组织和个人,调动标准化工作者的积极性和创造性,促进标准化事业健康发展。今

  • 天涯明月刀手游服务器已满解决办法 服务器满了怎么办

    天涯明月刀手游中经常的遇到服务器满了的情况,很多玩家还不清楚怎么办,下面就来为大家分享一下天涯明月刀手游服务器已满解决办法。

  • 道有道使命:助力企业持续增长用户

    在互联网大时代的今天,大部分企业的营销重点从线下转移到了线上。从流量获取到用户转化,再到内容共建的数字营销,正式进入高速发展快车道。近年来,从互联网各项营销数据中不难看出,为各大企业实现用户增长的数字化营销遥遥领先,数字化营销成为了各大企业用户增长的重要手段。在更精准、更高效、更贴合需求的模式下,数字营销已然占据互联网营销的首位,得到了众多企业的垂青。而这当中,道有道科技集团股份公司深耕数字营销,

  • 马斯克旗下挖掘公司Boring所建地下环线可能只能承载承诺人数的25%

    10月19日消息,据国外媒体报道,埃隆·马斯克(Elon Musk)的Boring公司(英文boring有“挖掘”和“无聊”两种意思,因此马斯克也借“Boring Company”自嘲要开一家“无聊的公司”。)在拉斯维加斯会议中心(LVCC)下的隧道系统可能无法达到像最初承诺的运送人数。除了令人失望之外,可能Boring公司还面临着经济处罚。地下环线它所面临的瓶颈并不在于技术,而是消防条例。消防条例规定,环路三个车站之一的装卸区的乘?

  • 京东副总裁韩瑞:京东才是真百亿补贴

    双十一电商大战又将开启。10月19日消息,京东赶在阿里巴巴前一天召开双十一媒体沟通会,对外披露今年京东双十一的优惠举措。京东称,京东将推出包括超级百亿补贴、直播超级夜等多项活动,共计带来超2亿件5折商品、超3亿件新品。由于今年上半年疫情影响,预计今年的各电商平台双十一大战将更为激烈。今年,京东专门请了笑果文化举办了一场“京东脱口秀大会”,似乎意在拉近与年轻消费者的距离,扩大京东双十一的影响力

  • 韩国韵达拒邮防弹少年周边包裹 因为一些众所周知的原因

    【韩国韵达拒邮防弹少年周边包裹】10月19日下午,韩国韵达官方账号发布微博称,因为一些众所周知的原因,有关防弹少年团的包裹暂时不再邮寄了。日前,韩国男子组合“防弹少年团”发表获奖感言时表示,会永远铭记两国(意指韩美)共同经历的苦难历史。这样的表述令很多中国网友和粉丝不满。

  • 钟丽缇大女儿Yasmine担纲新品视频女主角!视频创意软件Filmora X全新来袭

    2020年10月16日,万兴科技旗下的数字创意剪辑软件Filmora X(Filmora10.0版本)在北美地区正式发布。迎来重大升级的Filmora X一次性更新了7大功能,包括运动追踪、关键帧、颜色匹配、音频闪避等。钟丽缇大女儿Yasmine担纲新品视频女主角!视频创意软件Filmora X全新来袭同时上线的,还有一支主题新品视频,由钟丽缇的大女儿Yasmine担纲女主角,视频通过当下新生代潮流青春的生活方式,向用户表达潮流态度:只要心中充满创意,生活就不会平庸。

  • 独家!公众号内测“文末连续阅读”能力,告别沉重的超链接小尾巴

    细数起来,这已经是这个月,视频号第三次推出重磅的新功能了。并且这一次我们扬眉吐气了,总是赶不上内测的我们这次终于坐上了“第一班车”,同时公众号也正在内测一个全新的能力,是什么?跟我们一起来看看吧!

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签

热文

  • 3 天
  • 7天