如何在UpdatePanel中调用JS客户端脚本

在 ASP.NET 中，可以使用 UpdatePanel 控件来实现局部异步刷新页面的效果。但是，默认情况下，UpdatePanel 不支持调用客户端JS脚本。本文就讲解如何在 UpdatePanel 中调用JS客户端脚本，通过两个示例帮助读者更好地理解。

方法一：使用ScriptManager类的RegisterStartupScript方法

在 UpdatePanel 的异步 PostBack 请求结束后，ScriptManager 提供了 RegisterStartupScript 方法，可以在页面加载期间将客户端脚本添加到页面上。选择 UpdatePanel 的异步 PostBack 请求结束时，是因为我们需要页面上的元素被更新后才调用客户端JS脚本，否则可能会导致 JS 脚本失效。

以下是一个示例，定义一个 UpdatePanel 和一个带有 onclick 事件的按钮，点击按钮后弹出一个 JS 警告框：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Click me" OnClick="Button1_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

在代码后端 Button1_Click 方法中，使用 ScriptManager 的 RegisterStartupScript 方法添加JS脚本：

protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(UpdatePanel1, GetType(), "key", "alert('Hello, world!');", true);
}

其中，第一个参数 UpdatePanel1 代表 来自这个 UpdatePanel1 的异步请求结束后执行这段 JS 脚本；GetType() 代表返回当前运行对象的类型，可以根据自己的实际情况修改；第三个参数代表这个脚本的唯一 key ，避免重复执行；第四个参数代表添加到页面上的JS脚本。

方法二：使用__doPostBack函数

ASP.NET 提供了一个特殊的函数，__doPostBack。该函数在处理控件的 postback 状态的同时，还可以附加一个 JS 脚本。

以下是一个示例：

<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button2" runat="server" Text="Click me" OnClick="Button2_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    function callJsFunc() {
        alert('Hello, world!');
    }
</script>

在 Button2 的后端代码中，使用 __doPostBack 函数来调用 JS 脚本：

protected void Button2_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Button2, GetType(), "key", "__doPostBack('" + UpdatePanel2.ClientID + "','');callJsFunc();", true);
}

其中第一个参数 Button2 代表 这个脚本的返回部分用于处理 Button2 的点击事件；第二个参数是GetType() 用法的同一个；第三个参数和前面的一样，是这个脚本的唯一标识；第四个参数传 true，代表脚本是用于更新整个页面，而不只是 UpdatePanel 区域；第五个参数 __doPostBack('" + UpdatePanel2.ClientID + "','');callJsFunc();" 是我们主要关注的，其中调用了 __doPostBack 函数，在逗号后面传入 UpdatePanel 控件的 ClientID，表示这个异步请求结束后更新 UpdatePanel 的同时，还需调用 callJsFunc ，实现 JS 函数的调用。

通过以上两种方式，我们就可以在 UpdatePanel 中调用 JS 客户端脚本了。