如何对多个UpdatePanel使用UpdatePanelAnimationExtender [英] How to use UpdatePanelAnimationExtender for multiple UpdatePanels
本文介绍了如何对多个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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
