在 C# 中使用 Jquery 自动完成
Posted
技术标签:
【中文标题】在 C# 中使用 Jquery 自动完成【英文标题】：Using Jquery Autocomplete with C# 【发布时间】：2017-08-23 15:41:52 【问题描述】：我是 webdev、Jquery 和 asp.NET 的新手，我尝试关注其他人的问题，并且已经研究这个问题大约一周了。我似乎无法让它与我的数据库一起使用。
我正在尝试使用 Jquery、C# 和 SQL 数据库为我的 asp.NET 网页上的文本框实现一个简单的自动完成功能。到目前为止，我有一个 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);
//
从我在线阅读的内容来看，实现此目的的一个好方法是使用 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！
【问题讨论】：
【参考方案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
))
);
);
);
【讨论】：
您好 Chetan，按照您的建议将我的 C# 方法声明为静态 Web 方法后，我仍然无法从 Jquery 调用此方法。我尝试通过在我的搜索方法中设置一个断点来进行调试，但它永远不会被击中。想法？ 您是否尝试过使用 fiddler 并查看当您对 web 方法进行 AJAX 调用时会发生什么？ 不，我没有也不能使用 fiddler 无法调试或知道当 AJAX 调用WebMethod 时会发生什么，我无能为力帮助您。您可以使用 Google Chrome 或 IE 的开发人员工具栏，并在网络选项卡中查看从 Web Method 返回的内容。至少您应该能够在那里看到 HttpStatus 代码。尝试调试 javascript 以查看是否真的命中了自动完成代码。
我刚刚注意到我的解决方案中有一个错误。我纠正了它。我更正了 url 并创建了 WebMethod public static。尝试更新的代码并使用开发人员工具栏查看它是否命中 URL 以及从服务器返回的内容。为错误的代码道歉..以上是关于在 C# 中使用 Jquery 自动完成的主要内容，如果未能解决你的问题，请参考以下文章
在 C# IHttphandler 上对 jQuery 自动完成的随机排序请求