功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择
1.建立一aspx页面,html代码
< HTML>
<KOPF>
<title>WebForm1</title>
<SCRIPT language="javascript">
//城市---------------
Funktion cityResult()
{
var city=document.getElementById("TextBox1");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}
Funktion get_city_Result_CallBack(response)
{
if (response.value != null)
{
//Debugger;
document.getElementById("DropDownList1").style.display="block";
document.getElementById("DropDownList1").length=0;
var ds = Antwort.Wert;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].city;
var id=ds.Tables[0].Rows[i].cityID;
document.getElementById("DropDownList1").options.add(new Option(name,id));
}
}
}
anders
{
document.getElementById("DropDownList1").style.display="none";
}
zurückkehren
}
Funktion getData()
{
var Province=document.getElementById("DropDownList1");
var pindex = Province.selectedIndex;
var pValue = Province.options[pindex].value;
var pText = Province.options[pindex].text;
document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
}
</SCRIPT>
</HEAD>
<Körper>
<form id="Form1" method="post" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br>
<asp:DropDownList ID="DropDownList1" runat="server" Breite="192px" style="display:none"></asp:DropDownList>
</form>
</body>
</HTML>2.cs-Datei
Verwenden des Systems;
Verwenden von System.Collections;
mit System.ComponentModel;
Verwenden von System.Data;
Verwenden von System.Drawing;
mit System.Web;
using System.Web.SessionState;
mit System.Web.UI;
mit System.Web.UI.WebControls;
mit System.Web.UI.HtmlControls;
Verwenden von System.Data.SqlClient;
Namespace ajaxselect
{
/**//// <Zusammenfassung>
/// Zusammenfassende Beschreibung für WebForm1.
/// </summary>
öffentliche Klasse WebForm1: System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
if (!Page.IsPostBack)
{
this.TextBox1.Attributes.Add("onchange", "cityResult();");
this.DropDownList1.Attributes.Add("onclick", "getData();");
}
}
Vom Web Form Designer generierter Code#region Vom Web Form Designer generierter Code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: Dieser Aufruf wird vom ASP.NET Web Form Designer benötigt.
//
InitializeComponent();
base.OnInit(e);
}
/**//// <Zusammenfassung>
/// Erforderliche Methode für Designer-Unterstützung – nicht ändern
/// den Inhalt dieser Methode mit dem Code-Editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
GetCityList#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
öffentliches DataSet GetCityList(int ProvinceID)
{
string sql = "select * from city where Father like '%" + Provinceid + "%'";
return GetDataSet(sql);
}
#endregion
GetDataSet#region GetDataSet
öffentliches statisches DataSet GetDataSet(string sql)
{
string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
}
}3.源代码下载
4.数据库脚本
TABELLE ERSTELLEN [dbo].[Stadt](
[id] [int] NICHT NULL,
[cityID] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
[Stadt] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[Vater] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
CONSTRAINT [PK_city] PRIMÄRSCHLÜSSEL CLUSTERIERT
(
[id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMÄR]
) AUF [PRIMÄR]