如何使用asp.net 4.0與c＃一起使用auto complete extender

Question

我只想使用自動完成擴展程序來查找與用戶輸入文本框相關的結果。 這是我的代碼：

[System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> GetTickets(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList(); 
            foreach(var item in enquiry)
            {
                if(item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay,IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }

這是我的設計代碼：

    <asp:TextBox ID="TextBox1" runat="server" CssClass="input" Width="115px"                                                                      ValidationGroup="TicketSearch"></asp:TextBox>
     <ajaxToolkit:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetTickets"
TargetControlID="TextBox1" CompletionListCssClass="popUpDialog">
</ajaxToolkit:AutoCompleteExtender>

並顯示結果發現我包括這個css類，如：

.popUpDialog
        {
            z-index: 99 !important;
        }

        .autoComplete_listMain
        {
            z-index: 2147483647 !important;
            background: #ffffff;
            border: solid 2px #808080;
            color: #000000;
        }

- - - - - - - - - - - - - - - -更新 - - - - - - - - - ----------------

現在我使用這種技術：

<script language="javascript" type="text/javascript">
    $(function () {
        $('#<%=TextBox1.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "MasterPage.master/GetTickets",
                    data: "{ 'pre':'" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return { value: item }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });
    });
</script>

這是設計：

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="TextBox1" ServicePath="" ServiceMethod="GetTickets" MinimumPrefixLength="1" EnableCaching="true" CompletionListCssClass="completionList" 
                                                                                                                    CompletionListItemCssClass="listItem" 
                                                                                                                    CompletionListHighlightedItemCssClass="itemHighlighted"/>

代碼背后：

 [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    [System.Web.Services.WebMethod]
    public static List<string> GetTickets(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList();
            foreach (var item in enquiry)
            {
                if (item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay, IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }

我在運行時發現此錯誤：

Server Error in '/CRM' Application.

This type of page is not served.

Description: The type of page you have requested is not served because it has been explicitly forbidden.     Please review the URL below and make sure that it is spelled correctly. 

Requested URL: /CRM/Staff/MasterPage.master/GetTickets

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

- - - - - - - - - - - - - 更新 - - - - - - - - - - - -

我試過Jalpesh的建議

在這里我創建一個服務，如：

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Linq;
using System.Configuration;
using System.Collections.Generic;
/// <summary>
/// Summary description for AutoComplete
/// </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 AutoComplete : System.Web.Services.WebService
{

    public AutoComplete()
    {

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

    [WebMethod]
    public List<string> GetTicketList(string prefixText)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {
            List<string> Tickets = new List<string>();
            string userid = db.Users.Where(u => u.Username.Equals((String)HttpContext.Current.Session["Username"])).Select(u => u.Ref_no).SingleOrDefault();
            var enquiry = db.Enquiries.Where(i => (i.ForwardTo.Equals(userid) || i.AttendBy.Equals(userid))).ToList();
            foreach (var item in enquiry)
            {
                if (item != null)
                {
                    var flag = db.Flags.Where(f => f.Enquiry_History_id.Equals(item.Ref_no) && f.User_id.Equals(userid)).Select(f => new { IsDisplay = f.IsDisplay, IsRead = f.IsRead }).ToList();
                    bool IsIns = true;
                    foreach (var item1 in flag)
                    {
                        if (item1.IsDisplay == false)
                        {
                            IsIns = false;
                        }
                        if (item1.IsRead == true)
                        {
                            IsIns = false;
                        }
                    }
                    if (IsIns == true)
                    {
                        Tickets.Add(item.Ref_no.ToString());
                    }
                }
            }
            return Tickets;
        }
    }
}

這是我的自動完成擴展程序：

  <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="TextBox1" ServicePath="AutoComplete.asmx" ServiceMethod="GetTicketList" MinimumPrefixLength="1" EnableCaching="true" CompletionListCssClass="completionList" 
                                                                                                                    CompletionListItemCssClass="listItem" 
                                                                                                                    CompletionListHighlightedItemCssClass="itemHighlighted"/>      

最后在這里jquery調用它：

<script language="javascript" type="text/javascript">
    $(function () {
        $('#<%=TextBox1.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/GetTicketList",
                    data: "{ 'pre':'" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return { value: item }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        });
    });
</script>

這給了我這樣的錯誤：

Server Error in '/CRM' Application.

Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.InvalidOperationException: Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace: 


[InvalidOperationException: Request format is unrecognized for URL unexpectedly ending in '/GetTicketList'.]
   System.Web.Services.Protocols.WebServiceHandlerFactory.CoreGetHandler(Type type, HttpContext context, HttpRequest request, HttpResponse response) +518909
   System.Web.Services.Protocols.WebServiceHandlerFactory.GetHandler(HttpContext context, String verb, String url, String filePath) +212
   System.Web.Script.Services.ScriptHandlerFactory.GetHandler(HttpContext context, String requestType, String url, String pathTranslated) +47
   System.Web.HttpApplication.MapHttpHandler(HttpContext context, String requestType, VirtualPath path, String pathTranslated, Boolean useAppConfig) +203
   System.Web.MapHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +128
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +184

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

Answer 1

您尚未在自動填充擴展程序中添加服務路徑。

ServicePath="AutoComplete.asmx"

還有你在自動完成擴展器上面的腳本管理器。 如果沒有，請把它放在下面。

<ajaxToolkit:ToolkitScriptManager  ID="ScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>