如何實現無刷新的DropdownList聯動效果 (轉貼)

ASP.NET給我們帶了了事件模型的編程機制,這使得我們將所有的任務都放在服務器上執行哪怕是一個小小變動,其實這到不是什麼問題,可是有一點我們無法忍受,如果我們改變某一個輸入框中的內容頁面要刷新,改變DropDownlist的選擇項需要更新另一個Dropdownlist需要刷新,真是鬱悶。
       下面我將描述一種原始的方法,之所以說它原是是因爲這種方法在ASP.NET之前就已經有了,我想這兩者之間的關係我不必詳細描述,我們今天要說的是如何不刷新頁面更新DropDownList,該方法旨在拋磚引玉,其實使用該方法可以實現許多不刷新網頁就和後臺交互的應用,好了廢話就不說了,看看我們的例子吧,首先我們需要一個放置兩個DropDownList的頁面,假如它叫WebForm2.aspx,頁面的代碼如下: 
   
   
   http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

        上面的頁面中有兩個DropDownList和一段js腳本,該腳本可以直接寫在頁面也可以寫在後臺在Regeist到頁面上(後者更靈活一些)該頁的後臺代碼如下所示,在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();
  this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
 }
       在上面的代碼中我們做了兩件事情:1、幫定其中一個DropDownList(你也可以同時綁定兩個)。2、指定該控件的客戶端腳本。下面我們詳細介紹一下上面的js代碼,首先得到頁面上要聯動的DorpDownList對象,將他的Options清空,再創建兩個客戶端對象oHttpReq和oDoc對象,其中一個負責發送請求另一個負責得到響應結果,我們將用戶選擇的State發送到名爲WebForm6.aspx的頁面,該頁面將處理這個請求並返回一個響應,該響應的結果是一個XML文件,稍候介紹WebForm6.aspx裏面的代碼。我們將返回的結果使用loadXML方法Load到oDoc對象裏面,然後就可以使用selectNodes方法得到所有的city節點,接着循環這些節點在客戶端創建Option對象,最後將這些Option對象Add到DropDwonList2裏面去。
        下面我們看看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");
  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字符串,最後解析此串。

         該方法可以實現無刷新的聯動DropDownList,數據是從後臺的數據庫中得到的,希望可以起到拋磚引玉的作用,對文章有什麼意見或者看法可以發郵件到[email protected]或者在CSDN中給我留短信我的ID是cuike519!謝謝閱讀!
         文中有什麼錯誤或者不妥當的地方請指正謝謝!

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