ASP.NET中用XMLHTTP实现DropDownList无刷新联动

来源：互联网发布：金蝶软件客户端打不开编辑：程序博客网时间：2024/05/29 08:31

这几天在做项目的时候想实现二级联动，但是用DropDownList控件的AutoPostBack属性的话，需要刷新页面，用户体验不好，所以尝试着用XMLHTTP实现无刷新二级联动。也参考了下网上的做法。

设计思路：当页面首次加载的时候将一级类别绑定到一级类别dlstFirstClass控件上，二级类别dlstSecondClass控件暂不绑定，当用户选择了一级类别是调用js代码将用户选择的一级大类的ID值传过去，将该ID值以POST方法发送给服务器，服务器根据ID值得到对应的二级大类表，用XML方式回发给客户，客户端调用js代码将该XML写到dlstSecondClass控件上，后台通过dlstFirstClass.SelectedValue获取一级大类值，对于二级大类用Request.Form[""]方式获取值。

接下来，我们开始具体实现。

1、数据库设计

2、二级联动页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="classAdd.aspx.cs" Inherits="shop.Web.Admin.goodsManage.classAdd" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title></title> <script language="javascript" type="text/javascript"> function load(ClassId) //ClassID为接受传递的大类ID { var dlstSecond=document.getElementById("dlstSecondClass"); function RemoveAll(oElem) //清楚dlstSecondClass地所有项 { var i=0; for(i=oElem.length;i>=0;i--) { oElem.options.remove(i); } } RemoveAll(dlstSecond); var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP"); var oDoc = new ActiveXObject("MSXML2.DOMDocument"); //调用读取小类数据的页面，将大类编号值传递过去 oHttpReq.open("POST","DropChild.aspx?ClassId="+ClassId,false); oHttpReq.send(""); result=oHttpReq.responseText; oDoc.loadXML(result); //读取所有请求大类所属小类的类名 item1=oDoc.selectNodes("//Table/secondClassName"); //读取所有请求大类所属小类的编号 item2=oDoc.selectNodes("//Table/secondClassId"); var itemsLength=item1.length; for(i=0;i<itemsLength;i++) {//将小类的类名和编号赋予dlstSecondClass控件 var newOption=document.createElement("OPTION"); newOption.text=item1[i].text; newOption.value=item2[i].text; dlstSecond.options.add(newOption); } } window.onload = function(){load('1');} </script></head><body> <form id="form1" method="post" runat="server"> <div> <table border="0" cellpadding="1" cellspacing="1" class="hy" width="100%"> <tr> <td width="15%" align="justify"><div align="right"> <strong>一级类别：</strong></div></td> <td width="85%"><div style="vertical-align:middle"> <asp:DropDownList ID="dlstFirstClass" runat="server" Width="80px"> </asp:DropDownList> <strong>二级类别：</strong> <asp:DropDownList ID="dlstSecondClass" runat="server" Width="80px"> </asp:DropDownList></div> </td> </tr> </table> </div> </form></body></html>

该页面上只有两个DropDownList控件，用来实现二级联动，js部分主要是实现二级类别表的请求和对回发数据的处理功能。

3、二级联动页面的后台代码。这里只要在Page_Load中将一级类别绑定到dlstFirstClass控件上即可。

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string sqlStr = "select * from tbFirstClass"; dt = dbBase.ExecuteSQLGetDataTable(sqlStr); dlstFirstClass.DataSource = dt; dlstFirstClass.DataTextField = "firstClassName"; dlstFirstClass.DataValueField = "firstClassId"; dlstFirstClass.DataBind(); //将ClassId作为参数传递给脚本函数load(ClassId)， //如果要传递的是ClassName，应将value改为innerText， //但如果大类为中文，则调用小类时出现无法显示的问题 dlstFirstClass.Attributes.Add("onchange", "load(this.options[this.selectedIndex].value)"); } }

4、处理二级联动前台页面请求的页面，RequestData.aspx。该页面上什么也不用写，只要在RequestData.aspx.cs的Page_Load事件中写上处理请求及回发即可。代码如下。

protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack) { if (Request["ClassId"] != null) { string firstClassId = Request["ClassId"].ToString(); dt = secondClassDal.GetAllSecondClassById(firstClassId); XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding); writer.Formatting = Formatting.Indented; writer.Indentation = 4; writer.IndentChar = ' '; dt.WriteXml(writer); writer.Flush(); Response.End(); writer.Close(); } }}

5、获取二级大类的值。

string secondClassName = this.Request.Form["dlstSecondClass"].ToString();

也有网上说在dlstSecondClass控件后面放一个隐藏的textBox控件，当dlstSecondClass的值发生变化时用js将变化后的值赋给文本框的Text，后台用获取文本框的Text的值的方法来获取dlstSecondClass的值，但是我觉得这种办法不好。太麻烦。

到此，DropDownList无刷新联动已经实现。如果出现如下错误：

System.ArgumentException: 回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。

网上说在Web.config中加入如下语句即可：

但是我试了没用的，我的做法是在<%@ Page />中加入 EnableEventValidation="false"即可解决。