Question

我是webdev，Jquery和asp.NET的新手，我试图关注其他问题，并且已经解决了这个问题大约一个星期了。我似乎无法使用我的数据库。

我正在尝试使用Jquery，C＃和SQL数据库在我的asp.NET网页上为文本框实现一个简单的自动完成功能。到目前为止，我有一个C＃函数＆＃34;搜索（）＆＃34;它抓取结果类似于本地字符串。但是我目前还不知道如何将输入文本传递给这个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);
   //}
}

从我在线阅读的方法来看，实现这一目标的好方法是使用Jquery和ajax将用户输入从文本框发布到我的c＃代码然后获得结果。我试图跟随Jquery示例使用远程数据源进行自动完成（见https://jqueryui.com/autocomplete/#remote）。

但我正努力让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意见箱吗？

谢谢

编辑：以下是最终为我工作的解决方案，信誉Chetan Ranpariya。

<!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！

Answer 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
                        }
                    }))
                }
            });
        }
     });
});

在C＃中使用Jquery自动完成功能

1 个答案: