ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子）

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择

1.建立一aspx页面，html代码  

 1 < HTML >
 2      < HEAD >
 3          < title > WebForm1 </ title >
 4          < SCRIPT language = " javascript " >             
 5              // 城市------------------------------
 6             function cityResult() 
 7              { 
 8                var city=document.getElementById("TextBox1");
 9                WebForm1.GetCityList(city.value,get_city_Result_CallBack);
10            }
11             
12             function get_city_Result_CallBack(response)
13              {
14                if (response.value != null)
15                {                    
16                    //debugger;
17                    document.getElementById("DropDownList1").style.display="block";
18                    document.getElementById("DropDownList1").length=0;　　　　            
19　　　　            var ds = response.value;
20                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
21                    {                    
22                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
23　　　　                {
24　　　　                    var name=ds.Tables[0].Rows[i].city;
25　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
26　　　　　　                document.getElementById("DropDownList1").options.add(new Option(name,id));
27　　　　                }
28                    }
29                }
30                else
31                {
32                    document.getElementById("DropDownList1").style.display="none";
33                }             
34                return
35            }
36            
37             function getData()
38              {
39                var province=document.getElementById("DropDownList1");
40                var pindex = province.selectedIndex;
41                var pValue = province.options[pindex].value;
42                var pText  = province.options[pindex].text;                                                
43
44                document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
45            }
46          </ SCRIPT >
47      </ HEAD >
48      < body >
49          < form id = " Form1 "  method = " post "  runat = " server " >
50              < asp:TextBox ID = " TextBox1 "  runat = " server " ></ asp:TextBox >
51              < br >
52              < asp:DropDownList ID = " DropDownList1 "  runat = " server "  Width = " 192px "  style = " display:none " ></ asp:DropDownList >
53          </ form >
54      </ body >
55 </ HTML >

 

2.cs代码

Code
 1using System;
 2using System.Collections;
 3using System.ComponentModel;
 4using System.Data;
 5using System.Drawing;
 6using System.Web;
 7using System.Web.SessionState;
 8using System.Web.UI;
 9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11using System.Data.SqlClient;
12namespace ajaxselect
13{
14    /**//**//**//// <summary>
15    /// Summary description for WebForm1.
16    /// </summary>
17    public class WebForm1 : System.Web.UI.Page
18    {
19        protected System.Web.UI.WebControls.TextBox TextBox1;
20        protected System.Web.UI.WebControls.DropDownList DropDownList1;
21    
22        private void Page_Load(object sender, System.EventArgs e)
23        {
24            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
25            if (!Page.IsPostBack)
26            {
27                this.TextBox1.Attributes.Add("onchange", "cityResult();");
28                this.DropDownList1.Attributes.Add("onclick", "getData();");
29            }
30        }
31
32        Web Form Designer generated codeWeb Form Designer generated code#region Web Form Designer generated code
33        override protected void OnInit(EventArgs e)
34        {
35            //
36            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
37            //
38            InitializeComponent();
39            base.OnInit(e);
40        }
41        
42        /**//**//**//// <summary>
43        /// Required method for Designer support - do not modify
44        /// the contents of this method with the code editor.
45        /// </summary>
46        private void InitializeComponent()
47        {    
48            this.Load += new System.EventHandler(this.Page_Load);
49
50        }
51        #endregion
52
53        GetCityListGetCityList#region GetCityList
54        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
55        public DataSet GetCityList(int provinceid)
56        {
57            string sql = "select * from city where father like '%" + provinceid + "%'";
58            return GetDataSet(sql);
59        }
60        #endregion
61        GetDataSetGetDataSet#region GetDataSet
62        public static DataSet GetDataSet(string sql)
63        {
64            string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
65            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
66            DataSet ds = new DataSet();
67            sda.Fill(ds);
68            return ds;
69        }
70        #endregion
71
72    }
73}

3. 源代码下载   
4.数据库脚本

CREATE   TABLE   [ dbo ] . [ city ] (
     [ id ]   [ int ]   NOT   NULL ,
     [ cityID ]   [ nvarchar ] ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ city ]   [ nvarchar ] ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL ,
     [ father ]   [ nvarchar ] ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL ,
  CONSTRAINT   [ PK_city ]   PRIMARY   KEY   CLUSTERED  
(
     [ id ]   ASC
) WITH  (IGNORE_DUP_KEY  =   OFF )  ON   [ PRIMARY ]
)  ON   [ PRIMARY ]