aspx UpdatePanel 更新后自动触发JS

Farmwang

于 2018-05-05 17:41:04 发布

阅读量496

点赞数

分类专栏： asp.net

asp.net 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

https://msdn.microsoft.com/zh-cn/library/bb311028.aspx

PageRequestManager 类管理浏览器中的部分页呈现。可以通过使用一个或多个 UpdatePanel 控件以及一个 ScriptManager 控件更新页面的各个区域。

您无需直接创建 PageRequestManager 的实例。启用部分页呈现后，将自动提供 PageRequestManager 类的一个实例。可以通过 getInstance 方法访问该实例。

PageRequestManager 类定义的事件可用于自定义页面的部分页呈现。像服务器页事件自动绑定到诸如 Page_Load 等方法一样，客户端基础结构也支持以类似的方式自动绑定事件。下表列出可以使用的客户端事件，以及可能需要处理这些事件的情况。这些事件按照 PageRequestManager 类调用它们的顺序在表中列出。

PageRequestManager 事件	说明
initializeRequest	在开始处理异步请求之前引发。可以使用此事件取消回发。
beginRequest	在开始处理异步回发、将回发发送到服务器之前引发。可以使用此事件来设置请求标头，或开始一个动画以指示正在处理页面。
pageLoading	在收到服务器对异步回发的响应之后、页上任何内容更新之前引发。可以使用此事件为更新的内容提供自定义转换效果。
pageLoaded	在因同步回发或异步回发而刷新页上的所有内容之后引发。可以使用此事件为更新的内容提供自定义转换效果。
endRequest	在异步回发完成，并且控制权返回到浏览器之后引发。可以使用此事件向用户提供通知或将错误记录到日志。

如果页至少包含一个 UpdatePanel 控件并且 ScriptManager 控件的 SupportsPartialRendering 值为 true（默认值），则定义 PageRequestManager 类的 JavaScript 库将向 ScriptManager 控件注册，并提供给页使用。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void ProcessClick_Handler(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>PageRequestManager beginRequest Example</title>
    <style type="text/css">
    body {
        font-family: Tahoma;
    }
    div.AlertStyle
    {
      background-color: #FFC080;
      top: 95%;
      left: 1%;
      height: 20px;
      width: 270px;
      position: absolute;
      visibility: hidden;
    }
	</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />

            <script type="text/javascript" language="javascript">
                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function BeginRequestHandler(sender, args)
                {
                     var elem = args.get_postBackElement();
                     ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...');
                }
                function EndRequestHandler(sender, args)
                {
                     ActivateAlertDiv('hidden', 'AlertDiv', '');
                }
                function ActivateAlertDiv(visstring, elem, msg)
                {
                     var adiv = $get(elem);
                     adiv.style.visibility = visstring;
                     adiv.innerHTML = msg;                     
                }
            </script>

            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                        Last update:
                        <%= DateTime.Now.ToString()%>.
                        <br />
                        <asp:Button runat="server" ID="Button1" Text="Process 1" OnClick="ProcessClick_Handler" />
                        <asp:Button runat="server" ID="Button2" Text="Process 2" OnClick="ProcessClick_Handler" />
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
            <div id="AlertDiv" class="AlertStyle">
            </div>
        </div>
    </form>
</body>
</html>