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

• Download demo project - 425 KB

Introduction

This article/demo will show you how you can access and use the powerful 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 data store. More details about Profiles and Personalization is available here.

The example here does use the drag&drop features available with the Microsoft AJAX library. It will allow positioning an image-object wherever you want on the current page just by dragging it. An excellent article about this feature is availble here on CodeProject.

The current position of the image will be instantly persisted (by default, the Profile Service uses SQL Server Express Edition). As soon as the user re-opens 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 activate several services. The ASP.NET 2.0 Profile Service is accessible through a Web Service, so we have to enable this feature.

Further, the poxTop and poxLeft values have to be declared inside the <Profile> section (to tell ASP.NET that this attributes goes into the profile) as well as inside the <profileService> section (to tell ASP.NET which attributes are accessible for the AJAX stuff).

The last important step is to remap *.asmx (Web Services) with the ScriptHandlerFactory handler to make Web Services 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 web page, 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's ID to "imagePanel", we set up the structure. We put the whole construct into an 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 attached the drag&drop feature to the "imagePanel" DIV tag.

The "OnMove" method will be called after the user has moved (or dragged) 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">
        <components>
            <control id="imagePanel">
                <behaviors>
                    <floatingBehavior handle="dragHandler" move="OnMove" />
                </behaviors>
            </control>
        </components>
    </page>
</script>

The 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 positions to do the re-positioning of the image.

The onMove event is attached and fired as explained above. As soon as the user does a repositioning, we save back the new x- and y-positions to a persistent medium.

For debugging purposes, the onProfileSaveComplete event is attached to display the last time the profile-data is saved inside the browser's 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>