::::
::English :: Dúnadan Blog
Module Border Module Border
  Categories   Minimize

Module Border Module Border
Module Border Module Border
  Renata's Pics   Minimize

Module Border Module Border
Module Border Module Border
  Dunadan's Blog   Minimize

Oct 18

Written by: Dunadan Raptor
10/18/2007

 

After enabling AJAX, it's pretty easy to declaratively add an animated image using the UpdateProgress control from the Toolkit controls and an animated gif image. This post assumes you already know how to enable AJAX in your module, if not refere to this previous post.

After enabling AJAX in DNN in any of the two ways detailed in the mentioned post, add an Update panel with a Label and a button control.

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="Label">asp:Label><br /><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />ContentTemplate>asp:UpdatePanel>

Add the UpdateProgress control to your .ascx file and set the AssociatedUpdatePanel property value to the Update Panel ID of the UpdatePanel you want it to be associated  to:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">asp:UpdateProgress>

In the Progress Template element add an Image control with its ImageUrl property value pointing to your animated image.

 <ProgressTemplate><asp:image id="updating1" Imageurl="~/DesktopModules/MyModule/Images/LoadingIcon.gif" runat="server"/>ProgressTemplate>

The final markup should look like this:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"><ProgressTemplate><asp:image id="updating1" Imageurl="~/DesktopModules/MyModule/Images/LoadingIcon.gif" runat="server"/>ProgressTemplate>asp:UpdateProgress>

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="Label">asp:Label><br /><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />ContentTemplate>asp:UpdatePanel>

The best part about working with declarative programming is that you will not need to recompile your code.

 

 

 

Tags:

3 comments so far...

Re: Displaying an animated gif in a Dotnetnuke module with AJAX

thanks!

By John on   7/4/2007

Re: Displaying an animated gif in a Dotnetnuke module with AJAX

Hello!
any idea why my gif would show up as an "x"?? when i'm in design view, it is there and "running" but when i'm in my site, it's just an "x"...??? i have it in an image folder under my module
thanks for any clue!

By Mary on   4/15/2008

Re: Displaying an animated gif in a Dotnetnuke module with AJAX

Mary, the path is not resolving appropriately.

By hooligannes on   4/15/2008

Your name:
Title:
Comment:
Add Comment    Cancel  
Module Border Module Border