ASP. NET Atlas provides support for your long-awaited Ajax-style websites)

ASP. NET Atlas provides support for your long-awaited Ajax-style websites

This article is based on the prerelease version of ASP. NET "Atlas. All information contained in this document may be changed.

This article introduces the following:

•	Introduction to ASP. NET "Atlas"
•	Atlas Architecture
•	Client and server controls
•	Atlas and Web Services

This article involves the following technologies:

•	ASP. NET, Visual Studio 2005, and Internet Explorer

Content on this page

	What is atlas?
	Atlas Architecture
	Client Script core library
	Client script controls and components
	Server Control
	Web Services
	Summary

On April 9, September 2005, the ASP. NET team released the first new feature in ASP. NET, codenamed "Atlas ".CommunityTechnical Preview (CTP ). This feature extension of Microsoft. NET Framework 2.0 allows developers to easily create rich and interactive websites using both browser and server features.

This type of rich development supported by Atlas is collectively referred to as "Ajax" (Asynchronous JavaScript and XML). This is a newer acronym and represents a combination of some existing technologies. Modern browsers include XMLHttpRequest objects, which can be used by JavaScript to call back the server. This allows the page to respond to user input and perform out-of-band operations without refreshing the entire page. Although this concept is simple, the Ajax library can greatly reduce the heavy workload of writing client JavaScript that communicates with the server and processes the XML returned by Web Services.

The general problem solved by Ajax lies in the HTTP protocol itself. HTTP is the standard for the browser to communicate with the Web server to retrieve pages and send data back to the server from the browser. The Protocol is stateless, that is,CodeMaintains user input between page refreshes. For a long time, the typical user experience is that the entire page is refreshed to send the status information back to the server. Then, restore the user input on the page in the HTML returned to the browser.

ASP. NET manages this process for you. It transfers a field of the hidden view status form. Even if only a part of the page is updated, the HTML of the whole page is transmitted and a temporary time-space screen is displayed. During this refreshing process, the user can interact with the page only after the browser receives and presents a new view. Ajax calls back the server using the XMLHTTPRequest object to call the Web service without refreshing the entire page. Then, the updated page is directly modified in Javascript Based on the received XML. The user may not even notice that a page update occurs, and can continue to read the page or interact with the page. At the same time, the out-of-band work is asynchronously performed in the background.

What is atlas?

ASP. NET's Atlas function is not only used to write client-centric Web ApplicationsProgram. Atlas is constructed Based on. NET Framework 2.0 and supports better use of client JavaScript and XMLHttpRequest objects. It includes server-based functions that can more easily enrich existing ASP. NET applications, as well as client script libraries used by Atlas controls and services. The architecture diagram in Figure 1 shows that the Atlas architecture is cross-client and server, it should also be considered as a broad set of development technologies used to create richer and more responsive cross-browser web applications.

Figure 1 ASP. NET Atlas Architecture

Atlas is not limited to calling Asynchronous JavaScript to update the page area. You will also obtain a richer client experience that is difficult to achieve by other technologies. Take a web application built around movie data as an example. The application may need to allow users to search for specific actors. Apparently, a full drop-down list containing all the actors is provided to make the selection impractical, so the application is likely to break down this issue. You may be asked to select the first letter of the actor's name. In this way, server requests can be provided with a list that is slightly easier to manage, but it is not very good from the perspective of user experience. The application may present a text box to users to enter part of the actor's name. Then the server can have at least some data to narrow the search range. The situation has been improved, but it still needs to be improved. After using Atlas, you can provide a text box that dynamically responds when users type to help narrow the search scope without waiting for the browser to refresh the entire page. Figure 2 shows how you can use Atlas to add Automatic completion behaviors and provide feedback when users type.

Figure 2 filter a combo box

Atlas CTP can be downloaded from atlas.asp.net. After installation, it adds the additional C # and Visual Basic. Net website templates to Microsoft Visual Web Developer. When you create a website project in Visual Web Developer (click File> New> website), you will see a dialog box similar to figure 3. The Atlas website includes Microsoft. Web. Atlas. dll and the updated web. config file, which configures Web applications so that they can use the ASP. NET Function Based on Atlas. In the current version, Microsoft. Web. Atlas. dll is placed in the bin directory of the application and can be used as a local assembly throughout the application.

Figure 3 create an Atlas website

Atlas-based applications can be easily deployed by copying files from a development computer to a server with ASP. NET 2.0 installed, eliminating the need to install Atlas separately. Installation is performed at the application level rather than the computer level. These programs can be used on computers that have installed early versions of Atlas after the release of subsequent CTP versions, even if the features have been developed and changed. Compared with system-wide installation, this provides more flexibility for migration to newer versions.

Back to Top

Atlas Architecture

Note that the Atlas architecture shown in Figure 1 spans the client and server. Although some additional client functions are added to ASP. NET 2.0, they are not as good as Atlas. On the right side of the Architecture diagram, note that the function of the Atlas server is built on ASP. NET 2.0 and its function is extended. Atlas includes a set of new server controls and new features designed to access server-based data and services from a browser.

On the left side, you will see a comprehensive client script library. You can use this library independently of the server function when writing client-centric JavaScript. The new features of Atlas use client-based features to support the development of richer applications through improved client-server interaction.

Figure 4 shows the typical client-server interaction in a web application. First, request the page through the browser, and then the user interacts with it. When a user needs to retrieve data from the server for some operations, the complete page is refreshed based on the user input. Unfortunately, this behavior does not allow users to continue interacting with the page. The user must pause the web application continuously.

Figure 4 typical client-server interaction

Figure 5 shows that the client-server interaction using Atlas does not require a complete page refresh. Instead, it first retrieves HTML, then calls the server to obtain XML, JavaScript Object Notation (JSON), or update data in the form of HTML code segments, and updates the page incrementally. When the background asynchronous call calls a web service or retrieves page changes, the user will not notice that the request must be paused. These asynchronous calls are the view status information of subsequent server sending and managing updates, so that accurate page status can be transmitted to the server when a complete page is refreshed.

Figure 5 Atlas client-server interaction return directory

Back to Top

Client Script core library

The Atlas client script library is provided to the browser as multiple different fragments. The Script core includes the underlying layer, and the rest of the library is built on the underlying layer. The bottom layer is the browser compatibility layer. A key feature of Atlas is that it runs on popular browsers that support key Ajax elements. In the CTP version, Mozilla Firefox, Apple Safari, and Microsoft Internet Explorer are supported. The browser compatibility layer is an abstraction layer that allows you to write scripts with ease. You do not need to consider the differences between different browser implementations. With it, you can easily extend the Atlas support when the browser develops and releases a new version. The browser that sends the request automatically determines which browser-specific compatibility layer is used. More advanced code has been written into the abstraction layer, so you do not need to write code to handle various changes in the browser implementation.

The core type system is built on the compatibility layer. This type of system allows object-oriented Javascript development. It allows JavaScript developers to create namespaces and add classes to them. It also simulates Object Inheritance. It supports interfaces, delegation, and enumeration, so that you can use the object-orientedProgramming Language, Such as C.

The base class library layer is built on the Type System. With this layer added, it constitutes the core of the entire client script library. This concept is derived from the. NET Framework and provides some familiar types. There is an event object that naturally supports event multicasting in JavaScript. There is also a stringbuilder object. Object serialization is also supported, including support for JSON and XML data. The base class library also includes the webrequest and webresponse classes, which provide abstraction for the XMLHTTPRequest object of the browser, similar to the system. Net namespace in the. NET Framework. The code shown in Figure 6 demonstrates how to use the Atlas Script core to create two simple types in JavaScript. The movie type is created first. It provides the title and genre attributes of a movie and a tostring method. Then, the movie type is extended through the drama type and the tostring method is rewritten.

Page 7 of the movie and drama types is shown. It first references the. js file, where the type is defined in the Atlas scriptmanager control. In the click handler, instances of the movie and drama types are created on the page and Their tostring methods are called. You may expect to see inheritance behavior in any object-oriented programming language, but the code that is running happens to be dynamic JavaScript. Another advantage of current Atlas installation is that it includes the debugging version of the client script library, which makes debugging and troubleshooting easier. Debugging Javascript is always troublesome, which may be easier.

Back to Top

Client script controls and components

The component model and control layer constitute the core layer of the Atlas architecture client script. This part of the script library is constructed based on the Script core, but presented to the client separately. When writing a script, you can choose not to include the component layer but directly use the Javascript type system and the base class library. However, you do not have the permission to access the client components provided by Atlas and cannot use XML scripts, it is a new set of declarative elements, including in the page tag sent to the browser. XML-script elements are included in script tags that use the following new types of values:

 
<SCRIPT type = "text/XML-script">
 

The key to adding a group of additional elements to tags is to use SCRIPT tags. The browser can recognize script elements, but cannot process the text/XML-script type. The Atlas script library can process the elements contained in the script tag itself. The tag is processed by the component layer of the client script library. XML scripts are analyzed on the client to create instances of components and controls. It can contain the property settings of the components and controls it defines, and can declare the binding between them and other HTML elements on the page. The XML script element can also declare web service resources and reference them as data sources in other parts of the tag. The example Page in Figure 8 shows how to use an XML script to declare and determine when the mouse pointer is hovering over the year, the titles associated with the year are displayed as pop-up elements.

The page in Figure 8 contains a div element that shows the year and a span element that shows the title, but the element is declared as hidden. In this XML script, a popupbehavior is associated with the title and called by the hoverbehavior associated with the Year. The popupbehavior code is included in the components and control layer of the Atlas script library. It is easier to check XML scripts than to stare at JavaScript typically contained in pages, especially when you begin to adjust the code to process multiple browser implementations. The declarative syntax similar to the XML script in Figure 8 can be easily generated and used by development tools. By using the Atlas Server Control to generate xml scripts, you can enjoy a richer user experience during page execution. Most XML scripts used in the Atlas application will never exist directly in the. aspx file, and most developers do not have to manually encode it.

Actions as part of Atlas CTP aim to improve user experience. Progress behaviors can provide information that an operation is waiting for processing in the background. Click, hover, and pop-up actions to enrich user interaction. With XML scripts, you can easily add behavior to HTML elements on the page through declaration. Because the behavior itself is implemented in Javascript, it is possible to implement more complex behavior, but its use between pages can be implemented through XML scripts.

Back to Top

Server Control

By using the server control contained in Atlas CTP, you can easily avoid the pause that occurs during page sending back. When the widget is updated in the background, you can continue to interact with the page. To achieve this goal, the two server controls work collaboratively. You can add it to an existing page to greatly improve the effect. The scriptmanager control modifies the client to be released back, And the updatepanel control manages the page lifecycle on the server to achieve this change.

All pages that use the Atlas function must include the scriptmanager control. It is responsible for coordinating which Javascript is sent to the client. The server control can provide JavaScript for the client and process the script using the scriptmanager control. The scriptmanager control uses the new iscriptcomponent interface implemented by the control. The scriptmanager control also supports component script libraries associated with XML script elements.

Setting the enablepartialrendering attribute of the scriptmanager control to true will result in the following new sending behavior from the client:

 
<Atlas: scriptmanager enablepartialrendering = "true" runat = "server"/>
 

The release is modified to allow requests without interrupting the user experience. For Partially rendered requests, the view status information required to maintain control information between requests must be maintained. The HTML code of the area being refreshed or modified will be updated through the interaction between JavaScript and the browser Document Object Model (DOM. The updatepanel control is used to specify the areas on which partial updates are allowed on the ASP. NET page.

The updatepanel Control instructs the scriptmanager control on which areas of the page should be updated separately. When operations in the browser cause sending back to the page area, the form data is sent and the lifecycle of the page is executed on the server. Because the script starts sending back asynchronously in the background, the page is still displayed to the user. On the server, the status of the view status data control sent from the client is restored. When the rendering phase occurs, the scriptmanager control isolates the rendering of the updatepanel region because the rendering of this region is being sent back to the browser. The system will also collect view status data of the page and send it together with HTML as part of the response. Then, the scripts in the browser Replace the HTML corresponding to the previous rendering of updatepanel content with the new HTML.

The updatepanel control can contain elements of triggers and contenttemplate:

 
<Atlas: updatepanel id = "updatepanel1" runat = "server"> <triggers>... </triggers> <contenttemplate>... </contenttemplate> </Atlas: updatepanel>
 

The regions in contenttemplate are refreshed when the scriptmanager control manages asynchronous sending. The triggers element can contain the controleventtrigger and controlvaluetrigger elements. With the triggers element, page developers can specify specific changes that should lead to region updates. This allows other controls other than the updatepanel control to cause changes without being directly included in the updatepanel control. It also allows you to use simple declarations to control the behavior of pages and updatepanel controls and to indicate when to retrieve new data.

Multiple updatepanel controls can be placed on one page, and different triggers can be used to update them separately. The content of the updatepanel control can be controlled within the minimum range necessary to respond to specific user input. With the updatepanel control, the existing ASP. NET page does not need to be modified in large quantities, so that users can feel more responsive.

Back to Top

Web Services

Web applications are built around the service-oriented architecture. The core of supporting interactive applications is to support accessing services from a browser. Atlas supports two different types of services. The scriptmanager control uses an automatically generated proxy for Web Service reference:

<Atlas: scriptmanager enablepartialrendering = "true" runat = "server"> <services> <Atlas: servicereference generateproxy = "true" Path = "~ /Nominees. aspx "type =" Custom "</services> </Atlas: scriptmanager>
 

Then, the client component can directly call the Web service from the script. Web services are bound to controls to support richer behavior. For example, you can define autocompletebehavior in an XML script as a possibility to search using web services (see figure 9 ).

The behavior is appended to an element on the page and its behavior is enhanced. This action is called an Extender after it is created in the. aspx flag ". Autocompletebehavior can be associated with an element by using the autocompleteextender control. The Extender can be associated with controls on the server without Directly Writing XML scripts. Then, the control behavior is extended by displaying an appropriate XML script to obtain the client behavior. When a Web Service is called, the call and returned results are usually transmitted in XML format. Atlas also supports serialization of data from Web Services in JSON format, which eliminates some inherent overhead in XML. JSON data can be deserialized into JavaScript objects in the browser. Atlas supports serialization of more complex types managed by. net in the server into typical JavaScript objects in the browser. This simplifies the task of accessing Web services from a browser.

The idea of using Web Services in browsers extends from custom web services as part of applications to ASP. NET application services. Atlas provides the form authentication service directly from javascript:

SYS. Services. authenticationservice. login (username, password, completionfunction );
 

The user does not need to redirect to the logon page and then return to the original page. Therefore, the user can dynamically modify the HTML when providing logon creden .. The available configuration file data on the ASPX page can also be obtained through web service calls. It supports storing and retrieving configuration file data stored on the server through javascript objects.

The Web service that an application may use is always on the same host server. In fact, they do not even have to be in the same domain. The browser will prevent the use of XMLHttpRequest to call other domains outside the domain where the page is located. There are some clever ways to bypass this restriction, that is, to use a hidden IFRAME object to initiate a request, but it is still troublesome. Atlas provides the Web Service bridging function to support this application scenario. The client can start a web service call, and the target is in another domain. The call is sent to the source Atlas application, which then requests the target server as the proxy user, serializes the result, and returns it to the client. Atlas can also use IFRAME technology to communicate directly with other domains.

Back to Top

Summary

Atlas provides a set of functions for creating richer web applications. The client script library simplifies JavaScript writing tasks and provides the ability to construct code to write JavaScript using an object-oriented method. With Web service features, you can easily access remote and local services. Serialization of complex types makes it easy to use a variety of types from the client and server. The server control uses the client script library and allows existing and new applications to greatly reduce the occurrence of busy pauses for common services in current web applications.

Now, a new CTP version is released every one month, including repair, change, and new features. Atlas will eventually integrate these into the next version of the. NET Framework (supported during design) in Visual Studio ). Microsoft has recently announced a limited license to allow users to deploy atlas on their actual site and start using Atlas in Web applications. For more information and download the latest Atlas CTP, visit atlas.asp.net.

Matt James is Microsoft's ASP. NET team development manager. Several books on ASP, mobile controls, and ASP. NET. His contact information is mattgi@microsoft.com.

This article is taken from msdn magazine, which was released in July 2006.

2006 Microsoft Corporation is copyrighted. All rights reserved. Usage rules.