jquery - 将 ASP.NET Web 表单发送到 JQuery 自动完成的最佳实践

Question

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

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

它在开发服务器上运行得很好，因为我们只有 2,000 多条记录，但当我将其放在有 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 仍然需要“拆分”该字符串来构建数组。

2. 从数据库获取电子邮件，构建 JSON 并将其返回到 JQuery。(我已经在 ASP.NET MVC3 中使用 C# 完成了此操作，使用“返回 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而不是“&=”。我发现字符串附加对性能造成巨大影响。