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サービスから受け取った結果で自動的に完成します。これは現在行っているようではありません。 Iveは、誰かが正しい方向に私を向けることができれば、1週間で数多くの方法を試しました。

EDIT：私のwebserviceとStringの戻り値がAjax/javascriptで期待されるJsonと比較して問題が発生する可能性がありますか？

Answer 1

これはWeb開発の共通要件であり、プロセスを簡素化するためにDev Expressによって提供されるコントロールがあります。 AjaxControlToolkitを使用します。そして、それを使用する例のhereの例です。