Lập trình .net 4.0 và visual studio 2010 part 38 doc

CHAPTER 11    251 Microsoft AJAX Library Visual Studio 2010 includes a new version of the Microsoft AJAX libraries that can be used in any web application. When working with the Microsoft AJAX library, many developers believe that it consists of little more than the UpdatePanel, which is a shame because it offers so much more. Many developers also believe that the Microsoft AJAX libraries can be utilized only in ASP.NET applications. They would be wrong; the Microsoft AJAX library is (mostly) just plain ol’ JavaScript files and can be utilized in any web applicationASP.NET, PHP, Ruby, or anything else you can think of. Although some functionality doesn’t make much sense outside of the ASP.NET platform, it’s a tiny part of the libraries. This release introduces a new mechanism for loading scripts, easy-to-use client side data binding, and integration with jQuery. Existing users also benefit from refactoring and performance enhancements. The libraries will soon be put to the test in the upcoming NASA community web site and MSN Messenger web toolkit.  CAUTION This chapter was written with the beta version of Microsoft AJAX library, so functionality might differ come final release. You have been warned. Architecture Changes One of the biggest changes in this release is that the AJAX control toolkit and AJAX libraries have now been combined. The libraries have also been open sourced (New BSD License) and donated to the codeplex foundation as its first project. Microsoft is keen to point out that the decision to open source the libraries won’t affect its support and it is also encouraging community contributions. Compatibility The libraries have been tested with the following browsers (and might work with others, but no guarantees): • Microsoft Internet Explorer 6, 7, and 8 • Mozilla Firefox 3 and 3.5 • Apple Safari 4 • Opera 10 • Chrome 3 CHAPTER 11  MICROSOFT AJAX LIBRARY 252 A pageLoad Problem Fixed Microsoft has fixed a bug present in previous releases, so you will no longer have to manually call the sys.application.initialize() method to ensure that the pageLoad() method is called before the window.onload event occurs (see http://seejoelprogram.wordpress.com/2008/10/03/fixing- sysapplicationinitialize-again/). Installation A number of Visual Studio 2010 project templates such as ASP.NET MVC 2 and ASP.NET web application projects include the Microsoft AJAX libraries out of the box. The libraries will, however, be maintained separately from Visual Studio/.NET 4.0, so to obtain the latest release you will need to download it from http://ajax.codeplex.com/. Adding Microsoft AJAX Libraries to Your Project The easiest (but not necessarily best) way to include the Microsoft AJAX libraries in your project is to use the ASP.NET ScriptManager control on your page: <asp:ScriptManager runat=”Server” /> ScriptManager is a great little control that takes care of referencing Microsoft script files and helps you manage your own scripts. In previous versions, ScriptManager had a dark and not so secret flawit loaded all the Microsoft AJAX libraries, whether you needed them or not. Downloading unnecessary stuff is always bad, so the latest version of ScriptManager included with VS2010 offers you finer control over which scripts are included by using the new MicrosoftAjaxMode setting. MicrosoftAjaxMode has three different settings: • Enabled (includes all Microsoft AJAX scriptsdefault setting and mimics the behavior of previous releases) • Explicit (you specify the script files to be imported) • Disabled (Microsoft AJAX script features disabled and no script references added) The following code shows how to use the ScriptManager control to import just the MicrosoftAjaxCore.js script: <asp:ScriptManager ID="NewScriptManager" MicrosoftAjaxMode="Explicit" runat="server"> <CompositeScript> <Scripts> <asp:ScriptReference Name="MicrosoftAjaxCore.js" /> </Scripts> </CompositeScript> </asp:ScriptManager> It is important to remember that some scripts depend on other scripts when you use the Explicit mode, so you need to also include the dependent scripts. The dependencies between the script files are shown in the following link: http://www.asp.net/ajaxlibrary/Ajax%20Script%20Loader.ashx. CHAPTER 11  MICROSOFT AJAX LIBRARY 253 The client script loader is an alternative to the ScriptManager control, and I think it’s a better and cleaner platform-independent method. You’ll use the client script loader in the rest of this chapter, so let’s take a look at it now. Client Script Loader Using the client script loader is very easy. Once you have downloaded the libraries and included them in your project you need to reference the JavaScript file Start.js. Start.js contains the client script loader functionality that can reference all the other script files: <script src=" /Scripts/Start.js" type="text/javascript"></script> Once you have referenced the client script loader, you can then use its methods to load other scripts with the Sys.require() method (the following code references the new dataView component that you will look at shortly): Sys.require(Sys.components.dataView); The client script loader loads scripts in a very efficient and parallelized manner, taking care of resolving dependencies and ensuring that scripts are loaded only once. It even supports lazy loading and working with third-party libraries. Referencing jQuery Scripts You can even use the client script loader to load the jQuery or jQuery validation scripts: Sys.require(Sys.scripts.jQuery); Table 11-1 shows some of the scripts/components you can load with the client script loader. Table 11-1. Client Script Loader Script A lias and Purp os e Script/Fun ctionality Sys.scripts.AdoNet WCF Data Services MicrosoftAjaxAdoNet.js Sys.scripts.ApplicationServices ASP.NET profile and security services MicrosoftAjaxApplicationServices.js Sys.scripts.ComponentModel behavior MicrosoftAjaxComponentModel.js Sys.scripts.Core MicrosoftAjaxCore.js Sys.scripts.DataContext (new DataContext and AdoNetDataContext functionality) MicrosoftAjaxDataContext.js (Continued) CHAPTER 11  MICROSOFT AJAX LIBRARY 254 Table 11-1. Continued Script A lias and Purp os e Script/Fun ctionality Sys.scripts.Globalization MicrosoftAjaxGlobalization.js Sys.scripts.History (browser history) MicrosoftAjaxHistory.js Sys.scripts.jQuery jquery-1.3.2.min.js Sys.scripts.jQueryValidate jquery.validate.min.js Sys.scripts.Network MicrosoftAjaxNetwork.js Sys.scripts.Serialization MicrosoftAjaxSerialization.js Sys.scripts.Templates (client-side templates) MicrosoftAjaxTemplates.js Sys.scripts.WebServices (proxy calls) MicrosoftAjaxWebServices.js Sys.components.colorPicker Note this is the format to load various controls from the AJAX toolkit Note that each of these scripts has a .debug.js version and that the AJAX control toolkit now lives in the scripts/extended directory. Specifying Script Directories By default, the client script loader will load scripts from the same directory in which it is located, although you can modify it by specifying a new basePath property: Sys.loader.basePath = " /MyLocation/"; You can also specify a separate directory for jQuery scripts to be loaded from: Sys.scripts.jQuery.releaseUrl = " /jQuery/jquery-1.3.2.js"; Sys.scripts.jQuery.debugUrl = " / jQuery /jquery-1.3.2.js "; Loading Custom Scripts You can also make use of the parallelization capabilities of the client script loader to load your own scripts with the loadScripts() method that accepts an array of script files to load: Sys.loadScripts([" /AnnoyingTrailingCursor.js", " /Scripts/HorribleFlashingDiv.js"]); CHAPTER 11  MICROSOFT AJAX LIBRARY 255 Lazy Loading A good use of the loadScripts() method is to load scripts only when they are needed (lazy loading). For example, you might have a function that is rarely called and instead of forcing all users to have to download it you can load it only when you need to: function btnHardlyEverClicked_click() { Sys.loadScripts([" /Scripts/myFunction.js"], function() { myFunction(); }); } AJAX Libraries Now Hosted by Microsoft The Microsoft AJAX and jQuery libraries are now hosted by Microsoft’s content delivery network (CDN). By using DNS trickery, script files can be served from a server local to the user, thus reducing download time and load on your server (not to mention your bandwidth bill). The following code shows how to reference the CDN version of the scripts. (The URL, version 0911, will probably change by release, so for the most up-to-date information, please refer to http://www.asp.net/ajax/cdn/.) <script src="ajax.microsoft.com/ajax/0911/start.js"></script> ScriptManager EnableCDN The ASP.NET ScriptManager control has a new Boolean property called EnableCdn that if set to true will serve scripts from the Microsoft CDN. AJAX Toolkit Integration The AJAX toolkit controls are now combined into the AJAX libraries. Apart from easier deployment, this feature also allows you to programmatically create them. The following example shows how to add the color picker control from the toolkit to a textbox programmatically (note that it wasn’t necessary to reference any toolkit assemblies): <script src="./Scripts/Start.js" type="text/javascript"></script> <script src="./Scripts/Extended/ExtendedControls.js" type="text/javascript" type="text/javascript"></script> <script> Sys.require(Sys.components.colorPicker, function() { Sys.create.colorPicker("#txtChooseColor"); }); </script> <input id="txtChooseColor" /> CHAPTER 11  MICROSOFT AJAX LIBRARY 256 Controls Now Exposed as jQuery Plug-ins In this release, all the ASP.NET AJAX controls are exposed as jQuery plug-ins. So you can instantiate them using jQuery syntax, even making use of jQuery’s chaining capabilities. The following code attaches an ASP.NET AJAX watermark control to a text box and an ASP.NET AJAX color picker: Sys.require([Sys.scripts.jQuery, Sys.components.watermark, Sys.components.colorPicker]); Sys.onReady(function () { $("#txtChooseColor").watermark("Choose a color", "watermarked").colorPicker(); }); DataView One of the coolest controls in this release is the new DataView control. DataView allows you to easily define a template that can be bound to various types of data or services. WPF/Silverlight developers might notice some similarity with the binding syntax. XHTML-Compliant? Microsoft wants you to know that it has made great efforts to ensure that declarative binding is XHTML- compliant. I’m not sure this is strictly true, but you will see a very clean way of performing it. Sebastian Lambla has a lengthy post on this subject (note that Sebastian would have been using a previous version of the AJAX libraries when this post was written): http://serialseb.blogspot.com/2009/06/in-how-many- ways-can-microsoft-ajax-4.html. Hello, Microsoft AJAX It’s time to look at the new DataView functionality, so let’s create a new empty ASP.NET web project called Chapter11.HelloAjax. 1. Create a directory called Scripts within your project. 2. Download the latest AJAX libraries from http://ajax.codeplex.com/. 3. Unzip the downloaded file and copy the contents of the Scripts directory to the new project’s root directory. 4. You don’t want any of the master page stuff, so delete the Default.aspx file. 5. To show the libraries are platform-independent, add a new HTML file called dataviewDeclarative.htm. 6. Drag Start.js to the default.htm head HTML section to create the following script reference to the client script loader: <script src="Scripts/start.js" type="text/javascript"></script> . http://seejoelprogram.wordpress.com/ 200 8/ 10/ 03/fixing- sysapplicationinitialize-again/). Installation A number of Visual Studio 201 0 project templates such as ASP .NET MVC 2 and ASP .NET web application projects. CHAPTER 11    251 Microsoft AJAX Library Visual Studio 201 0 includes a new version of the Microsoft AJAX libraries that can be used in any web application libraries out of the box. The libraries will, however, be maintained separately from Visual Studio/ .NET 4. 0, so to obtain the latest release you will need to download it from http://ajax.codeplex.com/.