使用 Ajax 控件工具包实现自动建议功能的初学者指南

• 下载 AutoExtender.zip - 928.3 KB

介绍 

本技巧描述了如何使用 AJAXControlExtender 创建自动完成文本框。 我们还将实现一个小应用程序来展示如何完成此操作。

背景  

Ajax control toolkit 提供了 AutoCompleteExtender ，可用于创建自动完成文本框，而无需过多开销。 也可以使用 XMLHttpRequest 或 jQuery AJAX 来创建相同的功能，但也许我会为此编写另一个技巧。

AutoCompleteExtender 需要首先附加到一个文本框。 这可以使用扩展器的 TargetControlID 属性来完成。 获取自动完成结果的处理将在服务器端完成。 通常，这在 Web 服务中包含的静态方法中完成。

使用代码

然后，扩展器可以使用此 Web 服务从服务器端获取数据并显示建议。 

所以让我们创建一个小应用程序，该应用程序将在用户在 textbox 中键入时建议国家/地区列表。 让我们从查看数据库开始。 现在让我们创建一个小型数据库。

现在让我们创建一个小型 Web 服务，该服务将从数据库中搜索建议结果。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService 
{
    const string selectQuery = "SELECT Country FROM Countries WHERE Country LIKE @prefixText";

    [WebMethod]
    public string[] GetCountriesList(string prefixText)
    {
        string[] cntName = null;
        try
        {
            using (SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString))
            {
                sqlCon.Open();                
                using (SqlCommand sqlComd = sqlCon.CreateCommand())
                {
                    sqlComd.CommandType = CommandType.Text;
                    sqlComd.CommandText = selectQuery;
                    sqlComd.Parameters.Add(new SqlParameter("@prefixText", string.Format("{0}%", prefixText)));

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

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

        catch 
        {
            //something went wrong
        }

        return cntName;
    }
   
}

现在让我们将 AutoCompleteExtender 与此 Web 服务连接起来，配置它以使用此 GetCountriesList 方法，并使其与页面上的文本框一起工作。

<asp:scriptmanager runat="server" id="ScriptManager1"><services>
	<asp:servicereference path="AutoComplete.asmx">
</asp:servicereference></services>
</asp:scriptmanager>
<div>
<asp:textbox runat="server" id="txtCountry" />
<ajaxtoolkit:autocompleteextender completioninterval="10" enablecaching="true" minimumprefixlength="1" servicemethod="GetCountriesList" servicepath="WebService.asmx" targetcontrolid="txtCountry" id="autoComplete1" runat="server">
</ajaxtoolkit:autocompleteextender></div>
</asp:scriptmanager>

注意： ScriptManager 已添加到页面，因为它使 AJAX control toolkit 正常工作所必需。 它将负责向客户端注册所有必要的脚本，用于客户端服务器异步通信。 

现在让我们运行页面并查看结果。

 

当用户在文本框中键入时，将显示建议。 这些结果是异步从服务器端获取的。 

关注点

我们已经了解了如何使用 AJAX control toolkit 的 AutoCompleteExtender 实现自动建议功能。 本文是从绝对初学者的角度编写的。 还有其他方法可以做到这一点，我可能会发布所有这些方法。 此外，AJAX control toolkit 中还有许多有用的控件，也许我也会逐一讨论它们。 

历史

• 2012年6月30日：第一个版本。