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.
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.Profile class 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 .properties property. 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.
Figure 12-3
321
Atlas Integration with ASP.NET Services
15_78544X ch12.qxp 7/18/06 3:17 PM Page 321

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.Profile class.
2. Creates the method to callback once the data is filled. This callback is called
OnGetProfileData and 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.
322
Chapter 12
15_78544X ch12.qxp 7/18/06 3:17 PM Page 322
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.Profile class 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.
323

Atlas Integration with ASP.NET Services
15_78544X ch12.qxp 7/18/06 3:17 PM Page 323
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.Config file — The Web.Config file 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
authenticationService and 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 enableBrowserAccess must 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.PropertyName in
the
profileService, setProperties, and getProperties attributes.
324
Chapter 12
15_78544X ch12.qxp 7/18/06 3:17 PM Page 324
❑ Aspecial connectionString is used. This connectionString is called the
AtlasAppServices connection 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”>
325
Atlas Integration with ASP.NET Services
15_78544X ch12.qxp 7/18/06 3:17 PM Page 325
<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:ProfileScriptService control. 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
DragNDropLocation as appropriate.
2. The atlas:DragOverlayExtender is 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 div tag 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=” /><references>
<add src=” / /ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js” />
</references>
326
Chapter 12
15_78544X ch12.qxp 7/18/06 3:17 PM Page 326
<components>

<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.js file 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 lblToDrag control, 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
floatingBehavior tag.
Figure 12-5 shows this Drag and Drop example as it would be displayed on screen.
Figure 12-5
327
Atlas Integration with ASP.NET Services
15_78544X ch12.qxp 7/18/06 3:17 PM Page 327

Summary
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.
328
Chapter 12
15_78544X ch12.qxp 7/18/06 3:17 PM Page 328
13
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.
Server-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.
16_78544X ch13.qxp 7/18/06 3:18 PM Page 329
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_Code directory 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.Config web
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.
330
Chapter 13
16_78544X ch13.qxp 7/18/06 3:18 PM Page 330
Figure 13-2
In either case, when the application files are compiled, special debugging information and symbols are
produced that enable the Visual Studio .NET debugger to track and accurately show what lines are
being executed. You can see this by looking at the output directory of the respective application you
are compiling. If the debug build has been selected, or debugging is enabled via the
Web.Config setting
mentioned previously, there will be debug symbol files present, which have a
.pdb file extension.
For example, if your project produces a
MyApp.exe assembly, then a corresponding MyApp.pdb file will
be produced.
Setting Breakpoints
Now that debugging has been enabled, application execution can be tracked on the server. The easiest
way to do this is to set a breakpoint.
A breakpoint is a marked line of code that tells the debugger to pause execution at the line indicated by
the breakpoint when program execution reaches that line. A breakpoint is indicated by a red dot to the
left of the line, with the entire line itself also highlighted in red. Figure 13-3 illustrates what a breakpoint

looks like (albeit in black and white rather than color).
Figure 13-3
So as you can see, the figure shows that a breakpoint has been set on the line that executes the
PerformWork() method.
When the application is run, execution is paused at the breakpoint. When this occurs, the application is
literally suspended, and this allows the developer to examine various aspects of the programs execution
such as values of variables. The developer can choose to continue execution step by step and examine
the changing values of variables as the program executes each step. This can be accomplished by press-
ing the F10 function key or by selecting the Debug menu and then selecting the Step Over menu option.
When a method is encountered during debugging, the developer may opt to continue execution past the
331
Debugging
16_78544X ch13.qxp 7/18/06 3:18 PM Page 331
method, using the Step Over option previously mentioned, or the developer can drill into the execution
of each step within the method by either pressing the F11 function key or selecting the Debug menu
option and then selecting Step Into.
This debugging environment is very rich and allows a huge amount of flexibility when it comes to
inspecting and evaluating the state of your application. Figure 13-4 shows the debugger displaying
the value of a variable when the mouse hovers over that variable during a debugging operation.
Figure 13-4
This is one of the many ways the developer can interact with the server-side debugger within Visual
Studio .NET.
For an exhaustive explanation of debugging applications, visit
/>en-us/library/awtaffxb.aspx
.
This method of debugging should be reasonably familiar to most Visual Studio developers. One of the
reasons it is so rich and powerful is that it exists within the domain and execution control of ASP.NET.
Visual Studio .NET has intimate knowledge of .NET runtime execution and can, therefore, offer a richer
environment.
JavaScript and Client-Side Debugging

JavaScript is a scripting language that executes within the context of the browser. Visual Studio .NET
provides ways of creating and developing with this language but offers only very limited support for
interactive debugging in the same way that was demonstrated previously with server-side debugging.
This is because the browser is outside the Visual Studio .NET domain. Since the execution of asyn-
chronous requests and most Ajax-related functionality relies on JavaScript, it is important to know how
to effectively debug the client-side portion of your web applications.
Tools and Techniques of the Trade
Given that execution and processing of JavaScript is outside the direct control of Visual Studio .NET,
how then does a developer debug a web application that utilizes rich Ajax functionality and, therefore,
makes extensive use of JavaScript?
The answer lies in having an arsenal of tools, techniques, and utilities to suit whatever task is required.
332
Chapter 13
16_78544X ch13.qxp 7/18/06 3:18 PM Page 332
Using Alert Statements
Starting with the most basic and simplistic of options, a developer can intersperse their client-side code
with
Alert statements that either display a value of a variable or simply indicate where in the client
script code that execution has reached.
Try It Out Simple Alert Dialog Boxes
This example simply displays alert boxes at various stages of the code’s execution, showing the values of
any arguments passed in to the respective functions:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”AlertExample.aspx.cs”
Inherits=”Alert_AlertExample” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“ /><html xmlns=” >
<head runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
function SomeMethod(arg1)

{
alert(“In SomeMethod: arg = [“ + arg1 + “]”);
var counter = 0;
counter++;
// do some processing
counter = counter + 2;
SomeMethod2(counter);
return true;
}
function SomeMethod2(cntr)
{
alert(“In SomeMethod2: cntr = [“ + cntr + “]”);
}
</script>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<input id=”btnMain” name=”btnMain” type=”button” value=”Test Alert”
onclick=”SomeMethod(this.id);” />
</div>
</form>
</body>
</html>
This approach is obviously extremely simplistic and requires the developer to add extra code to various
places within the page. In a complex application, this may not be easy, or even possible.
What would be ideal is to use a rich debugging environment similar to the one provided by the server-
side environment discussed earlier.
333
Debugging

16_78544X ch13.qxp 7/18/06 3:18 PM Page 333
Code samples from the book are available for download at and at
www.wrox.com
.
Visual Studio Script Debugging
Enabling a rich debugging environment, similar to the server-side environment, is possible. However,
this does require some interaction between the browser and Visual Studio .NET; therefore, some quick
configuration is required to enable this support that is not normally enabled by default.
Internet Explorer needs to be configured to allow debugging to take place. By default, debugging is not
enabled within Internet Explorer. To enable this feature within Internet Explorer, select Tools➪Internet
Options.
A dialog box will be presented with a number of tab options. Selecting the Advanced tab will show a
number of options (see Figure 13-5).
Figure 13-5
Ensure that both Disable Script Debugging (Internet Explorer) and Disable Script Debugging (Other) are
not selected. Strictly speaking, only Disable Script Debugging (Internet Explorer) needs to be unselected
for script debugging to work. Unselecting the Disable Script Debugging (Other) means that debugging
will be enabled for scripts hosted outside of Internet Explorer, such as Microsoft Outlook.
For a comprehensive document on configuring and troubleshooting client script debugging, have a look
at the following document:
www.gotdotnet.com/team/csharp/learn/whitepapers/
How%20to%20debug%20script%20in%20Visual%20Studio%20.Net.doc
.
That’s all the configuration required to enable script debugging.
334
Chapter 13
16_78544X ch13.qxp 7/18/06 3:18 PM Page 334
Try It Out Client-Side Script Debugging
To test this, create a new web site project within Visual Studio .NET. Create a new web form/ASPX page,
or alternatively edit the

Default.aspx page within the project. Remove the existing <html></html>
declaration and everything contained within those tags, and replace it with the following code:
<html xmlns=” >
<head runat=”server”>
<title>Test Script Debugging</title>
<script type=”text/javascript”>
function DoSomeWork()
{
var cntrl = document.getElementById(“txtInput”);
var number = cntrl.value;
number++;
var newValue = DoSomeMoreWork(number);
alert(“New Value = “ + newValue);
}
function DoSomeMoreWork(arg)
{
// Do some calculations
arg = arg * 2 + 32;
arg = arg + 18 / 2;
}
</script>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<input type=”text” id=”txtInput” value=”test” />
<input type=”button” value=”Submit value” onclick=”DoSomeWork();” />
</div>
</form>
</body>

</html>
Ensure that the newly created page is set as the Startup Page within Visual Studio by right-clicking on
the page with the mouse and selecting Set as Start Page.
Click the Play button, shown in Figure 13-6 (ensure that the active configuration is set to Debug), or
press F5 to launch the application in debug mode.
Figure 13-6
335
Debugging
16_78544X ch13.qxp 7/18/06 3:18 PM Page 335