在 AJAX 局部回发期间添加 JavaScript 和 CSS

引言

本文将展示如何在 AJAX 部分回发响应中注入 JavaScript 和 CSS。如果您已经开始使用 AJAX，您可能已经注意到，在 AJAX 回发期间，只有 UpdatePanel 中的项目会被刷新。 这被称为 AJAX 部分回发或 AJAX 部分页面呈现。如果您以编程方式插入代码，例如自定义 JavaScript 或 CSS，用于您在 UpdatePanel 中的用户控件，您可能已经注意到，CSS 或 JavaScript 没有在部分回发响应期间发送回客户端的浏览器。 这适用于仅在部分回发响应中发送的新代码。

问题分析

出现上述情况的原因是，我们过去用于以编程方式将代码插入回发的一些旧方法不再适用于 AJAX 部分回发。 这些方法是在 AJAX 出现之前开发的。 在 AJAX 部分回发期间不起作用的对象示例有：

// ClientScript (ClientScriptManager class)
// will not work on an ajax partial postback
ClientScript.RegisterStartupScript(...)     
// Page.Header.Controls.Add will not work on an ajax partial postback 
Page.Header.Controls.Add(...);

解决方案

解决方案称为 ScriptManager。 ScriptManager 方法基本上相同，但需要一个额外的参数，即页面或控件。 ScriptManager 会在 AJAX 部分回发期间将所有内容发送回客户端。 因此，如果我们需要注入 JavaScript，我们必须利用 ScriptManager 对象。

示例 1：插入 JavaScript

要插入 JavaScript，请使用 RegisterStartupScript 方法，如下所示

// Javascript "Hello World" alert box using RegisterStartupScript 
ScriptManager.RegisterStartupScript(this,
                                    typeof(nameOfPageOrControl),
                                    "typeAUniqueScriptNameHere1",
                                    "alert('Hello World');", true);

请注意，如果您将脚本放置在用户控件中，nameOfPageOrControl 将是用户控件的名称，否则为页面类名称。

示例 2：插入 JavaScript 包含文件

要插入 JavaScript 包含文件，请使用 RegisterClientScriptInclude 方法，如下所示

// Register a Javascript include file during a partial postback
ScriptManager.RegisterClientScriptInclude(this,
                                          typeof(nameOfPageOrControl),
                                          "typeAUniqueScriptNameHere2",
                                          ResolveUrl("~") + "myscript.js");

同样，如果您将脚本放置在用户控件中，nameOfPageOrControl 将是用户控件的名称，否则为页面类名称。

示例 3：插入 CSS 包含文件

要插入 CSS 包含文件，请使用 RegisterClientScriptBlock 方法，如下所示

// Register a CSS file during a partial postback
ScriptManager.RegisterClientScriptBlock(this,
                                        typeof(nameOfPageOrControl),
                                        "typeAUniqueScriptNameHere3",
                                        "<link href='" +
                                        ResolveUrl("~") +
                                        "mystyle.css' rel='stylesheet' type='text/css' />",
                                        false);

同样，如果您将脚本放置在用户控件中，nameOfPageOrControl 将是用户控件的名称，否则为页面类名称。 另外，请注意最后一个参数设置为 false。 当此参数为 false 时，脚本块不会放置在代码中，因为 CSS 不使用脚本块。

关于 CSS 和示例 3 代码的注意事项

在某些情况下，上述示例 3 可能需要用脚本标签包装，并且添加脚本标签的最后一个参数设置为 true 而不是 false

string script1;
string script2;

script1 = "<link href='" +
          ResolveUrl("~") +
          "mystyle.css' rel='stylesheet' type='text/css' />";

script2 = "//]]></script>" +
          script1 +
          "<script type=\"text/javascript\">//<![CDATA[";

ScriptManager.RegisterClientScriptBlock(this,
                                        typeof(nameOfPageOrControl),
                                        "typeAUniqueScriptNameHere3",
                                        script2,
                                        true);

关注点

关键参数（调用 RegisterClientScriptBlock 中的最后一个参数）必须是唯一的，这一点非常重要。 在上面的示例中，我使用了不同的键名，例如 typeAUniqueScriptNameHere1。 确保此键不同，否则您的脚本将被其他脚本覆盖。 我希望本文能帮助您以编程方式将代码放置到 AJAX 部分回发中。

历史

• 1.0 - 2008 年 1 月 9 日 - 原始版本。
• 1.1 - 2008 年 1 月 9 日 - 添加了关于上述示例 3 的注释。