Question

我想在updatepanel的工作完成时显示进度动画，但不重新渲染updatepanel的内容。

如果我设置ChildrenAsTriggers =“false”，则不会触发UpdatePanelAnimationExtender的更新后脚本（函数onUpdated（））。
如果我将ChildrenAsTriggers设置为“true”，并单击show div按钮，则在更新完成后，将重新呈现updatepanel的内容（并再次隐藏div）。

我的代码：

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        function ShowHide(){
            var div = document.getElementById('div2');
            if (div.style.display=="none")
                div.style.display="";
            else
                div.style.display="none";


        }

            function onUpdating(){
               // get the update progress div
                var pnlPopup = document.getElementById("div2");                           

            }

            function onUpdated() {
                // get the update progress div
                var pnlPopup = $get("div2"); 
                // make it invisible

            }    

    </script>
</head>
<body>
 <form id="form11" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> 
      <ContentTemplate>
        <input id="Button1" onclick="ShowHide();" type="button" value="Show Div (click first)" />
        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Click"  />
&nbsp;<div id="div1" style="background-color:Red;width:700px;height:200px;"> </div>          
        <div id="div2" style="background-color:Blue;width:700px;height:500px;display:none;"></div>
      </ContentTemplate>
   </asp:UpdatePanel>       
   <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1"  runat="server">
       <Animations>
           <OnUpdating>
               <Parallel duration="0" >        
                   <ScriptAction Script="onUpdating();" />  
               </Parallel>
           </OnUpdating>
             <OnUpdated>
              <Parallel duration="0">             
                 <ScriptAction  Script="onUpdated();"  /> 
              </Parallel> 
           </OnUpdated>
      </Animations>
   </cc1:UpdatePanelAnimationExtender>

 </form>
</body>

protected void Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }

Answer 1

使用updateProgress控件，而不是使用UpdatePanelAnimationExtender扩展updatePanel。

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                &nbsp;<img src="loading.jpg" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
    }
}

Answer 2

我使用PageRequestManage实现了所需的结果，没有UpdatePanelAnimationExtender或UpdateProgress。

 with (Sys.WebForms.PageRequestManager.getInstance()) {
         add_beginRequest(onUpdating);
         add_endRequest(onUpdated);
     }

UpdatePanel和UpdatePanelAnimationExtender问题

2 个答案: