Ajax控件工具包AutoCompleteExtender会将当前页面的HTML源代码逐个字符地显示为自动完成建议列表。

Question

我正在尝试将http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx 的自动完成示例引用到我的网页中。

作者说：

在这里我将解释如何直接在 ASP.Net Web 页面上使用 AJAX AutoCompleteExtender 控件而不使用任何 Web 服务。

我已经：

1. 下载了AjaxControlToolkit
2. 安装了工具包
3. 根据自己的目的编写了代码。

我的代码如下：

<!--Default.aspx-->
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
...

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

...

<asp:TextBox ID="txt_searchTerm" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
     CompletionInterval="200" MinimumPrefixLength="4" EnableCaching="false"
     CompletionSetCount="10" TargetControlID="txt_searchTerm"
     FirstRowSelected="false" ServiceMethod="searchInDictionary">
</cc1:AutoCompleteExtender>

//Default.aspx.cs

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> searchInDictionary(string prefixText, int count)
{
    using (OleDbConnection conn = new OleDbConnection())
    {
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["myConnectionString"].ConnectionString;
        using (OleDbCommand cmd = new OleDbCommand())
        {
            cmd.CommandText = "SELECT word FROM Dictionary WHERE word LIKE  @searchTerm + '%'";
            cmd.Parameters.AddWithValue("@searchTerm", prefixText);
            cmd.Connection = conn;
            conn.Open();
            List<string> result = new List<string>();
            using (OleDbDataReader dr = cmd.ExecuteReader())
            {
                while (dr.Read())
                {
                    result.Add(dr["word"].ToString());
                }
            }
            conn.Close();
            return result;
        }
    }

在文本框中输入四个字符后，我得到了一个列表，其中包含太多当前页面HTML源代码的字符。每行只有一个源代码字符。就像这样：

<
!
D
O
C
T
Y
P
E
...

直到。

<
/
h
t
m
l
>

我正在尝试自动完成单词"Cancer"。当我输入"canc"时，它会列出HTML源代码。

我使用FireBug检查了页面，在Net标签的XHR部分，POST操作触发，并且以下是值：

JSON

count   10
prefixText  "canc"

来源

{"prefixText":"canc","count":10}

- zkanoca

---

你能告诉我你的数据库中第一列有什么文本吗？ - Venkataraghavan Yanamandram

尝试进行调试，查看 searchInDictionary 方法是否被执行以及其执行结果如何。 - dario

听起来自动完成功能返回的是HTML页面而不是序列化数据；您能否在某个时候检查Ajax调用（使用Glimpse、Fiddler或Firebug）？ - Tieson T.

Answer 1

我已经在当前解决方案中创建了一个Web服务。

1. 将方法searchInDictionary移至服务的.cs文件，位于App_Code文件夹中。

MyDictionary.cs如下：

/*
App_Code/MyDictionary.cs
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data.OleDb;
using System.Configuration;

/// <summary>
/// Summary description for MyDictionary
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class MyDictionary : System.Web.Services.WebService {

    public MyDictionary() {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [ScriptMethod()]
    [WebMethod]
    //removed static modifier
    //display error: Unknown web method searchInDictionary.
    public List<string> searchInDictionary(string prefixText, int count)
    {
        using (OleDbConnection conn = new OleDbConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["myConnectionString"].ConnectionString;
            using (OleDbCommand cmd = new OleDbCommand())
            {
                cmd.CommandText = "SELECT word FROM Dictionary WHERE word LIKE @prefixText";
                cmd.Parameters.AddWithValue("@prefixText", prefixText + "%");
                cmd.Connection = conn;
                conn.Open();
                List<string> result = new List<string>();
                using (OleDbDataReader dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {
                        result.Add(dr["word"].ToString());
                    }
                }
                conn.Close();
                return result;
            }
        }
    }
}

3. 从方法searchInDictionary()中删除修饰符static，因为我遇到了以下错误：

Unknown web method searchInDictionary.

4. 向cc1:AutoCompleteExtender元素添加ServicePath属性。

新代码：

<cc1:AutoCompleteExtender ServiceMethod="searchInDictionary" MinimumPrefixLength="4" 
     CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
     TargetControlID="txtWordSearch" ServicePath="Dictionary.asmx"
     ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">
</cc1:AutoCompleteExtender>

5. 修改Default.aspx以与字典Web服务建立连接。

添加

using DictionaryServiceRef;

现在，它运行良好。下一个问题是如何将单词链接起来以显示其解释。

- zkanoca

---

嘿，我仍然遇到同样的问题。 - Vijay Kumbhoje

去掉“static”帮了我很大的忙。谢谢！ - brz

Answer 2

将您的 WebMethod 从 protected 更改为 public

public static List<string> searchInDictionary(string prefixText, int count)
{
//your code here
}

- Mairaj Ahmad

---

谢谢，但我已经尝试过了。忘记修改问题中的代码了。 - zkanoca

你能进入WebMethod并进行调试吗？ - Mairaj Ahmad

Answer 3

我在将一个在VS 2005中编写的自动完成代码移植到VS 2013项目后，遇到了同样的问题。在做了以下操作后，问题得到解决：

1）我的ServiceMethod叫做'GetSuggestions'，并位于包含自动完成文本框的同一表单的代码后台中。我首先向项目中添加了一个新的Web服务类（AutoCompleteSample.asmx），并将服务方法移动到该类中（AutoCompleteSample.asmx.cs）。

2）在AutoCompleteExtender控件的属性中，我添加了一个属性ServicePath="AutoCompleteSample.asmx"

3）取消注释Web服务类定义之前的属性[System.Web.Script.Services.ScriptService]，以使条目看起来像下面这样：

[System.Web.Script.Services.ScriptService]
public class AutoCompleteSample : System.Web.Services.WebService
{

4）确保用于自动完成的服务方法具有 [System.Web.Script.Services.ScriptMethod] 属性，以便它看起来像下面这样：

    [System.Web.Services.WebMethod] 
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetSuggestions(string prefixText, int count)
    {

进行以上更改后，问题得到了解决。

- Mahesh Ghugare