在 ASP.NET c# 上处理 UpdateProgress 后如何触发 JavaScript 事件？答案

【问题标题】：How to fire JavaScript Event after UpdateProgress is disposed on ASP.NET c#?在 ASP.NET c# 上处理 UpdateProgress 后如何触发 JavaScript 事件？
【发布时间】：2013-03-02 00:08:42
【问题描述】：

我有一个网络表单，其中有一个 javascript 函数，用于评估它是否应该显示一个 div... 这是函数...

function viewCalendars()
            {
                if (document.getElementById('ddlDates').value == '5')
                {
                    document.getElementById('divSpecificDates').style.display = 'inline';
                }

                else
                {
                    document.getElementById('divSpecificDates').style.display = 'none';
                }

                return;
            }

我也将此添加到我的表单中

<body onload="viewCalendars();">
//Everything
</body>

因此，即使有回发，如果下拉列表选择了特定值，它也会显示 div。

但是，我最近添加了一个更新面板和一个更新进度...现在我认为这将不再起作用，因为不会发生回发。

这就是我现在所拥有的......

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Consumptions.aspx.cs" Inherits="Station.Consumptions" %>
<%@ Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>
            Lista De Consumos
        </title>

        <link href="css/Style.css" type="text/css" rel="stylesheet"/>

        <style type="text/css">
            #blur
            {
                width: 100%;
                background-color: black;
                moz-opacity: 0.5;
                khtml-opacity: .5;
                opacity: .5;
                filter: alpha(opacity=50);
                z-index: 120;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            #progress
            {
                border: black 1px solid;
                padding: 5px;
                z-index: 100;                
                width: 250px;
                position: absolute;
                background-color: #fff;
                -moz-opacity: 0.75;
                font-family: Tahoma;
                font-size: 11px;
                font-weight: bold;
                text-align: center;
            }
        </style>

        <script type="text/javascript">
            function viewCalendars()
            {
                if (document.getElementById('ddlDates').value == '5')
                {
                    document.getElementById('divSpecificDates').style.display = 'inline';
                }

                else
                {
                    document.getElementById('divSpecificDates').style.display = 'none';
                }

                return;
            }
        </script>
    </head>

    <body onload="viewCalendars();">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm" runat="server">
            </asp:ScriptManager>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    <div id="blur">
                    </div>
                    <div id="progress">
                        <asp:Image ID="imgLoading" GenerateEmptyAlternateText="true" runat="server" ImageUrl="~/images/loading.gif" />
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:UpdatePanel ID="upd" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="ddlDates" CssClass="tbox" runat="server">
                    </asp:DropDownList>

                    <div runat="server" id="divSpecificDates" style="display: none; width: 100%; z-index: 1000;">
                    </div>

                    &nbsp;
                    <asp:Button Text="Filtrar" CssClass="btn" runat="server" ID="btnFilter" onclick="btnFilter_Click" />
                </ContentTemplate>

                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </form>
    </body>
</html>

所以，我注意到当你点击 btnFilter 按钮后，它的功能会被触发，虽然 updateprogress 是可见的，但是在它消失后（并且 btnFilter 功能完成） divSpecificDates 在应该可见的时候是不可见的。我想我必须在一切完成后调用 viewCalendars()...

我必须如何以及在哪里调用这个函数？？

更新：我刚刚摆脱了updateprogress...它仍然无法正常工作，所以我想问题不存在...可能它在更新面板上

【问题讨论】：

stackoverflow.com/a/1153002/1402923

标签： c# javascript asp.net updatepanel updateprogress

【解决方案1】：

当 UpdatePanel 更新时，DOM 发生了变化，您需要重新运行加载页面时所做的初始化。这是通过添加 UpdatePanel 时 asp.net 包含的 javascript 函数完成的。所以从正文中删除onload 并使用pageLoad。

所以去掉这一行的onload

<body onload="viewCalendars();">

并添加此脚本

<script>
   function pageLoad() { 
      viewCalendars();
   }  
</script>

类似how to keep javascripts after UpdatePanel partial postback
参考：Ajax Client Side Life Cycle Events

【讨论】：

我正在更新一些遗留系统，而这正是我想要的。谢谢@Aristos