Beginning Ajax with ASP.NET- P24 pdf

Try It Out Retrieving Profile Property Names Take a look at some code for getting the names of the properties from a profile.. Try It Out Retrieving Profile Data The following JavaScript

Try It Out Retrieving Profile Property Names Take a look at some code for getting the names of the properties from a profile

function GetProfile() {

var profObj = Sys.Profile;

profObj.loaded.add(OnGetProfile);

profObj.load();

} function OnGetProfile() {

var propArray = Array();

propArray = Sys.Profile.properties;

if (null != propArray) {

for(m in propArray) alert(m);

} } How It Works Consider what happens in the code:

1. An alias to the Sys.Profileclass is created

2. The callback on completion is assigned to the method OnGetProfiles

3. The asynchronous call is made through the .load()method call

4. When the callback is made, the code gets the propertiesproperty The property contains the profile information for a user and the application

5. The code loops through the returned properties and displays them to the user

Figure 12-3 shows the output of getting the profile properties

Loading Profile Data

Now that you have seen how to get the names of the profile properties, you need to get the actual data within the profile for the logged-in user To get the data, you go through a set of steps similar to those you used in getting the profile names

Try It Out Retrieving Profile Data

The following JavaScript code running in a web browser retrieves profile values for the properties you retrieved in the previous section:

function GetProfileData()

{

var profObj = Sys.Profile;

profObj.loaded.add(OnGetProfileData);

profObj.load();

}

function OnGetProfileData()

{

document.getElementById(“txtName”).value = Sys.Profile.properties.Name; document.getElementById(“txtAddress”).value = Sys.Profile.properties.Address; document.getElementById(“txtCity”).value = Sys.Profile.properties.City;

document.getElementById(“txtAddressState”).value = Sys.Profile.properties.AddressState;

document.getElementById(“txtZipCode”).value = Sys.Profile.properties.ZipCode; }

How It Works

This code performs the following steps:

1. Creates an alias for the Sys.Profileclass

2. Creates the method to callback once the data is filled This callback is called

OnGetProfileDataand is created by the call to loaded.add(OnGetProfileData)

3. Performs the asynchronous load This is done by the call to profObj.load()(a.k.a

Sys.Profile.load())

4. Once the callback (OnGetProfileData()) is called, the various textboxes are filled with the profile values This done by setting the value of the text field to the profile property value

It appears that the profile properties are “early bound.” This might get some IntelliSense support in a future version of Visual Studio NET.

Figure 12-4 shows the output of the code in the previous “Try It Out” Section

Figure 12-4

Save Profile Data

Now that you have looked at loading data from the ASP.NET profile service, you can look at saving the data in code

function SaveProfileData() {

var profObj = Sys.Profile;

profObj.properties.Name = document.getElementById(“txtName”).value;

profObj.properties.Address = document.getElementById(“txtAddress”).value;

profObj.properties.City = document.getElementById(“txtCity”).value;

profObj.properties.AddressState = document.getElementById(“txtAddressState”).value;

profObj.properties.ZipCode = document.getElementById(“txtZipCode”).value; profObj.save();

} The steps in the code are fairly simple

1. An alias to the Sys.Profileclass is created

2. The properties of the profile are set from the data on the form.

3. The data is saved asynchronously.

This code will save the profile’s properties asynchronously It is possible to receive notification when data is saved To do that you can specify an asynchronous callback and set a notification to the user with the following code

profObj.saved.add(OnSaveProfileData);

profObj.save();

function OnSaveProfileData()

{

alert(“Profile Data has been saved.”);

}

Avoiding Profile Service Gotchas

You should keep in mind several important “gotchas” whenever you are using the ASP.NET profile ser-vice in Atlas These are:

❑ Web.Configfile— The Web.Configfile needs to be set up properly, and there are several set-tings you need to pay attention to:

❑ The <configSections>tag must be configured This may mean adding a section for authenticationServiceand profileService A set of entries should look some-thing like this example:

<configSections>

<sectionGroup name=”microsoft.web”

type=”Microsoft.Web.Configuration.MicrosoftWebSectionGroup”>

<section name=”converters”

type=”Microsoft.Web.Configuration.ConvertersSection” requirePermission=”false”/>

<section name=”webServices”

type=”Microsoft.Web.Configuration.WebServicesSection” requirePermission=”false”/>

<section name=”authenticationService”

type=”Microsoft.Web.Configuration.AuthenticationServiceSection”

requirePermission=”false”/>

<section name=”profileService”

type=”Microsoft.Web.Configuration.ProfileServiceSection”

requirePermission=”false”/>

</sectionGroup>

</configSections>

❑ Within the <microsoft.web>tag, the enableBrowserAccessmust be turned on This

is accomplished within the <webServices>like this:

<microsoft.web>

<webServices enableBrowserAccess=”true”/>

</microsoft.web>

❑ The <profileService>tag must be configured to get and set the profile’s properties Either the properties may be configured with “*”, which represents all profile proper-ties, or each property may be listed out individually, such as Name;Address Note that each property is separated from the others by a semicolon

<microsoft.web>

<profileService enabled=”true” setProperties=”*” getProperties=”*” />

</microsoft.web>

❑ Properties that are part of groups may be referenced by GroupName.PropertyNamein the profileService, setProperties, and getPropertiesattributes

❑ A special connectionStringis used This connectionStringis called the AtlasAppServicesconnection string It will need to be set up as follows for Atlas to

be able to properly communicate with the ASP.NET application services Please remem-ber that what you see in the following is an example and will change based on your server environment

<connectionStrings>

<add name=”AtlasAppServices” connectionString=”Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Work Data\Ajax book\Chapter 12\Chapter 12 Sample Code\App_Data\ASPNETDB.MDF;Integrated Security=True;User Instance=True” />

</connectionStrings>

❑ Profile configuration— Profiles need to be configured properly As shown earlier, the following

is an example for the samples presented in this chapter

<profile>

<properties>

<add name=”Name” type=”String” />

<add name=”City” type=”String” />

<add name=”Address” type=”String” />

<add name=”ZipCode” type=”String” />

<add name=”AddressState” type=”String”/>

<add name=”DragNDropLocation” />

</properties>

</profile>

❑ Login— For the profile properties to work correctly, the user must have logged in Although you can use profile properties and anonymous users, these examples are designed for a user that is logged in

❑ Sys.Profile.set_autoSave()method— This method will control whether or not a profile’s properties are automatically saved when the properties are modified If a true is passed in, which is the default value, the profile properties are automatically saved on a change If a false

is passed in, the profile properties are not saved on a change In this case, it is up to the devel-oper to manage the saving of the data

Implementing Drag and Drop via Atlas

“Drag and Drop” is the generic term for the action of selecting an element with a mouse and moving it

on screen Although Drag and Drop is not a feature of the ASP.NET services, it integrates very smoothly with the Atlas framework’s support for the ASP.NET profile services

Try It Out Implementing Drag and Drop The following code example shows how to implement the ability to drag text around the screen and save the position of the text with the ASP.NET profile service

<atlas:ScriptManager ID=”scriptManager” runat=”server”></atlas:ScriptManager>

<form id=”form1” runat=”server”>

<div>

<atlas:ProfileScriptService ID=”profile” runat=”server” AutoSave=”true” />

<div class=”dropZone”>

<asp:Button ID=”btnRefresh” runat=”server” Text=”Perform a postback” />

<asp:Label ID=”lblToDrag” runat=”server”>This is the text to drag around the screen.</asp:Label>

</div>

<atlas:DragOverlayExtender ID=”atlasDNDExtender” runat=”server”>

<atlas:DragOverlayProperties TargetControlID=”lblToDrag”

ProfileProperty=”DragNDropLocation” Enabled=”true” />

</atlas:DragOverlayExtender>

</div>

</form>

Take a look at what this ASP.NET code does:

1. A new control is introduced This is the atlas:ProfileScriptServicecontrol It integrates with the ASP.NET Profile service so that updates are made to the profile service The AutoSave property is set to true This will automatically update the profile property

DragNDropLocationas appropriate

2. The atlas:DragOverlayExtenderis introduced This control is a helper control for imple-menting Drag and Drop functionality In this example, the Drag and Drop functionality is added to the label with the ID lblToDrag, thus the “extender” term on the control name

By clicking on the text, it is possible to drag this text around the screen

3. By placing a server button on the page, you can show that the profile is indeed updated on a postback and reloaded on the page load When the page is reloaded, the text stays in its previ-ously defined position

4. The dropZone divtag has its height set to some relatively large number This is to demonstrate the Drag and Drop functionality If this were not set, the there would be problems attempting to drag outside of the page’s body tag

The next thing you need to do is look at the source code that is created and sent to the web browser:

<script src=” / /ScriptLibrary/Atlas/Debug/Atlas.js”

type=”text/javascript”></script>

<div>

<div class=”dropZone”>

<input type=”submit” name=”btnRefresh” value=”Perform a postback”

id=”btnRefresh” />

<span id=”lblToDrag”>This is the text to drag around the screen.</span>

</div>

</div>

<div>

<input type=”hidden” name=” EVENTVALIDATION” id=” EVENTVALIDATION”

value=”/wEWAgLoiZW4DwLAn+vmDOPGFKUwps8DZtEoBXsJWcSnsQOm” />

</div>

<script type=”text/xml-script”>

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

<references>

<add src=” / /ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js” />

</references>

<profile id=”profile” autoSave=”true” />

<control id=”lblToDrag”>

<behaviors>

<floatingBehavior handle=”lblToDrag”>

<bindings>

<binding property=”location” dataContext=”profile”

dataPath=”DragNDropLocation” direction=”InOut” />

</bindings>

</floatingBehavior>

</behaviors>

</control>

</components>

</page></script>

<script type=”text/javascript”>

</script>

Although most of the data presented in the “source” view is fairly standard, there are several items of note

❑ The AtlasUIDragDrop.jsfile has been added as a reference in spite of the developer’s not having explicitly added it

❑ The profile service is added in the components section

❑ Within the lblToDragcontrol, a set of behaviors has been added This includes a floatingBehavior

❑ Data binding is occurring between the label with text and the profile service This is defined within the floatingBehaviortag

Figure 12-5 shows this Drag and Drop example as it would be displayed on screen

Figure 12-5

Summar y

You have covered a lot of complicated material in this chapter Integration with the ASP.NET services can be very tricky, but the Microsoft Atlas framework has done a good job of abstracting out many of the complications and making this fairly simple As a result, you have seen how to:

❑ Integrate with the membership services for its support of authentication and authorization

❑ Integrate with the role services for its support for authorization

❑ Integrate with the profile services

❑ Tie these together with a Drag and Drop example

Now that you have explored the integration with the services provided by ASP.NET, the next chapter turns to look at support debugging an Ajax-oriented application

Debugging

Debugging is the art of identifying and removing problematic code within your applications Every

developer has been required to perform some degree of debugging within their applications at some point in time

ASP.NET is predominately a server-side development technology, and support for debugging of applications within ASP.NET is quite extensive Ajax applications introduce some new aspects that make the debugging of applications more involved The extensive use of JavaScript and the fact that custom data may be transferred through the use of asynchronous postbacks mean that new challenges are introduced when debugging Ajax-type applications with ASP.NET

This chapter is going to examine the various aspects of debugging Ajax applications within ASP.NET and will cover the following topics:

❑ Server-side ASP.NET debugging

❑ Various methods of JavaScript debugging (in conjunction with Document Object Model (DOM) level debugging)

❑ Debugging and examination of data sent via asynchronous postbacks

As you will see, this chapter covers the full range of areas involving Ajax application development — from the client side, with examination of DOM, HTML, and JavaScript, to the server side, with

ASP.NET and the associated server-side language In addition, we will examine the in between, the

data that is sent across the network through the use of asynchronous postbacks from the client to the server, and back again

Ser ver-Side Debugging ASP.NET is a server-based development environment, and the ASP.NET runtime engine parses and compiles virtually all web pages and code into NET assemblies

When an ASP.NET web page is requested (for example, www.SomeSite.com/SomePage.aspx), the ASP.NET runtime engine parses the web page and also the code that is associated with the page This code is usually in the form of a code file present in the App_Codedirectory of a web site, or the code can be embedded within the web page (ASPX) itself The web page and code are compiled into a NET assembly and loaded into the assembly cache for execution

A NET assembly is a very rich unit of deployment, in that it can contain an extensive amount of infor-mation that allows it to be self-describing This means that the ASP.NET runtime can interrogate the assembly and obtain a large amount of information about the assembly, such as security requirements and other operating parameters In addition, special debugging information can be included when the assembly is compiled As a result of this, the debugging experience on the server for ASP.NET applica-tions can be very rich and interactive

First, let’s look at how debugging support and information can be enabled so that a developer can utilize the debugging features available on the server

Enabling Debugging Support

Debugging support needs to be enabled specifically before debugging can be used For ASP.NET web applications, this means including the following <compilation>setting within the Web.Configweb application configuration file:

<configuration>

<system.web>

<compilation debug=”true”>

</compilation>

</system.web>

</configuration>

If you try to run a web application using Visual Studio NET 2005 in debug mode, and the <compilation debug=”true” />configuration entry has not been set, you will be prompted to enable debugging sup-port (see Figure 13-1)

Figure 13-1

For other project types such as class libraries, Debug must be selected as the active configuration within

Visual Studio NET 2005, as shown in Figure 13-2