好贷网好贷款

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

发布时间:2016-12-4 14:21:00 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中",主要涉及到Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中方面的内容,对于Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中感兴趣的同学可以参考一下。

功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择1.建立一aspx页面,html代码 <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)            {                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.cs代码 using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Data.SqlClient;namespace ajaxselect{    /**//// <summary>    /// Summary description for WebForm1.    /// </summary>    public class 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();");            }        }        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 where father like '%" + provinceid + "%'";            return GetDataSet(sql);        }        #endregion        GetDataSet#region GetDataSet        public static 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.数据库脚本 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]  

上一篇:三步堵死SQL注入漏洞
下一篇:Ajax简单示例之改变下拉框动态生成表格

相关文章

相关评论