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 />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

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:
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


<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): />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
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>