將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而不是 '& ='。我發現字符串追加是一個巨大的性能打擊。