[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

ASP.NET Ajax UpdatePanel with UpdatePanelAnimationExtender

Posted on 2010-03-29
2
Medium Priority
?
829 Views
Last Modified: 2012-05-09
Hi experts,

I'm quite new to UpdatePanels with the UpdatePanelAnimationExtender and despite looking at samples, I cannot achieve what I want.

I have a page which contains:

One UpdatePanel with Search box and Submit button in it.
One UpdatePanelAnimationExtender which uses the TargetControlID of the  UpdatePanel
One ProgressTemplate which displays a "Loading" image

When a user clicks the submit button, I want another panel (which will contain the search results) to appear after the ProgressTemplate completes. Where in my code do I put this panel to make it appear (even better if you can tell me how to make it appear in an animated way).

Thanks

Jon
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
     <asp:TextBox ID="TextBox1" runat="server" class="txtBox"></asp:TextBox>
     <asp:Button ID="btnSearch" runat="server" Text="Search" class="button2" />
  </ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="btnSearch" /> 
            </Triggers>
            </asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
            <ProgressTemplate>
            <img src="images/loading.gif" alt="" /> Searching, please wait...
            </ProgressTemplate>
            </asp:UpdateProgress>
  <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1" BehaviorID="UpdatePanel1">
                  <Animations>
                    <OnUpdating>
                    <Sequence>
                        <EnableAction AnimationTarget="btnSearch" enabled="false" duration="0" />
                        <EnableAction AnimationTarget="TextBox1" enabled="false" duration="0" />
                    </Sequence>
                    </OnUpdating>
                    <OnUpdated>
                    <Parallel duration="0">
                        
                     </Parallel>
                    </OnUpdated>
                   </Animations>
                </cc1:UpdatePanelAnimationExtender>

Open in new window

0
Comment
Question by:Jon Winterburn
2 Comments
 

Expert Comment

by:Tip_37
ID: 28982457
Im sorry I dont know what that is but someone else will help you.
0
 
LVL 14

Accepted Solution

by:
robasta earned 2000 total points
ID: 28985695
Make the changes in the highlited section below ( Inside the UpdatePanel)

After processing the btnSearch_Click event,

toggle the panels' visibility.


<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
<!--- Modify Section -->
<asp:Panel runt="server" id="pnlSearchForm" visible="true">
     <asp:TextBox ID="TextBox1" runat="server" class="txtBox"></asp:TextBox>
     <asp:Button ID="btnSearch" runat="server" Text="Search" class="button2" />
</asp:Panel>
<asp:Panel runat="server" id="pnlSearchResults" visible="false">
display your results here.....
</asp:Panel
<!-- end modify section -->
  </ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="btnSearch" /> 
            </Triggers>
            </asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
            <ProgressTemplate>
            <img src="images/loading.gif" alt="" /> Searching, please wait...
            </ProgressTemplate>
            </asp:UpdateProgress>
  <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1" BehaviorID="UpdatePanel1">
                  <Animations>
                    <OnUpdating>
                    <Sequence>
                        <EnableAction AnimationTarget="btnSearch" enabled="false" duration="0" />
                        <EnableAction AnimationTarget="TextBox1" enabled="false" duration="0" />
                    </Sequence>
                    </OnUpdating>
                    <OnUpdated>
                    <Parallel duration="0">
                        
                     </Parallel>
                    </OnUpdated>
                   </Animations>
                </cc1:UpdatePanelAnimationExtender>

Open in new window

0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
How can you see what you are working on when you want to see it while you to save a copy? Add a "Save As" icon to the Quick Access Toolbar, or QAT. That way, when you save a copy of a query, form, report, or other object you are modifying, you…
In this video I will demonstrate how to set up Nine, which I now consider the best alternative email app to Touchdown.
Suggested Courses

613 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question