Beginning Ajax with ASP.NET- P24

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:15

Thêm vào BST

Báo xấu

86
lượt xem 7
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Beginning Ajax with ASP.NET- P24:Thank you for purchasing Beginning Ajax with ASP.NET. We know that you have a lot of options when selecting a programming book and are glad that you have chosen ours. We’re sure you will be pleased with the relevant content and high quality you have come to expect from the Wrox Press line of books.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Beginning Ajax with ASP.NET- P24

Atlas Integration with ASP.NET Services 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
Chapter 12 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
Atlas Integration with ASP.NET Services 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
Chapter 12 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 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: ❑ Within the tag, the enableBrowserAccess must be turned on. This is accomplished within the like this: ❑ The 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. ❑ Properties that are part of groups may be referenced by GroupName.PropertyName in the profileService, setProperties, and getProperties attributes. 324
Atlas Integration with ASP.NET Services ❑ A special 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. ❑ Profile configuration — Profiles need to be configured properly. As shown earlier, the following is an example for the samples presented in this chapter. ❑ 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. 325
Chapter 12 This is the text to drag around the screen. 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: This is the text to drag around the screen. 326
Atlas Integration with ASP.NET Services 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
Chapter 12 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. 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. 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.
Chapter 13 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 setting within the Web.Config web application configuration file: If you try to run a web application using Visual Studio .NET 2005 in debug mode, and the 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
Debugging 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
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 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 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 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
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 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: Untitled Page 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 + “]”); } 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
Chapter 13 Code samples from the book are available for download at http://beginningajax.com 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
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: Test Script Debugging 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; } 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