Question

问：

我使用更新面板动画扩展程序 ，它很好但很不幸 ,,当我有更多面板在同一页面和任何部分帖子返回页面上的任何更新面板扩展器工作（动画）..

如何使扩展器工作预期的那个（我添加的那个扩展到只））请尽可能提供样品

剧本：

    <script type="text/javascript" language="javascript">
    function onUpdating() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element
        var gridView = $get('<%=this.pnl_courseImg.ClientID %>');

        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);

        //    set the progress element to this position
        Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
    }
    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it invisible
        updateProgressDiv.style.display = 'none';
    }
</script>

我的ASPX：

<asp:Panel ID="pnl_courseImg" runat="server" HorizontalAlign="Center">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <contenttemplate>
                                            <br />
                                             <asp:ListView ID="lv_showCourseImages" runat="server" ItemPlaceholderID="a" 
                                                    onitemcommand="lv_showCourseImages_ItemCommand">
                          <LayoutTemplate>
                                                <table ID="Table1" runat="server" cellpadding="2" cellspacing="2" 
                                                    >

                                                    <tr ID="a" runat="server">
                                                    </tr>
                                                </table>
                                            </LayoutTemplate>
                                            <ItemTemplate>
                                                <tr ID="Tr1" runat="server">
                                                    <td>
                                                        <asp:Image ID="img_news" runat="server" ImageUrl='<%# "CourseImages" + "/" + Eval("FK_CourseCode") + "/"+  Eval("photoName")%>'  BorderWidth="4px" Height="355px" 
                            Width="410px"/>
                                                    </td>

                                                </tr>
                                                <tr id = "tr2" runat ="server">
                                                <td>
                                                    <asp:HiddenField ID="hf_newsImage" runat="server" Value ='<%#Eval("photoId")%>'/>
                                                    <asp:Button ID="btn_deleteImg" runat="server" Text="Delete" CommandName ="deleteImage" />
                                                    </td>
                                                </tr>
                                            </ItemTemplate>

                        </asp:ListView>
                         <asp:DataPager ID="dp_CourseImages" runat="server" 
                             PagedControlID="lv_showCourseImages" 
                            PageSize="1" onprerender="dp_CourseImages_PreRender">
                            <Fields>

                                <asp:NextPreviousPagerField ButtonType="Button" NextPageText="&gt;&gt;" 
                                    PreviousPageText="&lt;&lt;" ShowFirstPageButton="True" 
                                    ShowLastPageButton="True" />
                                     </Fields>
                        </asp:DataPager>

                        </contenttemplate>
        </asp:UpdatePanel>
        <cc3:updatepanelanimationextender id="UpdatePanel2_UpdatePanelAnimationExtender"
            runat="server" enabled="True" behaviorid="animation" targetcontrolid="UpdatePanel2">
                                                     <Animations>
                                                     <OnUpdating>
                                                         <Parallel duration="0">
                                                  <%-- place the update progress div over the gridview control --%>
                                                 <ScriptAction Script="onUpdating();" />  
                                                  <%-- disable the search button --%>                       
                                                     <EnableAction AnimationTarget="btn_deleteImg" Enabled="false" />
                                                     <%-- fade-out the GridView --%>
                                                     <FadeOut minimumOpacity=".5" />
                                                     </Parallel>
                                                     </OnUpdating>
                                                     <OnUpdated>
                                                     <Parallel duration="0">
                                                     <%-- fade back in the GridView --%>
                                                     <FadeIn minimumOpacity=".5" />
                                                     <%-- re-enable the search button --%>  
                                                     <EnableAction AnimationTarget="btn_deleteImg" Enabled="true" />
                                                     <%--find the update progress div and place it over the gridview control--%>
                                                    <ScriptAction Script="onUpdated();" /> 
                                                    </Parallel> 
                                                    </OnUpdated>
                                                    </Animations>

                                                </cc3:updatepanelanimationextender>
    </asp:Panel>

我还有一个更新面板，当点击其中的按钮时会触发此更新面板中的扩展程序如何解决此问题。

提前致谢..

Answer 1

ASP.NET Forums被盗（抱歉，不知道如何直接获取指定帖子的链接）：

好的，我解决了。这是我的解决方案：

只需将以下javascript添加到您的页面

即可

<script type="text/javascript">
var currentPostBackElement;

function pageLoad()
{
    var manager = Sys.WebForms.PageRequestManager.getInstance();
    manager.add_initializeRequest(OnInitializeRequest);
}


function OnInitializeRequest(sender, args)
{
    var manager = Sys.WebForms.PageRequestManager.getInstance();
    currentPostBackElement = args.get_postBackElement().parentElement;
}
</script>

并使用UpdatePanelAnimationExtender中的ConditionScript，如下所示：

<ajaxToolkit:UpdatePanelAnimationExtender ID="MyExtender" runat="server" TargetControlID="updPanel">
    <Animations>
        <OnUpdating>
            <Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
                <FadeOut AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" /> 
            </Condition>
        </OnUpdating>
        <OnUpdated>
            <Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
                <FadeIn AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" /> 
            </Condition>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

更新面板中应该刷新的触发器（在我的情况下是一个计时器）很重要。所以你可以得到父母

我没有测试这个解决方案，希望它对你有帮助。

Answer 2

Ajax Control Toolkit现在由DevExpress维护，此错误已得到解决。我将DLL更新到版本18.1，并且不再遇到问题。

使用多个更新面板更新面板动画扩展器

2 个答案: