ASP_NET实现无刷新的DropdownList联动效果_双氧水地带_百度空间

ASP_NET实现无刷新的DropdownList联动效果_双氧水地带_百度空间

2010-04-13 15:42:58 阅读11 评论0 字号:


由于在应用中需要将DropdownList联动,而后对其进行了实现,下面将我的实现方法及过程写出来,一来是可以将资源共享,二来也可使遇到同样问题的朋友少走一些弯路.
       所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在{dy}个DropdownList的SelectedIndexChanged事件中改变第二个DropdownList的数据源及重新绑定,但是如果这样的话在每一次的重新选择将带来一次页面的刷新,除了屏幕闪动以外,如果同页有密码框的话,内容也会xx掉.这时我们就需要无刷新实现,基本原理在选择改变时用JS向另外一个隐藏页发送请求并得到一个XML流,解析后放入相应的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" >
    <meta content="C#" >
    <meta content="JavaScript" >
    <meta content="http://schemas.microsoft.com/intellisense/ie5" >
    <script>
        function load(state){
         var drp2 = document.getElementById("DropDownList2");
         for(var i = 0;i<=drp2.options.length -1;i++){
      drp2.remove(i);
         }
         //新建一请求与XML文档
         var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
         var oDoc = new ActiveXObject("MSXML2.DOMDocument");
         //将请求发送到另一页,其中参数state代表DropDownList1所选值
         oHttpReq.open("POST", "webform6.aspx?state="+state, false);
         oHttpReq.send("");
         //取返回结果并放入XML文档中
         result = oHttpReq.responseText;
         oDoc.loadXML(result);
         //设置根结点及循环读取其内容
         items = oDoc.selectNodes("//CITY/Table");     //CITY代表数据集名,Table代表数据集中的表名
         for (var item = items.nextNode(); item; item = items.nextNode()){
      var city = item.selectSingleNode("//city").nodeTypedValue;      //city为所取字段内容
      var newOption = document.createElement("OPTION");
      newOption.text = city;                           //下拉框的文本,如北京
      newOption.value = city;                          //下拉框的值,如110000
      drp2.options.add(newOption);
         }
        }
    </script>
</HEAD>
<body MS_POSITIONING="flowLayout">
    <form method="post" runat="server">
     <asp:DropDownList runat="server"></asp:DropDownList>
     <asp:DropDownList runat="server"></asp:DropDownList>
    </form>
</body>
</HTML>

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


     该页的后台代码如下所示,在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();
    //添加一个属性,使其选择改变时调用上面的load方法,此处为文本,传值的话将innerText改为value即可.
    this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
}


    下面我们看看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");     //此处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字符串,{zh1}解析此串。

    此例子是从网上找的,只不过我加了一些注释,在我的实践中碰到一些问题望大家注意:
1.如果在调用load函数时传递的是中文,那么由于IE的关系将会变成乱码(修改web.config文件编码为gb2312可解决,但此时数据将无法获取,可能跟请求返回的XML文档编码有关系吧),所以建议传递value;
2.在实现无刷新后,如果你的页面中有一个提交按钮的话,按常规的服务器端代码将取不到DropdownList的当前值.此时可使用Request.Form["DropdownList控件名"]来获取值.







引文来源  
<#--{zx1}日志--> <#--推荐日志--> <#--引用记录--> <#--相关日志--> <#--推荐日志--> <#--推荐阅读--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构-->
郑重声明:资讯 【ASP_NET实现无刷新的DropdownList联动效果_双氧水地带_百度空间】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——