AJAX 动态查找控件， 支持多个控件

• 下载源文件 - 27.5 Kb
• 下载演示项目 - 42.2 Kb

引言

本文扩展了 firefalcon 的Implementing an Ajax.NET-based Lookup Server Control，以支持同一网页上的多个控件。如果您参考这项工作，您会发现它是以下技术和项目的组合：

1. Ajax.NET - 它提供了允许在 .NET 平台上轻松实现 AJAX 的框架。AJAX 是一组技术，它允许在不要求客户端（通常是 Web 浏览器）回发的情况下进行服务器端处理。
2. Julian Robichaux 的 JavaScript 控件用于显示查找结果 - 这段代码是 Google Suggest 项目的派生版本，它包含了执行实际 XML-Http 查找的功能。Firefalcon 的版本剥离了这一点，并通过 Ajax.NET 使用回调函数来实现服务器端调用。您可能还对 Chris Justus 的 Google Suggest Dissected 感兴趣；该项目采用原始的 Google Suggest JavaScript 并使其更易读。
3. ASP.NET "Ajax Lookup" TextBox 用户控件 - 这是放置在网页上并整合所有内容的控件。
4. Harald Hope 和 Tapio Markula 的浏览器检测：我包含了一个单独的 JavaScript，用于检测正在使用的浏览器。尽管对于这个特定项目来说它可能看起来有点过度，但我预计该控件将在较大的项目中使用，而这些项目无论如何都需要适当的浏览器检测。由于新的浏览器不断出现，最好单独维护这一点。

在我为支持多控件的实现中，主要的变化在于 JavaScript。ASP.NET 控件中的变化主要与它动态生成的 JavaScript 有关。

开发人员工具

当我第一次尝试在一个基本的 ASP.NET 页面中运行服务器控件时，实际上花了几天时间才让它正常工作。在此过程中，我不得不尝试理解正在发生的事情，以便能够进行一些调试和跟踪，找出问题所在。直到这时，我一直回避 JavaScript，原因很简单，它太难调试了。如果您打算在自己的项目中此代码，并且您还没有做多少 JavaScript 编程，我建议您在开发过程中使用以下工具：

1. Mozilla Firefox 浏览器 - 有许多优秀的附加组件扩展，非常适合开发网页。
2. Venkman JavaScript 调试器 - IMHO，这是唯一值得使用的 JavaScript 调试器。它适用于 Firefox 和 Netscape。
3. Firebug - 这个 Firefox 扩展可以在执行期间检测代码错误，并允许您检查与服务器之间进行通信的 XML-Http 请求。它还能做更多事情。

对原始 "Ajax Lookup" 的更改

• JavaScript .js 文件不再作为控件参数指定。这是因为我们只希望包含它一次，无论页面上有多少个控件。这意味着您必须手动将适当的脚本文件包含在您的网页或用户控件中的某个位置。
• 为了方便起见，添加了额外的参数，包括 FontSize、FontWeight、DivWeight、ItemStyleBorderBottom、ItemStylePadding、ItemStyleSpacing。每个参数为每个控件都有自己的变量，因此第一个控件的 FontSize 变量将是 0FONT_SIZE；第二个控件是 1FONT_SIZE，依此类推。大多数参数都有默认值；请参阅 AjaxLookup.cs 以了解这些默认值。
• 由于大部分代码被推回到了 JavaScript 文件中，控件动态生成的唯一脚本是参数（如上所述）以及对 InitQueryCode 的调用，该调用对每个控件执行一次。
• IE Bug：在所有修改过程中，某个时候出现了一个旧的 IE Bug。这与 InitQueryCode 在整个页面渲染完成之前就被调用有关。为了防止此 Bug，我不得不添加一个 setTimeout 调用来延迟 InitQueryCode 的执行。您可以通过在互联网上搜索 "IE Bug" 和 "setTimeout" 来找到更多信息。
• 查找回调过程返回的数组必须是数组对的数组。例如：

  [ ["Mary", "555-1212"], ["John", "976-1000"], ["Jim", "888-4141"] ]

• 如果结果太多，您可以返回

  ["!more", "Too many results."]

  作为您的数组列表的最后一个项。当检测到 !more 时，另一个字符串（在本例中为 "Too many results."）将被显示，并且不能被选为选项。

限制

• 每次调用 mainLoop 函数时（频率由 setTimeout 持续时间决定），它会遍历所有 axLookup 控件。页面上的控件越多，您可能会在返回结果之前经历轻微的“锁定”现象。这是因为您当前正在输入的控件必须在控件队列中等待它的回合。这就是为什么我添加了一个变量，允许您为每个网页指定超时时间。您可能需要根据页面上的控件数量来调整这个数字。
• 原始 JavaScript 代码有一个算法，可以动态调整 setTimeout 参数。我看了一下，不太明白它是如何工作的，所以没有费心去重新实现它。它对于多控件的重新实现是否可以避免手动设置超时，我不知道。
• 我只在一个地方根据是否使用 IE 浏览器来调用备用代码。我并没有在多种浏览器上真正测试过代码，也无法保证完全的跨浏览器兼容性。

使用代码

1. 安装 Ajax.NET；请确保您的 .NET bin 目录中有 ajax.dll 包装库，并且 web.config 中有 HttpHandler。

   <httpHandlers>
     <add verb="POST,GET" path="ajax/*.ashx" 
            type="Ajax.PageHandlerFactory, Ajax" />
   </httpHandlers>

2. 如果您使用的是 axLookup 的编译版本，请确保 axLookup.dll 库位于您的 ./bin 目录中。
3. 两个 JavaScript 脚本 browser_detection.js 和 axLookup.js 应该放在您网站的根目录中，但您可以将它们放在任何您喜欢的地方。
4. 在您的 HTML 顶部包含这些行：

   <script language="javascript" src="browser_detection.js"></script>
   <script language="javascript" src="axlookup.js"></script>

5. 添加一个可选的超时时间（默认为 1000 毫秒）来调用主循环。

   <script language="javascript">
   //<!--
   
       // Set timeout for axLookup
   
       axl_timeout = 2000;
   //-->
   
   </script>

6. 在您的 HTML 中添加一个或多个控件：

   <Ajax:AjaxLookup id="someId" Runat="Server" Width="70px"
    ItemStyleSpacing="10px"
    ItemStylePadding="1px 0px 1px 0px"
    ItemStyleBorderBottom="0px"
    DivWidth=""
    FontWeight="bold"
    FontSize="12px"
    BackgroundColor="#EEE"
    DivBorder="2px solid red"
    DivPadding="2px"
    DivFont="Arial"
    HighlightColor="#C30"
    CallBackFunction="Classname.Functionname" />

请注意，将 DivWidth 留空将使框根据您的文本自动调整到正确的大小。

历史

• 2006-06-08：初始发布。