ASP.NET实现无刷新的DropdownList联动效果(20041204)

来源：互联网发布：巴基斯坦进出口数据编辑：程序博客网时间：2024/04/29 04:49

由于在应用中需要将DropdownList联动，而后对其进行了实现，下面将我的实现方法及过程写出来，一来是可以将资源共享，二来也可使遇到同样问题的朋友少走一些弯路．
　所谓DropdownList联动，也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新（如选省份时显示所属城市），按常规的方法那就是在第一个DropdownList的SelectedIndexChanged事件中改变第二个DropdownList的数据源及重新绑定，但是如果这样的话在每一次的重新选择将带来一次页面的刷新，除了屏幕闪动以外，如果同页有密码框的话，内容也会清除掉．这时我们就需要无刷新实现，基本原理在选择改变时用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" 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);
       }
       //新建一请求与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 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>

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

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

最后,感谢此例子的提供者,如果在你的实践中遇到什么问题或需要我的实际应用源代码的话,可与我联系.谢谢阅读！