将 asp.net 网络表单发送到 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. 从 DB 获取电子邮件，构建 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 而不是“&=”。我发现字符串追加对性能有很大影响。