zoukankan      html  css  js  c++  java

  • 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代码


     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
    52
    53        GetCityList#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        GetDataSet#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]
  • 相关阅读:
    15款经典图表软件推荐 创建最漂亮的图表
    CSS+JS打造的自适应宽度的滑动门和选项卡
    兼容多浏览器的加入收藏代码
    指针与引用深层次的区别
    反编译winform资源文件
    程序创业必过三关
    自动ping博客服务程序
    C#批量加水印程序
    C#应用程序随机启动
    失败降临是命中注定
  • 原文地址：https://www.cnblogs.com/goody9807/p/972498.html
Copyright © 2011-2022 走看看