无刷新下拉框

来源:互联网 发布:金融数据服务商排名 编辑:程序博客网 时间:2024/05/19 18:41

    网络中信息系统开发,少不了下拉框的使用,有时是多个下拉框的联动,希望是无刷新的,下面就是一种xml方法。
一、页面1(显示页面)
1、客户端显示页面,服务端主要代码。
if(! Page.IsPostBack)
{
   ddlname.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");
   //这是客户端调用服务端的事件
}
2、客户端的html主要代码

<asp:DropDownList ID="ddlname" Runat="server">
    <asp:ListItem Value="0">--请您选择--</asp:ListItem>
    <asp:ListItem Value="11">类别</asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="ddlvalue" Runat="server"></asp:DropDownList>
3、客户端的js代码
   function load(state)
   {
    var drop2 = document.getElementById("ddlvalue");
    // 清除数据源中的内容
     var i = 0;
     for (i = drop2.length; i >= 0; i--){
     drop2.options.remove(i);
     }
    //一个负责发送请求另一个负责得到响应结果
    var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");
    oHttpReq.open("POST", "ddlCreateXml.aspx?state="+state, false);
          oHttpReq.send("");
    result = oHttpReq.responseText;
    oDoc.loadXML(result);
    items = oDoc.selectNodes("//rootNodes/Table");
    
    for(i=0;i<items.length;i++)
    {
     drop2.options.add(new Option(items[i].selectSingleNode("name").text,items[i].selectSingleNode("id").text));
    
    }
    
   }
二、页面2(回应客户端事件)
1、主要服务端主要代码
   if(! Page.IsPostBack)
   {
    if(Request.Params["state"] != null)
    {
     string state = Request.Params["state"].ToString();
     SqlConnection conn = new SqlConnection(strConn);
     conn.Open();
     SqlDataAdapter dp = new SqlDataAdapter("select component_id as id,name from components where component_id in (selectSql,conn);
     DataSet ds = new DataSet("rootNodes");
     dp.Fill(ds);
     conn.Close();

   //下面主要是生成xml 
    XmlTextWriter write = new XmlTextWriter(Response.OutputStream,Response.ContentEncoding);
     write.Formatting = Formatting.Indented;
     write.Indentation = 4;
     write.IndentChar = ' ';
     ds.WriteXml(write);
     write.Flush();
     write.Close();
     Response.End();
     
    }
   }
2、去掉页面的html格式
三、说明
xml生成方式可以用Webservices替代,响应有些慢,值无法保存,可以用隐藏件的方式。
另一种方法是,先生成js数组方式,我没有试。

原创粉丝点击