Browse DevX
Sign up for e-mail newsletters from DevX


Add Drag-and-Drop Magic to Your Web Pages Using Microsoft AJAX Library : Page 2

Sometimes it seems like AJAX is a layer of magic for web pages. The ability to drag and drop page "widgets" such as images and chunks of text is definitely one of those features that makes people's eyes light up. Find out how easy it is to enable client-side drag-and-drop using Microsoft AJAX Library (Atlas).




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Personalizing the Page
Now that you are able to drag and drop a control on a page, you will realize that when the application is restarted, the control is back to its original location. In the real world, users want the application to remember the settings of the page. For this, we need to use the Profile service in ASP.NET 2.0.

To use the Profile service in ASP.NET 2.0, you need to do a few things. First, add a Profile property to the application by adding the following to Web.config:

<system.web> <profile> <properties> <add name="Panel1Loc" type="System.String" /> </properties> </profile>

Next, you need to uncomment the <profileService> element in Web.config so that Atlas is now able to use the Profile service on the server-side. Set its attributes as shown below:

<profileService enabled="true" setProperties="Panel1Loc" getProperties="Panel1Loc" />

Basically, you are telling Atlas that you want to be able to read and write to the Profile property named Panel1Loc.

Next, add the ProfileProperty attribute to the <atlas:DragOVerlayProperties> control and set it to "Panel1Loc." This will allow it to save the position of the Panel control that it is extending to the Profile property named Panel1Loc:

<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"> <atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true" ProfileProperty="Panel1Loc" /> </atlas:DragOverlayExtender>

Finally, add the <atlas:ProfileScriptService> control and set its AutoSave attribute to "true." This will cause the position of the Panel control to be saved automatically to the Profile property whenever it is dragged and dropped:

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <atlas:ProfileScriptService ID="ProfileScriptService1" runat="server" AutoSave="true" />

Figure 3. ASPNETDB.MDF is the database that holds the data about the position of elements on your page.
Figure 4. The row containing the values of the Profile property is shown.

That's it! Press F5 to test the application. Drag and drop the clock on a new position. Stop the application and run it again and you will see that the clock will now go back to the position where you left it.

Examining the Database
To verify that the positional information of the clock is indeed persisted, refresh the App_Data folder in your project (see Figure 3). You should see the newly created ASPNETDB.MDF database. This database is used by ASP.NET to save application-related data.

Double-click on the ASPNETDB.MDF file. In Server Explorer, expand the Tables item and right-click on the aspnet_Profile table and select Show Table Data. The first row of the table shows the values of the Profile property (see Figure 4).

Author's Note: In my example, I am using the default Windows authentication and hence my Windows login will be used as the user name (stored separately in the aspnet_Users table). The Profile service also works with Forms authentication and works for authenticated as well as anonymous users.

Adding More Panels

Figure 5. Dragging and dropping two Panel controls.
So far, you have only seen one Panel control in action. I will now add one more Panel control to display the current time in Japan. Here are the additions/changes.

Add a new <atlas:UpdatePanel> control (UpdatePanel2) containing another Panel control (Panel2) to the page (the clock now displays the time in Japan):

<atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ... ... </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" Height="198px" Width="194px"> <script src="http://www.clocklink.com/embed.js"> </script> <strong>Current Time in Japan</strong> <script type="text/javascript" language="JavaScript"> obj = new Object; obj.clockfile = "0008-Yellow.swf"; obj.TimeZone = "JST"; obj.width = 200; obj.height = 200; obj.wmode = "transparent"; showClock(obj); </script> </asp:Panel> </ContentTemplate> </atlas:UpdatePanel>

Add a new <atlas:DragOverlayProperties> control to the <atlas:DragOverlayExtender> to extend the second Panel control:

<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"> <atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true" ProfileProperty="Panel1Loc" /> <atlas:DragOverlayProperties TargetControlID="Panel2" Enabled="true" ProfileProperty="Panel2Loc" /> </atlas:DragOverlayExtender>

In Web.config, add another Profile property named Panel2Loc:

<profile> <properties> <add name="Panel1Loc" type="System.String" /> <add name="Panel2Loc" type="System.String" /> </properties> </profile>

Finally, modify the setProperties and getProperties attributes to include the Panel2Loc Profile property:

<profileService enabled="true" setProperties="Panel1Loc;Panel2Loc" getProperties="Panel1Loc;Panel2Loc" />

Press F5 to test the application. You can now drag and drop the two clocks and they will remain in the same position even f you reload the page (see Figure 5).

Thanks for your registration, follow us on our social networks to keep up-to-date