User Personalization/Profile with Microsoft AJAX Library (aka Atlas Client Library)

• Download demo project - 596 Kb

Introduction

This article/demo will show you, how you can access and use the powerfull ASP.NET 2.0 Profile Service with the Microsoft AJAX Library (aka ATLAS client-side Framework; read this article about Atlas Naming and Roadmap).

ASP.NET 2.0 Profile Service is based on the Provider-Model - so you can configure and exchange the datastore. More details about Profiles and Personalization here.

This example here does use the drag&drop features available with the Microsoft AJAX Library. It will allow positioning an image-object where ever you want on the current page just by draging it. An excellent article about this feature here on CodeProject.

The current position of the image will be instantly persisted (by default, profile service does use SQLServer Express Edition). As soon as the user does re-open the page, the image will appear at the same position the image was dragged the last time by the user.

Web.Config

First, we have to configure and to activate several services. The ASP.NET 2.0 Profile Service is accessible thru a WebService, so we have to enable this feature.

Further, poxTop and poxLeft values have to be declared inside <Profile> Section (to tell ASP.NET that this attributes go into the profile) as well as inside <profileService>-Section (to tell ASP.NET which attributes are accessbile for the AJAX Stuff).

Last important step is to remap *.asmx (WebServices) with the ScriptHandlerFactory Handler to make WebServices available via JavaScript. 

<?xml version="1.0"?>
<configuration>
 <configSections>
  <sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
   <section name="webServices" type="Microsoft.Web.Configuration.WebServicesSection" requirePermission="false"/>
   <section name="profileService" type="Microsoft.Web.Configuration.ProfileServiceSection" requirePermission="false"/>
  </sectionGroup>
 </configSections>

 <microsoft.web>
  <!-- Enable WebServices because Profile-Service ASP.NET is accessible thru WS -->
  <webServices enableBrowserAccess="true"/>
  
  <profileService 
   enabled="true" 
   setProperties="poxTop;poxLeft;" 
   getProperties="poxTop;poxLeft;">
  </profileService>
  
 </microsoft.web>
 
 <system.web>
  <authentication mode="Windows"/>
  <profile enabled="true">
   <properties>
    <add name="poxTop" type="integer"/>
    <add name="poxLeft" type="integer"/>
   </properties>
  </profile>
  <pages>
   <controls>
    <add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
    <add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
   </controls>
  </pages>
  <compilation debug="true" />

  <httpHandlers>
   <remove verb="*" path="*.asmx"/>
   <!-- ASMX is mapped to a new handler so that proxy javascripts can also be served. -->
   <!-- Otherwise, you get the following error  -->
   <!-- The HTTP verb POST used to access path  -->
   <!-- '/ProfileWithAtlas/ScriptServices/Microsoft/Web/Services/Standard/ProfileWebService.asmx' is not allowed. -->
   <add verb="*" path="*.asmx" type="Microsoft.Web.Services.ScriptHandlerFactory" validate="false"/>
  </httpHandlers>


 </system.web>

</configuration>

*.aspx Page

Inside the WebPage, we tell the ScriptManager to include a reference to the AtlasUIDragDrop library to enable this feature.

    <atlas:ScriptManager runat="server" ID="ScriptManager1">
        <Scripts>
            <atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
        </Scripts>
    </atlas:ScriptManager>

Next, we declare the object we want to drag. By placing an image- inside a div-tag and by setting the div-id to "imagePanel", we set-up the structure. The whole construct we put into a html-table.

        <table cellpadding="0" cellspacing="0"  border="0">
            <tr>
                <!-- This fixed Size is important. Without it, your d&d will not snapp-in -->
                <td style="width:200px;height:600px"></td>
                <td>
                    <div id="imagePanel">
                        <img id="dragHandler" src="smile.gif" alt="Smile!" />
                    </div>
                </td>
                
            </tr>
        </table>

The following XML-Script does attach the drag&drop feature the "imagePanel" div-tag.

The "OnMove" method will be called after the user has moved (or draged) the image. We can handle this event later via JavaScript.

    
    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">http://schemas.microsoft.com/xml-script/2005">

            <components>
                <control id="imagePanel">
                    <behaviors>
                        <floatingBehavior handle="dragHandler" move="OnMove" />
                    </behaviors>
                </control>
            </components>
        </page>
    </script>

Last thing to do is to program the client-stuff in JavaScript with the support of the AJAX Library.

Inside the pageLoad() event, we attach two event-handlers (onProfileLoadComplete, onProfileSaveComplete) and we load the current user profile. After the Profile is loaded, we arrive inside the onProfileLoadComplete-event where we use the poxTop and poxLeft position to do the re-positioning of the image.

The onMove-event is attached and fired as explained above. As soon as the user do repositioning, we save back the new x- and y-postitions to the persisten medium.

For debugging purpose, the onProfileSaveComplete-event is attachend to display the last time the profile-data is saved inside the browsers statusbar. 

    <script type="text/javascript">
        function pageLoad()
        {
            Sys.Profile.set_autoSave(false);
            Sys.Profile.loaded.add(onProfileLoadComplete);
            Sys.Profile.saved.add(onProfileSaveComplete); 
            Sys.Profile.load(); 
        }
        
        function onProfileLoadComplete() 
        {      
            var objStyle = $object('imagePanel').element.style;
            if (Sys.Profile.properties.poxTop != null)
                objStyle.posTop = Sys.Profile.properties.poxTop;
            if (Sys.Profile.properties.poxLeft != null)
                objStyle.posLeft = Sys.Profile.properties.poxLeft;
        }
        
        function onProfileSaveComplete()
        {
            window.status = "Profile saved: " + Date();
        }
        
        function OnMove(sender, cancelArgs)
        {
            var ele = sender.control.element;
            Sys.Profile.properties.poxTop = ele.offsetTop;
            Sys.Profile.properties.poxLeft = ele.offsetLeft;
            Sys.Profile.save();
        }
    </script>