asp.net - 具有多个更新面板的更新面板动画扩展器

Question

问:

我使用更新面板动画扩展器 ,,效果很好但不幸的是 ,,当我有不止更新面板时 在同一页面和任何部分帖子上 返回页面上的任何更新面板 扩展器工作(动画)..

如何使扩展器与 预期的一个(我添加的那个 扩展至 Only)..如果可能请采样

脚本:

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

在应该刷新的更新面板中添加触发器(在我的例子中是一个计时器)很重要。这样你就可以得到 parent

<小时/>

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