ASP.Net，包含自动完成功能

Question

这是我的第一个 ASP.Net 应用程序，请多多包涵。我正在尝试在文本框中加入自动完成功能。目前，我有一个名为 ChampNameService.asmx 的 WebService 设置，它根据用户输入的内容从数据库返回一个字符串。

当我测试服务时，它似乎工作正常：

aspx 文件如下所示：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <form id="form1" runat="server">

    <ul>
        <li><a href="Webpages/Data/Champdata.aspx">Home</a></li>
    </ul>

        <link href="Styles/jquery-ui.min.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-ui.min.js" type="text/javascript"> </script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
                 $(function () {
        $('#<%= TextBox1.ClientID %>').autocomplete({
            source: function (request, response) {
                $.ajax(
                 {
                    url: "ChampNameService.asmx/GetChampionNames",
                    data: "{ 'Champname': '" + request.term + "' }",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert('There is a problem processing your request');
                    }
                });
            },
            minLength: 0
        });
            });

        </script>


<p>What champion are you playing? </p>
    <asp:TextBox ID="TextBox1" runat="server" CausesValidation="True"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
    <asp:GridView ID="gvChamps" runat="server"></asp:GridView>


    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </form>

这是我遇到问题的部分：

            <link href="Styles/jquery-ui.min.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-ui.min.js" type="text/javascript"> </script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
                 $(function () {
        $('#<%= TextBox1.ClientID %>').autocomplete({
            source: function (request, response) {
                $.ajax(
                 {
                    url: "ChampNameService.asmx/GetChampionNames",
                    data: "{ 'Champname': '" + request.term + "' }",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert('There is a problem processing your request');
                    }
                });
            },
            minLength: 0
        });
            });

        </script>

我也是 Javascript 新手，但我下载并导入了正确的文件并修改了 javascript 以反映我自己的代码。我期望发生的是，当用户输入一个字符的名称时，它将使用从 Web 服务收到的结果自动完成它。目前似乎没有这样做。我在一周内尝试了多种方法，如果有人能指出我正确的方向，那就太好了。

编辑：问题可能是我的 web 服务中 String 的返回值与 ajax/javascript 中预期的 Json 的区别？

Answer 1

这是 Web 开发中的常见要求，Dev Express 提供了一些控件来简化流程。使用AjaxControlToolkit。而且，here 是一个如何使用它的示例。