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=”http://schemas.microsoft.com/xml-script/2005”> <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 [...]... 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 asynchronous requests and most Ajax- related functionality... Debugging 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 declaration and everything contained within those tags, and replace it with the following code: ... 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 Debugging 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... 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 serverside environment discussed earlier 333 Chapter 13 Code samples from the book are available for download at http://beginningajax.com and at www.wrox.com Visual Studio Script... 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... many ways the developer can interact with the server-side debugger within Visual Studio NET For an exhaustive explanation of debugging applications, visit http://msdn2.microsoft.com/ 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... value=”test” /> 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... during debugging, the developer may opt to continue execution past the 331 Chapter 13 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... 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 . 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. 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”. 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