集成 AJAX

• 下载演示项目及源代码 - 70 KB 

引言

本文介绍如何在不使用 Atlas 或已为您准备好相关功能的控件的情况下，将 AJAX 集成到您的网站中。这对于无法使用 Atlas 的环境很有用。如果您想更深入地了解异步客户端-服务器通信的工作原理及其涉及的问题，这篇文章也很有趣。介绍的技术包括将 JavaScript 嵌入 Web 应用程序的程序集中，从 C# 后台代码注册变量，以及使用 AJAX 与 C# 服务器端代码进行通信。

Using the Code

要部署 Web 应用程序，只需将 AJAXIntegration.zip 解压缩到 inetpub\wwwroot 目录中。然后使用 IIS 管理单元在 AJAXIntegration 目录上创建一个应用程序。

项目

最常见的 AJAX 应用之一是自动完成文本框。这些功能有助于维护数据完整性，并使输入表单保持相对简洁直观。关键组件来自 http://script.aculo.us/ 的一个出色的 JavaScript 库。该库除了其他实用功能外，还提供了一个优秀的自动完成实现。

关注点

我们首先创建一个 Web 用户控件，其中包含一个 textbox 以及连接 scriptaculous 库所需的装饰和方法。我将 scriptaculous 库直接保存在我的 Web 项目的根目录下，在一个名为 Scriptaculous 的文件夹中。用户控件的 asp.net 代码如下所示：

<asp:TextBox id="TextBox1" runat="server" Width="300px">
    </asp:TextBox>
<div id="TextBoxUpdate" runat="server" style="BORDER: 
    #888 1px solid; DISPLAY: none; WIDTH: 250px; 
    CURSOR: pointer; POSITION: absolute; HEIGHT: 300px; 
    BACKGROUND-COLOR: white"></div>

请注意，这里没有提到 JavaScript。所有的魔力都在后台代码中，在 PreRender 事件中。此事件在生成页面的大部分工作完成后调用。这是注册客户端脚本的合适位置

private void AutocompleteTextBox_PreRender(object sender, 
                                        System.EventArgs e)
{
    this.Page.RegisterArrayDeclaration(
        "Tallan_AutocompleteTextBox","'"+
        SearchBox.ClientID+"','"+SearchBoxUpdate.ClientID+
        "','"+"https:///AJAXIntegration/Fetch.aspx
            ?parameterId="+Parameter+"'");    

    string commonScriptKey = "AutocompleteTextBox";
    if ( !Page
        .IsClientScriptBlockRegistered(commonScriptKey) ) 
    {
        using (System.IO.StreamReader reader = 
                new System.IO.StreamReader(
                typeof(AutocompleteTextBox).Assembly
                .GetManifestResourceStream(typeof(
                AutocompleteTextBox),
                "AutocompleteTextBox.js"))
            )
        {
        // read the script
        String script = "<script language="'javascript'" 
            type='text/javascript' >\r\n<!--\r\n" + 
            reader.ReadToEnd() + "\r\n//-->\r\n</script>";

        // register the script and the init function
        this.Page.RegisterClientScriptBlock(
            commonScriptKey, script);
        this.Page.RegisterStartupScript(commonScriptKey, 
            "<script language="'javascript'" type='text
            /javascript' >\r\n<!--\r\n 
            Tallan_AutocompleteTextBox_Init(); \r\n//-->
            \r\n</script>");
        }
    }
}

这里的关键技术是使用 Page.RegisterArrayDeclaration、Page.IsClientScriptBlockRegistered、Page.RegisterClientScriptBlock 和 Page.RegisterStartupScript 来处理 ASP.NET 用户控件的动态性。我的意思是，用户控件可以部署在任何父控件下的任何页面上。因此，其 ID 会根据其所在位置而变化。然而，C# 后台代码可以访问该 ID，即 [some control].ClientId。因此，当脚本注册到页面时，JavaScript 就可以在客户端使用正确的控件进行操作。Page.RegisterArrayDeclaration 方法将在推送到客户端的 HTML 代码中创建一个新的 JavaScript 数组。如果数组已存在，则会向其追加内容。其他 register 方法用于仅在脚本尚未注册时进行注册。当您想在同一页面上使用多个控件时，这将非常有用，就像我在示例中将要做的那样。

以上代码中另一个值得关注的点是如何获取要注册的脚本。在 Page.RegisterStartupScript 调用中，我使用了行内文本，这些文本将按原样写入客户端。然而，在 Page.RegisterClientScriptBlock 中，我使用了 StreamReader 来访问“嵌入资源”。它的工作原理是：创建一个 JavaScript 文件，然后在 Solution Explorer 中右键单击并选择 Properties。在 Build Action 属性中，选择 Embedded Resource 选项。现在，当您编译项目时，该文本文件将可用，如上所示。作为一点补充说明，如果您的 JavaScript 从这些嵌入资源中的更改没有传播到已部署的应用程序，请尝试重新构建项目并重新部署它。这将确保您拥有程序集中最新可用的脚本副本。

注册到页面的 JavaScript 文件 AutocompleteTextBox.js 包含一个初始化方法，该方法在页面启动时由页面调用。正是这个方法将 AJAX 功能分配给 textbox。

function Tallan_AutocompleteTextBox_Init() {
    try
    {
        // Make sure the browser supports the DOM calls or 
        // JScript version being used.
        if (!Tallan_AutocompleteTextBox_BrowserCapable()) 
            { return; }
        // instantiate Ajax using the client ids
        for(var i=0;i<Tallan_AutocompleteTextBox.length; 
            i+=3 ){
            new Ajax.Autocompleter(
                Tallan_AutocompleteTextBox[i],
                Tallan_AutocompleteTextBox[i+1], 
                Tallan_AutocompleteTextBox[i+2], { 
                paramName: "search" });
        }
    }
    catch(e){}
}

基本上，整个连接只是实例化一个

new Ajax.Autocompleter

构造函数接受三个参数

• 需要自动完成的文本框的客户端 ID
• 将弹出并显示结果的 div 的客户端 ID
• 一个将返回自动完成选项的资源 URL
• 用于各种 scriptaculous 选项的参数

最后要讲的是提供自动完成选项的资源。您可以在 scriptaculous 网站上查找相关参数，因为它们会不断发布更新并拥有良好的文档 wiki。

Scriptaculous AJAX 需要一个简单的页面，该页面仅呈现一个 HTML 列表，格式如下：

<ul><li>autocomplete choice 1</li>
<li>autocomplete choice 2</li></ul> 

在这里，我们可以创建一个 aspx 页面（我称之为 Fetch.aspx），将其连接到某个服务器数据源并呈现动态或缓存的自动完成内容。首先，在您的项目中创建一个新的 Web 窗体，并确保删除生成源中除了页面标签之外的所有内容。这包括 form 标签、html 标签，以及所有其他内容。原因是 Internet Explorer 不会显示弹出式自动完成 div，如果页面比简单的 <ul> 列表更复杂的话。然后，您就可以在 Page_Load 事件中编写以下代码了。

string match = Request.Form["search"].ToLower();
Response.Write("<ul>");
foreach( string s in sample )
{
    if( s.ToLower().IndexOf(match) == 0 )
    {
        Response.Write("<li>"+s+"</li>");
    }
}
Response.Write("</ul>");

请注意，我们如何从 Request.Form 对象中获取“search”参数。该参数的名称在 Ajax.Autocompleter 构造函数中配置，该构造函数在上面讨论的 Tallan_AutocompleteTextBox_Init 函数中调用。示例数组只是一个 string[] 示例数据。您可以使用 Select 方法轻松地从 DataTable 获取数据。在 AutocompleteTextBox 控件中，我还包含了一个名为 Parameter 的属性，该属性最终通过查询字符串传递给 Fetch.aspx，例如 https:///AJAXIntegration/Fetch.aspx?parameterId=[Parameter]。您可以通过每个单独的控件通过 Request.QueryString 对象访问此属性以及您希望传递的任何其他属性。

最后一点需要注意的是，SmartNavigation 属性会干扰 InternetExplorer 的异步请求，至少在 scriptaculous 实现方面是这样。因此，在将要使用该控件的任何页面上禁用 SmartNavigation。

结论

现在，只需部署代码并亲自尝试一下。您也可以在 Visual Studio 或 Sharp Develop 中打开项目并浏览代码。请记住，您可以通过转到 Tools、Options、Advanced 并取消选中“Disable script debugging”选项来在 Internet Explorer 中启用脚本调试。这样做将允许您在 Scriptaculous 文件夹中的 js 文件中设置断点，并查看异步调用期间发生的情况。为了简洁起见，我没有涵盖完整的实现细节。因此，请不要犹豫提问。

许可证

本文没有明确附加许可证，但可能包含文章文本或下载文件本身的使用条款。如有疑问，请通过下面的讨论区联系作者。作者可能使用的许可证列表可以在 此处 找到。