AutoCompleteExtender Returns HTML Instead of JSON

Question

UPDATE 3:

Code behind for the GetGrowers call:

using AjaxControlToolkit;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.ServiceModel.Web;

namespace AmericanApple
{
public partial class ReceivingStation : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        bcDataTextBox.Focus();

    }


    [ScriptMethod]
    [WebMethod]
    public static string[] GetGrowers(string prefixText, int count)
    {
        string[] growers = { "American Apple", "Lewis", "Grice" };
        return growers;
    }
}
}

UPDATE 2:

I think I've identified the problem. When viewing the "Network" tab in Chrome developer tools, I can see the call to GetGrowers, and in the request headers, it's asking for application/json format, but in the response header, it returns text/html. So all those characters in the dropdown is actually the entire page in html.

In the working example I have, the response header for the Auto CE call is application/json. So for whatever reason, my project's response for this is not in the right format. I have checked the web.config file and don't see any differences between my working example and the project I'm working on.

UPDATE:

Image of what's happening in Chrome:

ORIGINAL:

I cannot get my AutoCompleteExtender to work. In Chrome and FireFox my auto complete results are a bunch of (random?) characters. In Internet Explorer only, when I click in the TextBox the page freezes and my Visual Studio output looks like this:

Exception was thrown at line 39, column 3 in eval code
0x800a1391 - JavaScript runtime error: 's' is undefined
Exception was thrown at line 37, column 3 in eval code
0x800a1391 - JavaScript runtime error: 'r' is undefined
Exception was thrown at line 31, column 3 in eval code
0x800a1391 - JavaScript runtime error: 'e' is undefined

...and keeps going like that indefinitely.

I have the latest AjaxControlToolkit installed: 17.1.1. I'm using VS Pro 2015 version 14.0.25420.01 Update 3. .NET Framework version 4.7.02046

In my Site.Master page I'm declaring

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

at the top and my script manager in the body:

<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

On the page running the AutoCompleteExtender:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<cc1:AutoCompleteExtender ID="AutoCompleteGrower" runat="server" TargetControlID="txtGrower"
    MinimumPrefixLength="0" CompletionInterval="100" EnableCaching="true" UseContextKey="false"
    ServiceMethod="GetGrowers" CompletionListCssClass="autocomplete_List" CompletionListItemCssClass="autocomplete_ListItem"
    CompletionListHighlightedItemCssClass="autocomplete_HighlightedListItem" FirstRowSelected="true">
</cc1:AutoCompleteExtender>

My TextBox:

<asp:TableCell><asp:TextBox ID="txtGrower" runat="server" CssClass="form-control" AutoCompleteType="None"></asp:TextBox></asp:TableCell>

I have not found an AutoCompleteExtender question on SO with this same error. What am I missing here? The error is occurring before my ServiceMethod can return, I know that much.

Answer 1

Well the solution that worked was to add the method to a web service file (asmx.cs).

So the class declaration looks like this:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class AmericanAppleServices : System.Web.Services.WebService
{

And the method declaration:

[WebMethod]
public string[] GetGrowers(string prefixText, int count)
{

Using this method I also have to have the Service path declared in my AutoCompleteExtender in my .aspx page:

ServicePath="AmericanAppleServices.asmx"

I still do not know why the other way did not work, but this will do for now. @MikhailTymchukDX thanks for all your help!