2017-03-29 4 views
0

私はwebdev、Jquery、asp.NETを初めて使用しています。他の質問に従おうとしましたが、今この問題を約1週間作業しています。私はそれが私のデータベースで動作するように見えることはできません。C#でJqueryオートコンプリートを使用

私はasp.NET Webページ上のテキストボックスに対して、Jquery、C#、およびSQLデータベースを使用して簡単なオートコンプリート機能を実装しようとしています。これまでは、ローカルの文字列に似た結果を取得するC#関数 "Search()"があります。しかし、私は現在、このC#関数に入力テキストを渡す方法を知らない。ここで

は私の.csファイルです:

protected void Page_Load(object sender, EventArgs e) 
{ 

} 

protected void Search(object sender, EventArgs e) 
{ 
    List<string> results; 
    //ListBox1.Items.Clear(); 
    results = OleDb.fDbReadToArray(@"SELECT Project_Name from tProjectNames where Project_Name like '" + Local_String_to_be_passed from asp.NET + "%'"); 
    //foreach (string item in results) 
    //{ 
    // ListBox1.Items.Add(item); 
    //} 
} 

私がオンライン読んだこれを達成するための良い方法は、私のC#コードにテキストボックスからユーザーの入力を投稿するjQueryとAJAXを使うだろうから、と結果を得る。私はリモートデータソース (https://jqueryui.com/autocomplete/#remoteを参照)で自動完成のJqueryの例に従おうとしています。

しかし、私はJqueryを自分のC#関数にするのに苦労しています。ここに私のasp.NETは次のとおりです。

<html lang="en"> 


<head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>jQuery UI Autocomplete - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script> 
      $(function() { 
       $("#ProjectNames").autocomplete({ 
        source: "live_search.aspx.cs/Search()", 
        select: function (event, ui) { 
         log("Selected: " + ui.item.value + " aka " + ui.item.id); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

    <div> 
     <label for="ProjectNames">Project Names: </label> 
     <input id="ProjectNames" type ="text" oninput="Search()" /> 
    </div> 


    </body> 
</html> 

誰もが入力テキストボックスにユーザーのタイプは、私のC#関数に行き何を取得し、バックjQueryの提案ボックスに結果を投稿する方法を教えてもらえます?ここでは私のために働くことになったソリューション、クレジットチェタンRanpariyaがある :

はあなたに

EDITありがとうございます。

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="jquery-1.12.4.js"></script> 
    <script src="jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(function() { 
       $("#ProjectNames").autocomplete({ 
        source: function (request, response) { 
         var objdata = JSON.stringify({ 
          obj: { 
           query: $("#ProjectNames").val() 
          } 

         }); 
         $.ajax({ 
          url: "Live_Search1.aspx/Search", 
          data: objdata, 
          type: "POST", 
          contentType: "application/json; charset=utf-8", 
          dataFilter: function (data) { return data; }, 
          success: function (data) { 
           response($.map(data.d, function (item) { 
            return { 
             label: item, 
             value: item 
            } 
           })) 
          } 
         }); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form" runat="server"> 
     <div> 
       <asp:label for="ProjectNames" runat="server">Project Names: </asp:label> 
       <input ID="ProjectNames" type ="text" runat="server" /> 
     </div> 
    </form> 
</body> 
</html> 

は.cs:

誰もが、これは、計算上、私に知らせリストは、おそらく数千人にあるように成長するプロジェクトを念頭においてください改善することができる方法上の任意の編集者を持っている場合
public class Myobj 
{ 
    public string query { get; set; } 
} 


[System.Web.Services.WebMethod] 
public static List<string> Search(Myobj obj) 
{ 

    List<string> projectList = new List<string>() { "project", "sam", "daniel" }; 
    List<string> results = new List<string>() { }; 
    foreach(string project in projectList) 
    { 
     if(project.Contains(obj.query)) 
     { 
      results.Add(project); 
     } 
    } 
    return results; 
} 

。もう一度Chetan Ranpariyaに感謝します!

答えて

1

ページのコードの背後に静的なWebメソッドを作成してから、クライアント側からURL {yourpage}.aspx/{yourmethod}を使用して呼び出すことができます。また、クライアント側でキャプチャして使用できるデータも返す必要があります。

したがって、Searchメソッドは次のように作成する必要があります。ここではSearchメソッドはパラメータを受け付けません。 このメソッドから検索された文字列値のリストが返されます。このメソッドはクライアント側でJSONとして取得されます。どのような方法でも使用できます。

[System.Web.Services.WebMethod] 
public static List<string> Search() 
{ 
    List<string> results; 
    //ListBox1.Items.Clear(); 
    results = OleDb.fDbReadToArray(@"SELECT Project_Name from tProjectNames where Project_Name like '" + Local_String_to_be_passed from asp.NET + "%'"); 

    //foreach (string item in results) 
    //{ 
    // ListBox1.Items.Add(item); 
    //} 
    return results; 
} 

そして、あなたは、次のようにjQueryのからメソッドを呼び出します。

$(function() { 
    $("#ProjectNames").autocomplete({ 
     source: function (request, response) { 
      var objdata = { 

      }; 

      $.ajax({ 
       url: "live_search.aspx/Search", 
       data: JSON.stringify(objdata), 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataFilter: function (data) { return data; }, 
       success: function (data) { 
        response($.map(data.d, function (item) { 
         //item here is a string value coming from server. 
         return { 
          label: item, 
          value: item 
         } 
        })) 
       } 
      }); 
     } 
    }); 
}); 
+0

提案したようにC#メソッドを静的なWebメソッドとして宣言した後も、このメソッドをJqueryから呼び出すことはできません。私は、検索メソッドでブレークポイントを設定してデバッグしようとしましたが、決してヒットしません。思考? – TeeseCaprice

+0

あなたはフィドラーを使用して、AJAX呼び出しがWebメソッドに行われたときに何が起こるかを確認しようとしましたか? –

+0

いいえ私はしていないと私は、フィドラーを使用することはできません – TeeseCaprice

関連する問題