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>
<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
else31
{32
document.getElementById("DropDownList1").style.display="none";33
} 34
return35
}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代码
1
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Data;5
using System.Drawing;6
using System.Web;7
using System.Web.SessionState;8
using System.Web.UI;9
using System.Web.UI.WebControls;10
using System.Web.UI.HtmlControls;11
using System.Data.SqlClient;12
namespace ajaxselect13
{14
/**//// <summary>15
/// Summary description for WebForm1.16
/// </summary>17
public class WebForm1 : System.Web.UI.Page18
{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 code52
53
GetCityList#region GetCityList54
[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
#endregion61
GetDataSet#region GetDataSet62
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
#endregion71
72
}73
}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]
