Question

我有一个webform，我有一个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。

但是，我最近添加了一个updatepanel和一个updateprogress ...现在我认为它不再起作用，因为不会发生回发。

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

<%@ 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 ...它仍然没有工作，所以我猜问题不存在......可能是在updatepanel上

Answer 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

如何在ASP.NET c＃上放置UpdateProgress后触发JavaScript事件？

1 个答案: