本文介绍了如何对多个UpdatePanel使用UpdatePanelAnimationExtender的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在页面上有2个更新面板，每个面板具有单独的telerik radtabstrip(按需键入选项卡)，每个选项卡具有单独的用户控件.我想显示各个选项卡单击的加载图像，直到控件加载.我为每个更新面板使用单独的UpdatePanelAnimationExtender.我正在调用单独的javascript进行onupdup和onupdated调用.但是，图像将为所有面板而不是特定面板加载.我尝试使用条件脚本，但没有解决方案.下面是代码.如果有人可以帮助我，我将不胜感激！
I have 2 update panels on a page each having seperate telerik radtabstrip (type on demand tab) each tab having separate user control. I want to show loading image for respective tab click until the control load. I am using separate UpdatePanelAnimationExtender for each update panel. I am calling separate javascript for onupdating and onupdated call. However the image get load for all the panel instead of particular panel. I tried with condition script but no solution. Below is the code. I would appreciate it a lot if someone can help me!
<body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="trscrt" runat="server" EnablePageMethods="true" EnablePartialRendering="true"> </asp:ToolkitScriptManager> <script type="text/javascript" language="javascript"> function onTabSelecting(sender, args) { if (args.get_tab().get_pageViewID()) { args.get_tab().set_postBack(false); } document.myPanel = args.get_tab().get_pageViewID(); } //Mytab function onUpdating_Mytab() { var updateProgressDiv_Mytab = $get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display = ''; var Targetcontrol = $get('RadTabStrip_Mytab'); var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol); var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Mytab); var x = 300; var y = 200; Sys.UI.DomElement.setLocation(updateProgressDiv_Mytab, x, y); } function onUpdated_Mytab() { var updateProgressDiv_Mytab = $get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display = 'none'; } function onUpdating_Hot_Listing() { var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing'); updateProgressDiv_Hot_Listing.style.display = ''; var Targetcontrol = $get('RadTabStrip_Hot_Listing'); var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol); var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Hot_Listing); var x = 300; var y = 500; Sys.UI.DomElement.setLocation(updateProgressDiv_Hot_Listing, x, y); } function onUpdated_Hot_Listing() { var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing'); updateProgressDiv_Hot_Listing.style.display = 'none'; } </script> <div> <asp:UpdatePanelAnimationExtender ID="Upae_mytab" runat="server" TargetControlID="UpdatePanel_Mytab" > <Animations> <OnUpdating> <Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;"> <ScriptAction Script="onUpdating_Mytab();" /> </Condition> </OnUpdating> <OnUpdated> <Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;"> <ScriptAction Script="onUpdated_Mytab();" /> </Condition> </OnUpdated> </Animations> </asp:UpdatePanelAnimationExtender> <asp:UpdatePanelAnimationExtender ID="upae_Hot_Listing" runat="server" TargetControlID="UpdatePanel_Hot_Listing"> <Animations> <OnUpdating> <Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;"> <ScriptAction Script="onUpdating_Hot_Listing();" /> </Condition> </OnUpdating> <OnUpdated> <Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;"> <ScriptAction Script="onUpdated_Hot_Listing();" /> </Condition> </OnUpdated> </Animations> </asp:UpdatePanelAnimationExtender> <div id="divMain"> <asp:UpdatePanel ID="UpdatePanel_Mytab" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"> <ContentTemplate> <div class="bottomSheetFrame"> <table> <tr> <td> <%--For Tab--%> <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Mytab" SelectedIndex="0" runat="server" Width="680px" MultiPageID="RadMultiPage_Mytab" CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Mytab_TabClick" Orientation="HorizontalBottom"> </telerik:RadTabStrip> <div align="center" id="DivProgressimg_mytab" style="display: none;"> <img id="imgmytab" runat="server" alt="Processing" title="Processing" align="middle" src="Images/loading.gif" /> </div> <%--For content--%> <telerik:RadMultiPage ID="RadMultiPage_Mytab" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage_Mytab_PageViewCreated" CssClass="multiPage"> </telerik:RadMultiPage> </td> </tr> </table> </div> </ContentTemplate> </asp:UpdatePanel> </div> <div id="divMainHot_Listing"> <asp:UpdatePanel ID="UpdatePanel_Hot_Listing" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"> <ContentTemplate> <div class="bottomSheetFrame" id="DivProgressimg_Hot_Listing1"> <table> <tr> <td align="center" valign="top" style="height: 350px;"> <%--For Tab--%> <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Hot_Listing" SelectedIndex="0" runat="server" Width="650px" MultiPageID="RadMultiPage_Hot_Listing" CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Hot_Listing_TabClick" Orientation="HorizontalBottom"> </telerik:RadTabStrip> <div align="center" id="DivProgressimg_Hot_Listing" style="display: none;"> <img id="imghotlisting" runat="server" alt="Processing" title="Processing" align="middle" src="Images/loading.gif" /> </div> <%--For content--%> <telerik:RadMultiPage ID="RadMultiPage_Hot_Listing" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage_Hot_Listing_PageViewCreated" CssClass="multiPage"> </telerik:RadMultiPage> </td> </tr> </table> </div> </ContentTemplate> </asp:UpdatePanel> </div> </div> </form> </body>推荐答案
get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display =''; var Targetcontrol = get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display = ''; var Targetcontrol =
get('RadTabStrip_Mytab'); var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol); var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Mytab); var x = 300; var y = 200; Sys.UI.DomElement.setLocation(updateProgressDiv_Mytab，x，y); } 函数onUpdated_Mytab(){ var updateProgressDiv_Mytab = get('RadTabStrip_Mytab'); var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol); var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Mytab); var x = 300; var y = 200; Sys.UI.DomElement.setLocation(updateProgressDiv_Mytab, x, y); } function onUpdated_Mytab() { var updateProgressDiv_Mytab =
get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display ='none'; } 函数onUpdating_Hot_Listing(){ var updateProgressDiv_Hot_Listing = get('DivProgressimg_mytab'); updateProgressDiv_Mytab.style.display = 'none'; } function onUpdating_Hot_Listing() { var updateProgressDiv_Hot_Listing =
更多推荐
如何对多个UpdatePanel使用UpdatePanelAnimationExtender
发布评论