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

I have a webform where I have a javascript function that evaluates whether or not it should display a div... here's the function...

我有一个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;
            }

I also added this to my form

我也把这个添加到我的表格中

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

So even if there was a postback, it will show the div if the dropdownlist has an specific value selected.

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

However, I recently added both an updatepanel and an updateprogress... and now I think that the will not work anymore since a postback will not occur.

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

Here's what I have now...

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

<%@ 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>

So, I noticed that after you click the btnFilter button, it's function will be triggered, while the updateprogress is visible, but after it disappears (and the btnFilter function is completed) divSpecificDates is not visible when it should be visible. I suppose that I have to call viewCalendars() after everything is done...

所以，我注意到你单击btnFilter按钮后，它的功能将被触发，而updateprogress可见，但在它消失后（并且btnFilter函数完成）divSpecificDates在应该可见时是不可见的。我想我必须在完成所有事情后调用viewCalendars（）...

How and where do I have to call for this function??

如何以及在何处调用此功能？

UPDATE: I just got rid of the updateprogress... and it's still not working, so I guess the problem is not there... probably it's on the updatepanel

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

1 个解决方案

#1

When the UpdatePanel is updated, the DOM is change, and you need to re-run the initialization's that you do when you load a page. This are done with javascript function that asp.net includes when you add the UpdatePanel. So remove the onload from the body and use the pageLoad.

UpdatePanel更新后，DOM会发生变化，您需要重新运行加载页面时执行的初始化操作。这是通过添加UpdatePanel时asp.net包含的javascript函数完成的。因此从主体中删除onload并使用pageLoad。

So remove the onload from this line

所以从这一行删除onload

<body onload="viewCalendars();">

and add this script

并添加此脚本

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

类似如何在UpdatePanel部分回发后保留javascripts参考：Ajax客户端生命周期事件

#1