ajaxpro实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

 
下载后添加引用 Ajax.dll

功能：在textbox中输入内容，动态从数据库模糊查询显示到下拉框中，以供选择
1.建立一aspx页面，html代码

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  Codebehind = " WebForm1.aspx.cs "  Inherits = " Web.WebForm1 "   %>

< HTML >
     < HEAD >
         < title > WebForm1 </ title >
         < SCRIPT language = " javascript " >             
             // 城市------------------------------
          
            function cityResult() 
             { 
                  var city=document.getElementById("TextBox1");
                WebForm1.GetCityList(city.value,get_city_Result_CallBack);
            }
            
            function get_city_Result_CallBack(response)
             {
              var city=document.getElementById("TextBox1");
             
                if (response.value != null)
                {                    
                    //debugger;
                    document.getElementById("DropDownList1").style.display="block";
                    document.getElementById("DropDownList1").length=0;　　　　            
　　　　            var ds = response.value;
                    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));
　　　　                }
                    }
                }
                else
                {
                    document.getElementById("DropDownList1").style.display="none";
                }             
                return
            }
           
            function 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 >
     < body >
         < form id = " Form1 "  method = " post "  runat = " server " >
             < asp:TextBox ID = " TextBox1 "  runat = " server " ></ asp:TextBox >
             < br >
             < asp:DropDownList ID = " DropDownList1 "  runat = " server "  Width = " 192px "  style = " display:none " ></ asp:DropDownList >
         </ form >
     </ body >
</ HTML >
 

2后台代码

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Web.Services;
using  OG.DBUtility;
namespace  Web
{
    public partial class WebForm1 : System.Web.UI.Page
    {


        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();");
            }
        }



        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**//**/
        /**//**/
        /**//**/
        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion



        GetCityList#region GetCityList
        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
        public DataSet GetCityList(int provinceid)
        {
            string sql = "select * from city ";
            return GetDataSet(sql);
        }
        #endregion


        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            DataSet ds = DbHelperSQL.Query(sql);

            return ds;
        }
        #endregion




    }
}

 

 

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]

5：添加配置文件

    <httpHandlers>
 
  <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
 </httpHandlers>