Chapter 4: Understanding the ASP.NET AJAX Client Library
Chapter 4: Understanding the ASP.NET AJAX Client Library
Many of the application improvements you get in using AJAX are centered on doing more in JavaScript in the browser. This includes asynchronous communications with the server, preloading images and data, more manipulation of the browser DOM, and more. What these improvements all have in common is an increased use of JavaScript to accomplish these tasks. ASP.NET AJAX provides some key features that make this easier. In this chapter you will look at the type system provided by the Microsoft AJAX Library that makes it easier to employ familiar OOP (object-ori-ented programming) patterns in your JavaScript development. You will also see a set of JavaScript classes that provide core functionality similar to the base class libraries of the .NET Framework. The AJAX Library brings concepts from the .NET Framework to JavaScript running in the browser, making the server and client coding models a bit more consistent. However, since JavaScript is inherently quite different from C# or VB.NET, and since you cannot leverage the .NET Framework on the user’s computer, you shouldn’t expect a high degree of compatibility and consistency here. The AJAX Library has also added a client-side page lifecycle, similar in concept to the ASP.NET server-side page lifecycle. This addition makes it easy to participate in the processing of the page, work with partial page rendering, and provide event handlers for user actions.
I should point out here that with ASP.NET AJAX, you will get many of the application advantages without writing a lot of JavaScript yourself. In Chapter 2, for example, you saw how to use server controls that automatically generate JavaScript for you to enable partial page rendering. In Chapter 8 you will see a set of controls from the AJAX Control Toolkit that provide some interesting UI features that leverage the Microsoft AJAX Library and do not require you to write a lot of JavaScript. Microsoft has done a great deal of work for you, which you can easily leverage in your applications. Once you want to write your own controls, add custom event handlers, or start doing more in the browser, however, you will likely need to write custom JavaScript code. The ASP.NET AJAX Client Library and some recommended coding patterns can make you more productive in that work.
The Browser Page Lifecycle
One of the first things to understand about the ASP.NET AJAX Library is that it establishes a page lifecycle for JavaScript code running in the browser. It is not as complex as the server page lifecycle but it is central to interacting with some of the more complex features. This lifecycle gives you some easy “hooks” that you need to tap into in order to do the processing you want to do at the right time. Although the JavaScript event mechanism is simpler than that provided by the .NET Framework, it is sufficient for your needs. Listing 4-1 (from BasicAJAX.aspx) shows a very basic page built with ASP.NET AJAX. It just pops up a box with the word hello, but it shows a basic starting point. To use the Microsoft AJAX Library and initiate the client-side lifecycle in the browser, there is a ScriptManager control on the page. This takes care of rendering the references to the scripts that make up the library, which the browser will have to request when the page loads.
 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function pageLoad(sender, args) {
alert("hello");
}
function pageUnload(sender, args) {
alert("goodbye");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="sm" />
<div>
</div>
</form>
</body>
</html>
|
The pageLoad and pageUnload functions are the primary points where you will interact with the browser page lifecycle. The pageLoad function is automatically called after the page is initially retrieved from the web server and some script processing has occurred. The pageUnload function is then called whenever a subsequent request is initiated (for postback, partial page rendering, or even when navigating to a different application). When the page is loaded again, even during partial rendering, the pageLoad function will again be triggered. Chapter 11 discusses building custom controls and also shows additional details of the page lifecycle.
For most of the rest of the code samples in this chapter, I will omit the HTML markup and inclusion of the ScriptManager. The examples will focus on the script you will write and how to use the type system and base class library features of the AJAX Library.
