web2.0开发教程 Ajax Control Toolkit--输入提示

前言：最近一直在准备做项目，还要准备面试和期末考试。时间比较紧张，写的HTML基础教程也没有修改，要再过一段时间修改好再发布。可能有人觉得我写的太基础了，所以以后会伴随发布一些拓展的技术文章。今天就先给大家介绍一下怎么样使用 Ajax Control Toolkit里面的输入提示。大家如果有什么不懂的可以发这里：anewbieofit@126.com，

我会在博客里写一些相关的文章。

一、简介

　　这篇文章是描述怎么使用AJAX扩展控件来让一个文本框显示输入提示。

二、控件说明

Ajax Control Toolkit中提供了一个控件，叫做AutoCompleteExtender。它的功能是实现TextBox的输入提示。这个控件在使用前需要在TargetControlID 属性中绑定目标TextBox，原理是通过ajax访问webservice实现的。

三、使用方法

这个控件会访问服务端的web服务，然后显示匹配的提示。

要使用这个控件首先准备一个小型的数据库。

这篇文章用的例子是一个城市的提示。

Web服务中的函数，功能为获取一个城市列表，输入的参数名字一定要为prefixText

 

string sql = "SELECT City FROM cityname WHERE City LIKE @Text";
[WebMethod]
[ScriptMethod]
public string[] GetCity(string prefixText)
        {
            string[] cityname = null;
            try
            {
                using (SqlConnection sqlCon = new SqlConnection(@"Data Source=localhost\sqlexpress;Initial Catalog=City;Integrated Security=True"))
                {
                    sqlCon.Open();
                    using (SqlCommand sqlComd = sqlCon.CreateCommand())
                    {
                        sqlComd.CommandType = CommandType.Text;
                        sqlComd.CommandText = sql;
                        sqlComd.Parameters.Add(new SqlParameter("@Text", string.Format("{0}%", prefixText)));

                        using (SqlDataAdapter sqlAdpt = new SqlDataAdapter())
                        {
                            sqlAdpt.SelectCommand = sqlComd;

                            using (DataTable table = new DataTable())
                            {
                                sqlAdpt.Fill(table);
                                cityname = new string[table.Rows.Count];
                                int i = 0;
                                foreach (DataRow rdr in table.Rows)
                                {
                                    cityname[i] = rdr["City"].ToString().Trim();
                                    ++i;
                                }
                            }
                        }
                    }
                }
            }

            catch
            {
                //something went wrong
            }

            return cityname;
        }

然后，下面那是ASPX里面的代码，targetContralId就是目标控件，MinimumPrefixLength就是最少输入多少个字的时候提示，ServicePath是服务的路径，ServiceMethod是使用的函数名。

<asp:ScriptManager runat="server" id="ScriptManager1"/>
    <div>
    <asp:TextBox runat="server" id="txtCity"></asp:TextBox>
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtCity"
             MinimumPrefixLength="1" ServiceMethod="GetCity" ServicePath="cityquery.asmx"
            Enabled="true">
            </asp:AutoCompleteExtender>
    </div>

四、效果