無刷新下拉框

    網絡中信息系統開發,少不了下拉框的使用,有時是多個下拉框的聯動,希望是無刷新的,下面就是一種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數組方式,我沒有試。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章