ASP.

NET AJAX
Pablo Oropin
BS Computer Engineering BS Computer Science th

March 28 2008

ABSTRACT Nowadays, information needs to be accessed as fast and efficient as possible in order to save more time. The fastest way to access information is through web pages; however, they can become a very frustrating experience if their response time takes too long. People are used to the fast interaction and response of desktop applications or programs installed in a computer. The opposite used to be true about web pages whose response time was too long. A new technology was invented to overcome this problem and to enhance the experience on web pages for users. This technology is AJAX (Asynchronous JavaScript and XML) and allows developers to build interactive applications by processing requests from users almost immediately. AJAX takes the web experience to the next level by providing its users with a desktop application style experience. In fact, information can be accessed in real-time without having to wait a lot to get a response. This is the future development of the web which makes users comfortable working inside a browser while providing them with the benefits of the web. Currently, many companies have implemented their own framework to develop AJAX enabled web pages; nevertheless, one of the friendliest frameworks to develop these types of applications is the ASP.NET AJAX which is a technology implemented by Microsoft. ASP.NET AJAX merges the Active Server Page .NET framework (to build dynamic web pages) with JavaScript and XML letting developers create fast interactive web pages. ASP.NET AJAX is Asynchronous JavaScript and XML framework that is discussed throughout this seminar paper.

and extend its functionality. ASP.NET AJAX merges cross-browser client script libraries with the ASP.NET web-application server-oriented platform [4]. Furthermore, this new technology for web development allows web programmers create the same type of functionality for client-based web pages that ASP.NET offers for server-based pages [10]. ASP.NET AJAX offers one more advantage to web development because it is an extension of ASP.NET: it is completely integrated with server-based services. ASP.NET AJAX is a friendly platform that enables web developers to easily use AJAX techniques on the web for creating ASP.NET pages with a fast UI response and server communication [5]. In short, this framework allows building next-generation interfaces with AJAX components that are reusable, enhancing and updating existing web pages with AJAX controls that are supported in all modern browsers, and accessing remote data from the clients browser without writing complicated scripts. The ASP.NET AJAX framework simply adds AJAX functionality to ASP.NET so that developers write web applications requiring extensive use of XMLHttpRequest object, JavaScript, DHTML, XML, DOM, and CSS without knowing about the specifics of these technologies [3]. The result of this encapsulation is to avoid reloading a web page each time a request is made to the server by only sending little bits of XML back and forth. 2. BACKGROUND In the past, many efforts had been done by Microsoft to asynchronously load content of web pages without requiring a full refresh of the page. One solution that Microsoft used to accomplish this task was the HTML element type IFRAME that was introduced in Internet Explorer in 1996 [8]. IFRAME contains a src attribute that can take any external URL that in conjunction with some JavaScript can change the parent page; this process results in an AJAX-like effect. However, in 1998 Microsoft introduced a new technique called Microsofts Remote Scripting (MSRS) to load web pages content asynchronously [17]. MSRS allows data from the server to be pulled in by a Java applet

1. INTRODUCTION ASP.NET AJAX, formerly named Atlas [9], is a framework built by Microsoft for creating highly personalized, more interactive, and richer crossbrowser web applications. This framework and its associated source code are distributed under GNU license so that developers can experience its features

from which the client, by using JavaScript, can communicate. Finally, Microsoft put together all the necessary technologies to accomplish the asynchronous load of web pages content; thus, they created ASP.NET AJAX. Microsofts AJAX framework was released in January 2007 and it is a standalone extension of ASP.NET that later was included in the 3.5 version of the .NET framework [2]. 3. ASP.NET AJAX ARCHITECTURE The ASP.NET AJAX architecture consists of server components and client-script libraries that are integrated to provide a robust and reliable development framework. Figure 1 illustrates the different functionalities that are included in the server components and client-script libraries of the ASP.NET AJAX framework:

understanding of the ASP.NET AJAX architecture so that they can further expand ASP.NET AJAX framework [2]. 3.1 ASP.NET AJAX Client Architecture The ASP.NET AJAX library is a set of JavaScript files (.js extension) providing programmers with the necessary tools for an objectoriented environment [6]. The following are the layers included in the ASP.NET AJAX library: 1. Components layer: They include non-visual components such as libraries and behaviors (JavaScript logic for UI), and visual components that can adjust to a specific language and culture. Browser compatibility layer: provides compatibility for most commonly used browsers so that ASP.NET AJAX scripts can be run. Networking layer: it handles asynchronous remote method calls and communication with server applications. Core Services layer: it contains many extensions to JavaScript such as event handling, data types, inheritance, classes, namespaces, and object serialization.

2.

3.

4.

3.2 ASP.NET AJAX Server Architecture The server architecture of ASP.NET AJAX has four main layers that provide the necessary functionality to its server components. Those components include ASP.NET Web server controls and other components needed to manage serialization, control extensibility, flow and UI of an application, and access to forms and authentication profiles [2, 6]. The following are the layers functionality to server components: 1. that provide

Figure 1: ASP.NET Server and Client Architecture [2, 3]. Figure 1 shows the four different layers that are part of the Microsoft AJAX library in the client side. The ASP.NET AJAX extensions in the server side have also four layers. This multi-tier architecture is meant to provide developers an object oriented environment as well as an easier 2.

Script Support layer: this layer provides JavaScript debugging features such as argument and type checking. Furthermore, it enables developers to design applications providing UI for many different cultures and languages using a single code base. Web Services and Application services layer: these layers provide different Web services that can be called from client scripts in order to work with ASP.NET services applications for user profiles and forms authentication.

3.

Server controls layer: this layer enables the integration of server and client code on ASP.NET server controls to produce AJAXlike behavior.

4. PROGRAMMING MODEL 4.1 Server-Centric Development Model This is a programming model that is used in Web applications that are not AJAX enabled. In this model, the client-side logic is very simple because it is reduced to making requests and getting the responses back from the server [7]. The server is in charge of most of the interaction and user interface logic, and the browser renders the whole page for each postback. 4.2 Client-Centric Development Model In a Client-Centric Development model the server, in the initial request, sends down the UI and presentation logic. This UI logic is script-based and it is run on the client to handle the interaction between the Web application and the user by sending data to the server and retrieving the response from the server [7]. Figure 2 represents the ASP.NET AJAX clientcentric programming model.

with this approach for programming Web pages because it would require in-depth knowledge of JavaScript. They were used to the server-centric development model because all of the complicated parts of a Web application such as the UI and services logic were implemented using familiar programming languages like C# and VisualBasic. ASP.NET AJAX breaks that paradigm because it encapsulates the scripting part letting developers write Web pages with AJAX-like behavior using server controls, but without the need to use any scripting. In fact, those Web applications require the use of a lot of JavaScript, DHTML, and the XMLHttpRequest object that developers do not have to be experts at because ASP.NET AJAX handles those technologies. 4. ASP.NET AJAX SERVER CONTROLS 5.1 ScriptManager This control manages script resources for localization (process of localizing scripts for specific cultures and languages [2]), partial-page updates, custom scripts, and client components. Each ASP.NET enabled AJAX application requires one and only one instance of the ScriptManager server control in order to use the other server controls: UpdatePanel, UpdateProgress, and Timer controls [11]. 5.2 UpdatePanel This control uses asynchronous postbacks in order to create the partial-page refreshing behavior of AJAX enabled web pages. It does not refresh the entire page; instead, it refreshes selected parts of the page. This is the ASP.NET server control that enables developers to create rich, client-centric web pages. A web application requires only one ScriptManager and one or more UpdatePanels to create the partial-page update without any custom client script [13]. Synchronizing the client and the server to update only selected parts of a Web page requires in-depth knowledge of JavaScript; however, this server control encapsulates all of the JavaScript enabling developers build applications without writing any scripting. In addition, the UpdatePanel server control reduces, significantly, the amount of data that is sent back and forth between the server and the client by using asynchronous postbacks. An asynchronous postback behaves like a normal postback in that the server page controls the life cycle, and the execution of the entire page. Nevertheless, an asynchronous postback allows a Web page to update the regions that are enclosed in UpdatePanel controls. On the one hand, what the

Figure 2: ASP.NET AJAX Programming Model [7]. Figure 2 illustrates how the script-based for the presentation and the UI logic is initially sent in the original request. The client script for the UI handles the user interaction to send data to the server and retrieve it asynchronously; then, the script-based logic uses that data to further drive the content and presentation [7]. However, the way that the server shows resources and functionality to the UI is through services that send the needed data to the browser. In the past, Web developers were concerned

server does to accomplish this pattern is sending HTML markup for only those elements affected to the browser. On the other hand, the browser executes a JavaScript class called PageRequestManager that manipulates the DOM (Document Object Model) to replace existing HTML with new markup sent from the server [13]. The UpdatePanel server control must specify the content that will be updated in asynchronous remote calls to the server. The content is placed inside a markup property <ContentTemplate> of the UpdatePanel. Inside this property other server controls may be placed to perform the partial -page update pattern (Refer to figure 3).
CLIENT HTML HTML

5.3 UpdateProgress This control provides the status of the progress of partial-page refreshing. By using an UpdateProgress control, the Web page provides feedback to the user respecting to the amount of time that the asynchronous postback will take. Thus, this control must be associated with an UpdatePanel control or with all of the UpdatePanel controls in a Web application. The UpdateProgress control displays a <div> element when a postback event is triggered inside an UpdatePanel control, and it hides the <div> element when the new HTML markup sent from the server is rendered in the browser [14]. 5.4 Timer This ASP.NET AJAX server control allows developers to perform postback at given intervals. The Timer control can be either use for posting the whole page, or for partial-page updates using a ScriptManager and an UpdatePanel server controls. By using an asynchronous postback approach, the UpdatePanel control is updated when the specified interval has elapsed by executing some server code [12]. Because each Timer control interval causes a postback to the server that produces network traffic, the interval should be set to the longest time possible that is still practical for the Web application. 6. ASP.NET AJAX CONTROL TOOLKIT The ASP.NET AJAX Control Toolkit is a project that is extended jointly between Microsoft and the ASP.NET AJAX community [1]. This toolkit is a shared source code project that is built on top of the Microsoft ASP.NET AJAX framework to provide a powerful architecture for writing reusable, extensible, and customizable controls and control extenders. Web developers can use the ASP.NET AJAX Control Toolkit to write richly interactive Web applications to enhance customer experience; furthermore, they have access to a powerful software development kit that makes it simple creating and reusing controls and control extenders. This project can be downloaded from http://www.codeplex.com which is the web page that maintains the source code and where developers can submit their own controls for further community use and for extending this project. The main goals of this project are [1]: 1. Allow developers to get rich components for their web applications to enhance the Web experience. Provide examples for prospective developers willing to write client-

<div id=Bison/> ORIGINAL UpdatePanel CONTENT <input type=submit name=scud value=submit id=scud /> </div>

<div id=Bison/> UPDATED UpdatePanel CONTENT <input type=submit name=scud value=submit id=scud /> </div>

REQUEST: Initial GET SERVER

RESPONSE: Full render

REQUEST: Asynchronous Postback

RESPONSE: Partial Page Response

<asp: ScriptManager id=HUManager runat=server/> <asp: UpdatePanel id=Bison UpdateMode=Conditional runat=server <ContentTemplate> <!- -other panel content - -> <asp:Button id=scud Text=submit runat=server/> </ContentTemplate> </asp: UpdatePanel>

Figure 3: Partial-Page UpdatePanel [2].

rendering

using

an

Figure 3 shows a Web page that is completely rendered for the first time; then, it uses asynchronous postbacks that refresh only the contents of an UpdatePanel server control. The content that will be updated is inside the <ContentTemplate> element in the UpdatePanel server control [2].

2.

3.

side code and expand the ASP.NET AJAX control toolkit. Recognize developers and their work motivating them to keep writing controls, control extenders or scripts.

7. CONTROL EXTENDERS Extenders are an interest concept that was developed by the Microsoft AJAX team. Control Extenders are AJAX constructs that are used to extend the visual properties or the behaviors of existing ASP.NET server-side controls. Most ASP.NET server controls have their own specifically ASP.NET AJAX extender so that in run time they can be wired up or associated accordingly. The ASP.NET AJAX extenders are mostly written by the ASP.NET AJAX community to extend the ASP.NET AJAX framework. Some of the most popular control extenders are Accordion, CascadingDropDown, ConfirmButton, DragPanel, MaskedEdit, ModalPopup, AlwaysVisibleControl, and ResizableControl. 7.1 Accordion This control extender allows developers to provide many panes and display them one at a time. This extender behaves like many collapsible panels where only one can be expanded at once. It supports three different auto size modes [1]: 1. None: The accordion extender control shrinks or grows as much as it needs depending on the text content inside of it. Thus, it causes other elements on the page to move up or down when extending. Limit: The accordion never grows beyond the value specified for its height; therefore, the text content inside of it will have to be scrolled if too large. Fill: The accordion stays the same size as specified in its height value. The text content will be expanded or shrunk properly.

another list and does it without the need to add the entire data set in the web page neither transfer it to the client. For example, assume three DropDownLists in a web page where DropDownList 1 contains the makes of cars Audi and BMW; DropDownList2 contains the models available for the selected make; DropDownList3 contains the colors available for the specified make and brand selected. The CascadingDropDown extender allows the Web page to dynamically populate DropDownList 2 depending on the selection of the make. If the make selected was Audi, this extender calls the needed web service to retrieve the models for Audi cars such as A4, S4, A6 and load them into DropDownList 2. Then, based on the selection of the model from DropDownList 2, the extender will call again the needed web service to populate DropDownList 3 for the available colors of the given model. 7.3 ConfirmButton This control extender catches the click event on any ASP.NET button control or link without performing any postback to the server to display a message dialog to the user [1]. If the user clicks the OK button on the message dialog, the button will create a postback to the server; otherwise, the button will not. 7.4 DragPanel This is a powerful extender that Web developers can use to add draggability to ASP.NET server controls in a Web application [1]. This ASP.NET AJAX extender works well to make any ASP.NET server control draggable and droppable. When the DragPanel is associated to the desired ASP.NET server controls, the user can freely drag and drop those controls around just like in a windows application. 7.5 MaskedEdit This ASP.NET AJAX extender is associated with the ASP.NET server control Textbox in order to restrict the type of text that is written [1]. The MaskedEdit puts a mask on the Textbox to help the user understand the valid types of characters or text that are allowed in the Textbox. The supported masks in this extender are Number, Date, Time, and DateTime. 7.6 ModalPopup This extender allows developers write Web pages able to display information to the user in a modal way preventing the user to interact with rest

2.

3.

7.2 CascadingDropDown This ASP.NET AJAX control extender is associated with an ASP.NET DropDownList control to automatically populate a set of DropDownList controls. Every time the selection of any of the DropDownList controls in the set changes, the CascadingDropDown control extender makes a call to a specified web service to get the values of the next DropDownList in the set [1]. In other words, this extender empowers developers to make the contents of a DropDownList depended on the selection of

of the page [1]. The ModalPopup is associated with an ASP.NET server control or a set of server controls. When the ModalPopup is displayed, the user can only interact with the content associated with it; furthermore, a background will be applied to the rest of the web page avoiding the user to interact with it. When the user clicks OK or CANCEL in the ModalPopup, the user is done interacting with it and the ModalPopup is dismissed. 7.7 AlwaysVisibleControl This is a simple extender that lets developers pin ASP.NET server controls to the Web page to make them float over the background of the page when its content is resized or scrolled. 7.8 ResizableControl This is an ASP.NET AJAX extender that can be associated with any element on a web page. This extender lets users resize the elements that are attached to it [1]. This extender generates two events when the user is resizing its content: onresize and onresizing. The developer can use those events and attach custom script to the extender to create more complex behavior on the ResizableControl like limiting the size and width. 8. PROS AND CONS OF ASP.NET AJAX FRAMEWORK The ASP.NET AJAX framework presents a lot of advantages to Web developers that are mostly familiar with programming languages such as C# or VisualBasic and who barely know scripting. Although this framework allows developers to build a Web application in a reasonable short period of time, they are still limited to the ASP.NET AJAX server controls and control extenders provided by the ASP.NET AJAX community. The table 1 shows the advantages and disadvantages of ASP.NET AJAX framework. 8.1 Advantages Web pages that use ASP.NET AJAX are more efficient because most of the web pages processing is done in the browser. Visual Elements are familiar UI components such as pop-up windows, progress indicators, and tooltips. Partial-page refreshing allows updating only the sections of the web page that have changed.

Integrations between client and ASP.NET applications services for user profiles and authentication forms. Ability to include client capabilities on server controls. Support for most popular browsers: Mozilla Firefox, Internet Explorer, and Apple Safari. Allows the integration with Visual Studio tools.

8.2 Disadvantages Developers are limited to control extenders available unless they can write their own. ASP.NET AJAX only works with ASP.NET and not with other platforms such as JSP (Java Server Page). Developers need to know in-depth scripting if they want to use ASP.NET AJAX in other languages like PHP. It is hard to debug a Web application that uses control extenders if developers do not know the specifics of ASP.NET AJAX extenders and are not well acquainted with JavaScript.

9. CONCLUSION ASP.NET AJAX framework introduces many features on the client side that include avoiding to refresh the entire web page by sending little bits of XML back and forth, presenting the user with familiar UI elements that used to be part of windows programs only, and reducing the response time of web applications so that the user enjoys even more the web experience. This framework is a significant help for web developers because it encapsulates many technologies such as XMLHttpRequest, JavaScript, DHTML, and CSS allowing them to create rich and highly interactive Web applications. In fact, developers do not have to be experts at these technologies to create AJAX enabled Web pages; programmers only need to know the basics about those technologies. Complex web applications can be written in a short period of time by web developers; however, they are still limited to the type of ASP.NET AJAX server controls and control extenders that are made available by the ASP.NET AJAX community if they do not know any scripting to write their own.

10. REFERENCES [1] ASP.NET AJAX Control Toolkit. http://www.codeplex.com/AtlasControlToolkit. [2] ASP.NET AJAX Overview. http://msdn2.microsoft.com/enus/library/bb398874.as px. [3] Definition: AJAX. http://searchwindevelopment.techtarget.com/sDefiniti on/0,,sid8_gci1107521,00.html. [4] Definition: ASP.NET. http://searchwindevelopment.techtarget.com/sDefiniti on/0,,sid8_gci509342,00.html. [5] Definition: Atlas. http://searchwindevelopment.techtarget.com/sDefiniti on/0,,sid8_gci1179983,00.html. [6] N. Hilk. Atlas Architecture Overview, Sep 2005. http://www.nikhilk.net/AtlasArchitecture.aspx. [7] N. Hilk. Atlas Programming Model, October 2005. http://www.nikhilk.net/AtlasProgModel.aspx. [8] Inline frames: the IFRAME element. http://www.w3.org/TR/html4/present/frames.html#h16.5. [9] Microsoft .Net Development News: Atlas renamed ASP.NET AJAX, to ship by end of year, Sep 2006. http://searchwindevelopment.techtarget.com/news/art icle/0,289142,sid8_gci1215091,00.html. [10] K. Murkoth. A Primer on Microsoft Atlas, Aug 2006. http://www.ajaxdevelopersjournal.com/read/253435. htm. [11] .NET Framework Class library: ScriptManager Class. http://msdn2.microsoft.com/enus/library/bb398874.as px. [12] .NET Framework Class library: Timer. http://msdn2.microsoft.com/enus/library/system.web.ui.timer.aspx. [13] .NET Framework Class library: UpdatePanel Class. http://msdn2.microsoft.com/enus/library/bb398874.aspx. [14] .NET Framework Class library: UpdateProgress Class. http://msdn2.microsoft.com/enus/library/system.web.ui.updateprogress.aspx. [15] Podcast: Mike Gunderloy on the pros and cons of Atlas. http://media.techtarget.com/audioCast/APP_DEVEL OPMENT/sVB_May_news_podcast_05-042006.mp3. [16] K. Seguin. Implementing AJAX in ASP.NET Background, Dec 2007. http://www.developerfusion.co.uk/show/4704/.

[17] A. Wlinick. Remote Scripting, April 1999. http://msdn2.microsoft.com/enus/library/ms974566.aspx.