如何在UpdateProgress放置在ASP.NET c＃之後觸發JavaScript事件？

我有一個WebForm，我有一個評估它是否應該顯示一個div ... 這裏的功能的JavaScript函數...如何在UpdateProgress放置在ASP.NET c＃之後觸發JavaScript事件？

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

來源

2013-03-13 Victor

http://stackoverflow.com/a/1153002/1402923 – RobH 2013-03-13 20:33:53

當UpdatePanel的更新時， DOM正在發生變化，您需要重新運行您在加載頁面時執行的初始化。這是通過添加UpdatePanel時asp.net包含的JavaScript函數完成的。因此，從身體上刪除onload並使用pageLoad。

所以從這個線

<body onload="viewCalendars();">

除去在onload並添加此腳本

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

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

來源

2013-03-13 20:53:47 Aristos

我正在更新一些遺留系統，這正是我所尋找的。謝謝@Aristos – 2017-07-06 07:43:54

如何在UpdateProgress放置在ASP.NET c＃之後觸發JavaScript事件？

回答

相關問題