Ajax控件工具包AutoCompleteExtender由当前页面的字符显示HTML源代码字符作为自动完成建议列表 [英] Ajax Control Toolkit AutoCompleteExtender displays html source character by character of the current page as autocomplete suggestion list

问题描述

我想实施的http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx以我自己的网页。

作者说;

  

在这里，我解释，如何使用直接与ASP.Net Web页AJAX AutoCompleteExtender控件，而无需使用任何Web服务。

我

1. AjaxControlToolkit


2. 安装了toolikt


3. 根据我自己的目标写在code。

我的code是如下：

 ＆LT;！ -  Default.aspx的 - ＆GT;
＆LT;％@注册大会=AjaxControlToolkit命名空间=AjaxControlToolkit标签preFIX =CC1％GT;
...＆LT; ASP：的ScriptManager ID =ScriptManager1=服务器的EnablePageMethods =真＆GT;
＆LT; / ASP：ScriptManager的＆GT;...＆LT; ASP：文本框ID =txt_searchTerm=服务器＆GT;＆LT; / ASP：文本框＆GT;
＆LT; CC1：AutoCompleteExtender ID =AutoCompleteExtender1=服务器
     CompletionInterval =200最低prefixLength =4EnableCaching =假
     CompletionSetCount =10的TargetControlID =txt_searchTerm
     FirstRowSelected =假ServiceMethod =searchInDictionary＆GT;
＆LT; / CC1：AutoCompleteExtender＆GT;//Default.aspx.cs[System.Web.Script.Services.ScriptMethod（）]
[System.Web.Services.WebMethod]
公共静态列表＆LT;串GT; sea​​rchInDictionary（字符串prefixText，诠释计数）
{
    使用（康涅狄格州的OleDbConnection =新的OleDbConnection（））
    {
        conn.ConnectionString = ConfigurationManager中
                。.ConnectionStrings [myConnectionString]的ConnectionString;
        使用（OleDbCommand的CMD =新的OleDbCommand（））
        {
            cmd.CommandText =SELECT字从词典WHERE字LIKE @searchTerm +'％';
            cmd.Parameters.AddWithValue（@ SEARCHTERM，prefixText）;
            cmd.Connection =康恩;
            conn.Open（）;
            清单＆LT;串GT;结果=新的List＆LT;串GT;（）;
            使用（OleDbDataReader博士= cmd.ExecuteReader（））
            {
                而（dr.Read（））
                {
                    result.Add（DR [字]的ToString（））;
                }
            }
            conn.Close（）;
            返回结果;
        }
    }
 

输入4个字符插入文本框后，我得到持有太多chacarters是当前网页的HTML源列表。只有每行一个源$ C ​​$ C的性格。它像

 ＆LT;
！
ð
Ø
C
ŧ
ÿ
P
Ë
...
 

到

 ＆LT;
/
H
ŧ
米
升
＆GT;
 

我想自动完成单词癌症。我输入CANC，它列出了HTML源代码。

我已检查使用Firebug的页面
在网络选项卡中的XHR部分，POST操作火灾和值如下：

JSON

  10计
prefixTextCANC
 

源代码

  {prefixText：CANC，伯爵：10}
 

解决方案

我

1. 在当前的解决方案创建了一个Web服务。


2. 移动方法的 searchInDictionary 以在 APP_ code服务的cs文件文件夹中。

MyDictionary.cs如下：

  / *
APP_ code / MyDictionary.cs
* /
使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Services;
使用System.Web.Script.Services;
使用System.Data.OleDb;
使用System.Configuration;///＆LT;总结＆gt;
///为MyDictionary摘要说明
///＆LT; /总结＆gt;
[WebService的空间（namespace =htt​​p://tempuri.org/）]
[WebServiceBinding（ConformsTo = WsiProfiles.BasicProfile1_1）
//要允许此Web服务从脚本调用，使用ASP.NET AJAX，取消注释以下行。
 [System.Web.Script.Services.ScriptService]
公共类MyDictionary：System.Web.Services.WebService {    公共MyDictionary（）{        //取消注释以下行，如果使用设计的组件
        //的InitializeComponent（）;
    }    [ScriptMethod（）]
    [的WebMethod]
    //删除static修饰符
    //显示错误：未知的Web方法searchInDictionary。
    公开名单＆LT;串GT; sea​​rchInDictionary（字符串prefixText，诠释计数）
    {
        使用（康涅狄格州的OleDbConnection =新的OleDbConnection（））
        {
            conn.ConnectionString = ConfigurationManager中
                    。.ConnectionStrings [myConnectionString]的ConnectionString;
            使用（OleDbCommand的CMD =新的OleDbCommand（））
            {
                cmd.CommandText =SELECT字从词典WHERE字如@ prefixText
                cmd.Parameters.AddWithValue（@ prefixText，prefixText +％）;
                cmd.Connection =康恩;
                conn.Open（）;
                清单＆LT;串GT;结果=新的List＆LT;串GT;（）;
                使用（OleDbDataReader博士= cmd.ExecuteReader（））
                {
                    而（dr.Read（））
                    {
                        result.Add（DR [字]的ToString（））;
                    }
                }
                conn.Close（）;
                返回结果;
            }
        }
    }
}
 

<醇开始=3>

从方法删除修改的静态 searchInDictionary（）。因为我得到了错误：

  

未知的Web方法searchInDictionary。

<醇开始=4>

添加 ServicePath 属性 CC1：AutoCompleteExtender 元素

新的code：

 ＆LT; CC1：AutoCompleteExtender ServiceMethod =searchInDictionary最低prefixLength =4
     CompletionInterval =100EnableCaching =假CompletionSetCount =10
     的TargetControlID =txtWordSearchServicePath =Dictionary.asmx
     ID =AutoCompleteExtender1=服务器FirstRowSelected =false的＆GT;
＆LT; / CC1：AutoCompleteExtender＆GT;
 

修改Default.aspx的建立与Dictionar Web服务连接。

添加

 使用DictionaryServiceRef;
 

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

I am trying to implement the autocomplte example on http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx to my own web page.

Author says;

Here I am explaining, how to use AJAX AutoCompleteExtender Control directly with ASP.Net Web Page without using any web service.

I have

1. downloaded AjaxControlToolkit
2. installed the toolikt
3. written the code according to my own aim.

My code is as the following:

<!--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;
        }
    }

After typing 4 characters into the textbox I get a list which holds too many chacarters that are the current page's html source. There is only one character of the source code on each line. It is like

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

till

<
/
h
t
m
l
>

I am trying to autocomplete the word "Cancer". I type "canc" and it lists HTML source.

I have inspected the page using FireBug In the XHR section of Net tab, a POST action fires and the values are below:

JSON

count   10
prefixText  "canc"

Source

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

解决方案

I have

1. created a web service in the current solution.
2. moved the method searchInDictionary to the service's .cs file in the App_Code folder.

MyDictionary.cs is the following:

/*
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. removed the modifier static from the method searchInDictionary(). Because I got error:

Unknown web method searchInDictionary.

4. added ServicePath attribute to cc1:AutoCompleteExtender element.

new code:

<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. Modified Default.aspx for establishing connection with Dictionar web service.

added

using DictionaryServiceRef;

Now, it is working well. The next problem is how to link the word to display its explanation.

这篇关于Ajax控件工具包AutoCompleteExtender由当前页面的字符显示HTML源代码字符作为自动完成建议列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！