将asp.net webform发送给JQuery的最佳实践自动完成

Question

我想要做的是从MS SQL Customer表电子邮件列中检索所有电子邮件，并使用JQuery自动填充功能填充它们。目前的系统使用VB.NET 2.0。

我所做的就是获取所有电子邮件，并将它们放入DataTable中并循环并放入由“，”分隔的字符串中。将该字符串放入隐藏框中。 JQuery从该隐藏框中检索值，并使用“array = emails.split（”，“）;”构建一个数组。这是代码。

它在开发服务器上效果不错，因为我们只有2000多条记录，但是当我把它放在有80,000多条记录的活动服务器上时，它会永久加载。

前端

<script type="text/javascript"> 
    $(function() {  
      var emails = $("#EmailList").val(); 
      var emailList = emails.split(","); 

      $(".email-autocomplete").autocomplete({ 
       source: emailList 
      }); 
     }); 

    </script> 
    <asp:TextBox class="email-autocomplete" ID="txtEmailAddress" 
runat="server" style="width:300px"></asp:TextBox>                   
    <asp:HiddenField ID="EmailList" runat="server" /> 

后端

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 

    FetchEmailList() 

End Sub 

Private Sub FetchEmailList() 
     Dim dt As Data.DataTable = GetCustomers() 
    Dim i As Integer 
    Dim _emails As String 

    For i = 0 To dt.Rows.Count()-1 
    If IsDBNull(dt.Rows(i).Item("Email")) = False Then 
     _emails &= dt.Rows(i).Item("Email") & "," 
    End If 
    Next 

    If _emails.length > 0 Then 
     EmailList.Value = _emails.substring(0,_emails.length-1) 
    End If 

End Sub 

我提出了两个解决方案 -

1. 当我从数据库中检索服务器的邮件，我将使用功能TableToStr和将由“，”分隔的所有电子邮件放在一个字段中，VB.NET将这些值放入隐藏框中。在这里，我们可以通过后台数据表删除循环。但是，JQuery仍然需要“拆分”该字符串来构建数组。我使用C＃在ASP.NET MVC3中完成了这一点，使用“return JSON”很容易，但需要做一些研究，如何做到这一点VB.NET 2.0）。

什么是当我们的数据源非常大时处理自动完成的最佳实践。

Answer 1

首先，我会将后端代码移动到一个通用的HttpHandler（.ashx）文件，然后通过AJAX从jQuery自动完成中调用该文件。此外，缓存AJAX响应将提高性能。

<script type="text/javascript> 
$(function() { 
    var cache = {}, 
     lastXhr; 
    $(".email-autocomplete").autocomplete({ 
     minLength: 2, 
     source: function(request, response) { 
      var term = request.term; 
      if (term in cache) { 
       response(cache[ term ]); 
       return; 
      } 

      lastXhr = $.getJSON("getEmails.ashx", request, function(data, status, xhr) { 
       cache[ term ] = data; 
       if (xhr === lastXhr) { 
        response(data); 
       } 
      }); 
     } 
    }); 
}); 
</script> 

*改编自jQuery UI的演示

JSON响应可能是简单的东西：{ "emails" : ["email1@email.com", "email2@email.com", "email3@email.com"]}

另外，你的后端代码也应使用StringBuilder而不是 '& ='。我发现字符串追加是一个巨大的性能打击。