将ASP.NET WebForm发送到JQuery自动完成的最佳实践

Question

我想要做的是从MS SQL客户表Email列中检索所有电子邮件，并在使用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仍然需要“split”该字符串以构建数组。

2. 从DB获取电子邮件，构建JSON并将其返回给JQuery。（我已经在ASP.NET MVC3中使用C#完成了这项工作，使用“return JSON”非常容易，但需要进行一些研究来确定如何在VB.NET 2.0中完成它）。

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

- Jonas T

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" : ["[e-mail]", "[e-mail]", "[e-mail]"]}

此外，您的后端代码还应该使用StringBuilder而不是'&='。 我发现字符串附加对性能有很大影响。

- Mutt

---

谢谢Mutt。指出StringBuilder非常有帮助。我知道字符串是不可变的，但没有想太多。我只是改成了StringBuilder，性能由2分钟提高到3秒。我稍后将其更新为JSON。虽然加载问题已经解决，但JQuery自动完成Javascript工作速度太慢，无法及时显示列表。 - Jonas T