如何在ASP上处理UpdateProgress后触发JavaScript事件.净c#

本文关键字：JavaScript 事件 UpdateProgress ASP 处理 | 更新日期: 2023-09-27 18:03:41

我有一个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是不可见的，当它应该是可见的。我想我必须调用viewcalendar()后，一切都完成…

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

更新:我刚刚去掉了updateprogress…但还是不行，所以我想问题不在这里……可能在updatepanel

如何在ASP上处理UpdateProgress后触发JavaScript事件.净c#

当UpdatePanel更新时，DOM也发生了变化，您需要重新运行加载页面时所做的初始化操作。当你添加UpdatePanel时，这是用asp.net包含的javascript函数完成的。因此，将onload从体内取出，使用pageLoad。

因此从这行删除onload 

<body onload="viewCalendars();">

并添加以下脚本

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

类似于如何在UpdatePanel部分回发后保存javascript
参考:Ajax客户端生命周期事件

相关文章：