使用ASP.NET的JQuery UI自动完成的有效方法

我在我的ASP.NET-C＃网站上使用JQuery UI Autocomplete。

JavaScript的：

$(function () { var availableTags = [  ]; $("input.tag_list").autocomplete({ source: availableTags }); }); 

代码隐藏中的C＃函数：

 public string GetAvaliableTags() { var tags = new[] { "ActionScript", "Scheme" }; return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x))); } 

这工作正常。 但我怀疑如果我从数据库中获取大量标签，它会立即加载页面加载上的所有标签，使其变慢。 我想到的有效方法是使用Ajax。 但我不是Ajax程序员，对此知之甚少。 任何人都可以告诉我如何有效地使用Ajax吗？ 如何按需调用GetAvailableTags ？

UPDATE

我试过这样的：

  $(function () { var availableTags = [function () { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "CreateTopic.aspx/GetAvaliableTags", data: "{ 'key' : '" + $("input.tag_list").val() + "'}", dataType: "json", async: true, dataFilter: function (data) { return data; }, success: function (data) {if (result.hasOwnProperty("d")) { $("input.tag_list").autocomplete({ source: result.d }); } else { // No .d; so just use result $("input.tag_list").autocomplete({ source: result }); }); }]; $("input.tag_list").autocomplete({ source: availableTags }); }); 

Web方法等效于GetAvailableTags()

 [System.Web.Services.WebMethod] public static string GetAvaliableTags(string key) { var tags = new[] { "ActionScript", "Scheme" }; return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x))); } 

但Ajax调用没有被解雇。 可能是什么原因？

Answer 1

我建议在服务器端使用ASP.NET AJAX页面方法，并让jQuery .ajax()函数调用它来检索数据，如下所示：

代码隐藏：

 [WebMethod] public static string GetAvailableTags() { // Put logic here to return list of tags (ie load from database) var tags = new[] { "ActionScript", "Scheme" }; return String.Join(",", tags.Select(x => String.Format("\"{0}\"", x))); } 

标记：

 $(document).ready(function() { $.ajax({ type: "POST", url: "PageName.aspx/GetAvailableTags", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(result) { if (result.hasOwnProperty("d")) { // The .d is part of the result so reference it // to get to the actual JSON data of interest $("input.tag_list").autocomplete({ source: result.d }); } else { // No .d; so just use result $("input.tag_list").autocomplete({ source: result }); } } }); }); 

---

注意：您需要将PageName.aspx的名称更改为.aspx页面的名称。 此外， .d语法是Microsoft在ASP.NET AJAX的ASP.NET 3.5版本中提供的反XSS保护; 因此检查.d属性是否存在。

Answer 2

我在Intranet应用程序中实现了一个很好的解决方案; 它使用带有HttpHandler的jQuery UI自动完成function，并且只搜索以输入中的任何内容开头的客户; 它也仅在键入3个或更多字符时触发。 这意味着您永远不会检索整个表，只是它的一部分。

首先是HttpHandler。 我不会进入数据检索的螺母和螺栓，因为你可以自己弄清楚那部分。 可以说它调用存储过程来返回名称以（发送给Handler的任何内容）的客户，并返回一个JSON序列化的匹配数组到Autocomplete处理程序。

 using Newtonsoft.Json; namespace Invoicing.HttpHandlers { [WebService(Namespace = "yournamespace/http-handlers/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class CustomerHandler : IHttpHandler { #region IHttpHandler Members public bool IsReusable { get { return false; } } public void ProcessRequest(HttpContext context) { // your data-retrieval logic here // write json to context.Response } } 

如果您不习惯这种方法，我会快速描述JSON部分。

基本上，我有一个名为“ResponseCustomer”的小包装类型对象，因为我只需要自动完成处理程序的客户ID和名称，而不是完整的客户详细信息： –

 [Serializable] public class ResponseCustomer { public int ID; public string CustomerName; } 

IHttpHandler.ProcessRequest调用我的存储过程，并将结果转换为IList – 这意味着返回的JSON尽可能精简： –

  public void ProcessRequest(HttpContext context) { string json = string.Empty; // note the httpcontext.Request contains the search term if (!string.IsNullOrEmpty(context.Request["term"])) { string searchTerm = context.Request["term"]; var customers = (data access component).CustomerSearch(searchTerm); // call Search stored proc if (customers.Count != 0) { var transformList = new List(); for (int index = 0; index < customers.Count; index++) { transformList.Add(new ResponseCustomer { ID = customers[index].ID, CustomerName = customers[index].CustomerName }); } // call Newtonsoft.Json function to serialize list into JSON json = JsonConvert.SerializeObject(transformList); } } // write the JSON (or nothing) to the response context.Response.Write(json); } 

到现在为止还挺好 ？

确保将此HttpHandler连接到web.config（请注意，对于IIS6而言，您必须以与IIS 7+不同的方式执行此操作）： -

      ie  and for IIS7: -     

最后在客户端连接，如您所知： -

HTML： -

  Customer    

JS： -

 $(function () { $("#txtCustomer").autocomplete( { source: "customerHandler.ashx", // note minlength, triggers the Handler call only once 3 characters entered minLength: 3, select: function (event, ui) { if (ui.item) { $("#txtCustomer").val(ui.item.CustomerName); return false; } } }) .data("autocomplete")._renderItem = function (ul, item) { // insert an item into the autocomplete dropdown (YMMV) return $("
") .data("item.autocomplete", item) .append("
" + item.CustomerName + "
[ID " + item.ID + "]") .appendTo(ul); }; }); 

如果有帮助，请告诉我，如果您愿意，我可以通过电子邮件向您发送相关的源文件。