More in this section

Forums / General Discussions / AJAX Animation in Template

AJAX Animation in Template

3 posts, 0 answered
  1. Joe
    Joe avatar
    40 posts
    Registered:
    11 Sep 2007
    28 Sep 2007
    Link to this post
    I would like to use some AJAX Animations from the AJAX toolkit in my Sitefinity Managed Site by placing the animations into the templates. At first I had a problem getting AJAX Animation controls to work in a regular masterpage, but I stumbled across the fact that if the page you are inheriting the master page with has its own Animation control, those in the master page will work as well. Any ideas on how I may be able to use this to have functioning animations in my Template. I tried to include them in a user control, but to no avail.

  2. Vlad
    Vlad avatar
    498 posts
    Registered:
    19 Jun 2017
    01 Oct 2007
    Link to this post
    Hi Joseph,

    We are not aware of any problems using Ajax in the Sitefinity Site.
    As for your scenario, we just tested it and it works fine.

    We did the following:

    1. Added all necessary configuration in the web.config to make the site ajax-enabled:
      <configSections> 
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">  
          <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">  
              <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>  
            <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">  
              <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> 
              <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
              <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
            </sectionGroup> 
          </sectionGroup> 
        </sectionGroup> 
      </configSections> 
     
      <system.web> 
        <pages> 
          <controls> 
            <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          </controls> 
        </pages> 
        <!--  
              Set compilation debug="true" to insert debugging  
              symbols into the compiled page. Because this  
              affects performance, set this value to true only  
              during development.  
        --> 
        <compilation debug="false">  
          <assemblies> 
            <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          </assemblies> 
        </compilation> 
     
        <httpHandlers> 
          <remove verb="*" path="*.asmx"/>  
          <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>  
        </httpHandlers> 
     
        <httpModules> 
          <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
        </httpModules> 
      </system.web> 
     
      <system.web.extensions> 
        <scripting> 
          <webServices> 
          <!-- Uncomment this line to customize maxJsonLength and add a custom converter --> 
          <!--  
          <jsonSerialization maxJsonLength="500">  
            <converters> 
              <add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>  
            </converters> 
          </jsonSerialization> 
          --> 
          <!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. --> 
          <!--
            <authenticationService enabled="true" requireSSL = "true|false"/>
          --> 
     
          <!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved  
               and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and  
               writeAccessProperties attributes. --> 
          <!--  
          <profileService enabled="true" 
                          readAccessProperties="propertyname1,propertyname2" 
                          writeAccessProperties="propertyname1,propertyname2" /> 
          --> 
          </webServices> 
          <!--
          <scriptResourceHandler enableCompression="true" enableCaching="true" />
          --> 
        </scripting> 
      </system.web.extensions> 
     
      <system.webServer> 
        <validation validateIntegratedModeConfiguration="false"/>  
        <modules> 
          <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
        </modules> 
        <handlers> 
          <remove name="WebServiceHandlerFactory-Integrated" /> 
          <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" 
               type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" 
               type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>  
          <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
        </handlers> 
      </system.webServer> 
     

    2. Added ScriptManager in the .master page, which will hold the Ajax controls:
    ...  
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    ... 

    3. Added the Animation control somewhere in the .master page or in the template/page:
    <%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
     
    <asp:Panel ID="Panel1" runat="server">  
    This should be invisible until the LinkButton is hovered on.  
    </asp:Panel> 
    <br /> 
    <asp:LinkButton ID="LinkButton1" runat="server">Test Animation</asp:LinkButton><br /> 
    <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="LinkButton1">  
    <Animations> 
        <OnHoverOver> 
            <FadeIn AnimationTarget="Panel1" Duration=".5" /> 
        </OnHoverOver> 
        <OnHoverOut> 
            <FadeOut AnimationTarget="Panel1" Duration=".5" /> 
        </OnHoverOut> 
    </Animations> 
    </ajaxToolkit:AnimationExtender> 


    Please, compare your implementation with ours and let us know if you experience any problems.

    All the best,
    Vlad
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Joe
    Joe avatar
    40 posts
    Registered:
    11 Sep 2007
    01 Oct 2007
    Link to this post
    I'm not sure what I had wrong, but it is working now. Thank you yet again Vald. Nazdrave!!
Register for webinar
3 posts, 0 answered