Click here to Skip to main content
Click here to Skip to main content

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

, 20 Sep 2006
Rate this:
Please Sign up or sign in to vote.
This article explains how to use the ASP.NET 2.0 Profile Service together with the Microsoft AJAX library to personalize a web application.

Sample Image - ProfileWithAtlas.jpg

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>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Patrick Spieler
Web Developer
Switzerland Switzerland
Consultant for Trivadis AG in Switzerland.
Interested in .NET, Architectures, Patterns and Web 2.0.
Blog and articles at http://sharpcuts.blogspot.com

Comments and Discussions

 
QuestionHow to get it working on Microsoft ASP.NET 2.0 AJAX Futures December CTP and Extenstions 1.0 Pinmemberheaddeball21-Jan-07 18:26 
GeneralNice article Pinmembervik2020-Sep-06 20:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 20 Sep 2006
Article Copyright 2006 by Patrick Spieler
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid