ASP。NET2.0实现无刷新DropDownList联动效果

 1  <% @ Page language = " c# "  Codebehind = " DropTest.aspx.cs "  AutoEventWireup = " false "  Inherits = " studyWEB.DropTest "   %>
 2  <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
 3  < HTML >
 4    < HEAD >
 5     < title > WebForm2 </ title >
 6     < meta content = " Microsoft Visual Studio .NET 7.1 "  name = " GENERATOR " >
 7     < meta content = " C# "  name = " CODE_LANGUAGE " >
 8     < meta content = " JavaScript "  name = " vs_defaultClientScript " >
 9     < meta content = " http://schemas.microsoft.com/intellisense/ie5 "  name = " vs_targetSchema " >
10     < script >
11        function load(ClassID){            // ClassID为接收传递的大类编号
12        var drp2  =  document.getElementById( " DropDownList2 " );
13        function RemoveAll(oElem) {              // 清除DropDownList2的所有项
14        var i  =   0 ;
15         for  (i  =  oElem.length; i  >=   0 ; i -- ){
16        oElem.options.remove(i);
17        }
18        }
19        RemoveAll(drp2) 
20         var oHttpReq  =   new  ActiveXObject( " MSXML2.XMLHTTP " );
21         var oDoc  =   new  ActiveXObject( " MSXML2.DOMDocument " );
22         oHttpReq.open( " POST " ,  " DropChild.aspx?ClassID= " + ClassID,  false );          // 调用读取小类数据的页面，将大类
23                                                                                                                              //  编号值传递过去
24         oHttpReq.send( "" );
25         result  =  oHttpReq.responseText;
26         oDoc.loadXML(result);
27         items1  =  oDoc.selectNodes( " //CLASSNAME/Table/ClassName " );               // 读取所有请求大类所属小类的类名
28         items2  =  oDoc.selectNodes( " //CLASSNAME/Table/ClassID " );                    // 读取所有请求大类所属小类的编号
29         var itemsLength = items1.length;
30          for (i = 0 ;i < itemsLength;i ++ )                                                                  // 将小类的类名和编号赋予DropDownList2
31     {
32        var newOption  =  document.createElement( " OPTION " );
33        newOption.text = items1[i].text;
34        newOption.value = items2[i].text;
35        drp2.options.add(newOption);
36     }
37        }
38     </ script >
39    </ HEAD >
40    < body MS_POSITIONING = " flowLayout " >
41     < form id = " Form1 "  method = " post "  runat = " server " >
42      < asp:DropDownList id = " DropDownList1 "  runat = " server " ></ asp:DropDownList >
43      < asp:DropDownList id = " DropDownList2 "  runat = " server " ></ asp:DropDownList >
44      < asp:TextBox id = " TH "  runat = " server "  BorderStyle = " None "  ForeColor = " White "  BorderColor = " White " ></ asp:TextBox >
45      < asp:Label id = " Label1 "  runat = " server " ></ asp:Label >
46      < asp:Button id = " Button1 "  runat = " server "  Text = " Button " ></ asp:Button >
47     </ form >
48    </ body >
49  </ HTML >

在做一个文章添加功能时，想在选择大类后，自动将其所属二级小类显示出来，使用DropDownList的SelectedIndexChanged事件可以很容易实现，但每次选择后页面总要刷新一次，让人感觉很不爽。为实现DropDownList无刷新二级联动，这几天在网上找了些资料，但都无法达到我想要的效果，经过反复调试，现已基本实现了此功能，现将代码附下。
一、数据库设计：

字段名	数据类型	说明
ClassID	自动编号	类编号
ClassName	varchar(8)	类名
UpClassID	int(4)	上级类编号
ClassLevel	int(4)	类级别，1为大类，2为小类

二、设计步骤：
1、首先，我们新建一个页面DropTest.aspx，在其中放入两个DropDownList控件：DropDownList1和DropDownList2，其完整代码如下：
该页面的后台文件（DropDownList1.aspx.cs）中Page_Load内的代码如下：

 1  if ( ! this .IsPostBack)
 2     {
 3      SqlConnection con  =   new  SqlConnection( " server=localhost;database=gswebDB;uid=sa;pwd=; " );
 4      SqlDataAdapter da  =   new  SqlDataAdapter( " select ClassName,ClassID from classname where ClassLevel=1 " ,con);
 5      DataSet ds  =   new  DataSet();
 6      da.Fill(ds);
 7       this .DropDownList1.DataSource = ds.Tables[ 0 ].DefaultView;
 8       this .DropDownList1.DataTextField  =   " ClassName " ;
 9       this .DropDownList1.DataValueField  =   " ClassID " ;
10       this .DropDownList1.DataBind();
11       this .DropDownList1.Attributes.Add( " onchange " , " load(this.options[this.selectedIndex].value) " );   // 将ClassID作为参数传递给脚本函数load(ClassID)，如果要传递的是ClassName，应将value改为innerText，但如果大类为中文，则调用小类时出现无法显示的问题
12      //  this.DropDownList2.Attributes.Add("onChange","javascript:document.Form1.TH.value=this.options[this.selectedIndex].value;");    // 读取DropDownList2的值，将其赋给一个TextBox控件TH，以获取DropDownList2的值，为获取DropDownList2的值，网上有人说可通过使用隐藏的TextBox控件来获取，我未能实现，因为在客户端隐藏的TextBox控件也是不可用脚本来访问的，没法给其赋值，我只能通过将其样式、字体颜色设于背景相同来达到隐藏效果，这是一个很笨的方法，有谁有好的方法，请帮我。
13     }

此页面实现如下功能：首先从数据库内读取所有类级别为1（即大类）的类名和类编号，绑定到DropDownList1控件上；然后通过DropDownList1的Attributes属性调用javascript函数load(ClassID)；load()函数通过调用DropChild.aspx页面，读取XML流，得到大类所属小类的ClassName和ClassID。
2、新建DropChild.aspx页面文件，其中不插入任何控件和文本，只在其后台文件（DropChild.aspx.cs）中的Page_Load中加入以下代码：

 1  if ( this .Request[ " ClassID " ] != null )
 2     {
 3       int  state  =  Convert.ToInt32( this .Request[ " ClassID " ]);
 4      SqlConnection con  =   new  SqlConnection( " server=localhost;database=gswebDB;uid=sa;pwd=; " );
 5      SqlDataAdapter da  =   new  SqlDataAdapter( " select ClassName,ClassID from classname where UpClassID=' " + state + " ' " ,con);
 6      DataSet ds  =   new  DataSet( " CLASSNAME " );
 7      da.Fill(ds);
 8      XmlTextWriter writer  =   new  XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
 9      writer.Formatting  =  Formatting.Indented;
10      writer.Indentation  =   4 ;
11      writer.IndentChar  =   '   ' ;
12      ds.WriteXml(writer);
13      writer.Flush();    
14      Response.End();
15      writer.Close();

该方法得到用户选择的大类的编号，通过查询以后得到一个DataSet对象，使用该对象的WriteXML方法直接将内容写到Response.OutputStream里面然后传递到客户端，客户端的load方法通过result =oHttpReq.responseText;句话得到一个XML字符串，最后解析此串。
        另外，测试获取DropDownList2值，添加了TextBox控件TH，当点击Button时，处理事件代码如下：

1  private   void  Button1_Click( object  sender, System.EventArgs e)
2  {
3     Label1.Text = TH.Text;
4  }
5