ASP.NET AJAX on Microsoft CDN

The article describes in detail the Microsoft ASP.NET AJAX client library which went on Micrsoft’s CDN recently. An example for creating a web page displaying data using the CDN files as well as using jQuery library from another source to embellish the page with custom styling is also described.

Microsoft ASP.NET launched a new Microsoft AJAX CDN service that provides caching support for AJAX libraries (ASP.NET AJAX and jQuery) recently. The main advantage of a CDN is to deliver content from a location nearest to the user. Content like script files are supposed to be nearly static and hence there is a performance advantage to be gained by placing them on CDN. CDNs have been around for quite while, such as Google, Yahoo and AOL.

ASP.NET AJAX files on the CDN

The ASP.NET AJAX site lists the following script files on the CDN in addition to jQuery library files :

<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>

For further details and the hosting of jQuery files please visit the ASP.AJAX site

However, ASP.NET AJAX Preview 5.0 I downloaded, lists many others :


Microsoft AJAX Client Library


The root namespace for the Microsoft Ajax Client Library which contains the CDN files is Sys. With Sys as the root these other name spaces take care of, Data, Net, Serialization, Services, UI and WebForms. These are in addition to the Global Namespace attending to the Javascript core, such as extensions to Arrays, strings, objects etc. The reader may get further background information on this by reviewing Microsoft_Ajax_Library_Client_Reference.chm in the Preview 5.0 mentioned earlier.

Overview of this tutorial


The article describes with an example how you may display data from a JSON array using the CDN files. The CDN part of this example does not really differ from other similar examples using other CDNs. It may be of interest to review this article where the script files on the AOL CDN were referenced and the CSS and theme files were imported from the local intranet (they could have been linked as well).

JSON Objects and JSON Arrays


As the example use JSON arrays it may be helpful to review JSON objects and JSON arrays. A JSON object is an unordered set (members) of key/value pairs, with keys being separated by values using a colon (:) and the members being separated by a comma (,). The colon and the comma are respectively called the name separator and the value separator. Unlike JSON objects, JSON arrays are enclosed between square braces [ ]. The JSON array is an ordered sequence of values separated by a comma (,). The values can be any of the primitive types as well as the two structures, JSON objects and JSON arrays. The syntax is unforgiving and requires strict attention to the use of proper case and proper separators.

Displaying JSON array using DataView using the CDN files


Using a DATAVIEW you can render a UI bound to data using a template for an object or for an array. These data may originate in the project or they may be retrieved from a JSON web service. Here the JSON web service is not considered. Some of the methods used from the Sys namespace are shown here. These methods are used in displaying the results. You may use this link [http://www.jsonlint.com/] to validate your JSON array or object.

$create() method:
class : Sys.component.
Syntax: $create(type, properties, events, references, element);
Except for type all other arguments are optional; arguments are JSON objects (except for element) and if an argument is not given NULL, should be used in its place.

$find() method:
Syntax:var o = $find(id, parent);
class: Sys.Application

$get() method:
class: Sys.UI.DOMELement
Syntax: $get(id, element);

The type argument of the $create() method in the example is Sys.UI.DataView which uses a template to render a view of the data. The data can be set directly through one of the properties in the $create() method or obtained by fetching the data from a service.

Data used in this article


The data using in the example was used in the articles Dojo AJAX with JSON and JSON Basics. These articles may further asssit the reader in understanding this article if he or she is not conversant with JSON. Listing 1 shows the JSON object representing a group of students who took a web development class.

LISTING 1: JSON OBJECT

{"wclass": [
{ "student":
{ "name": "Linda Jones", "legacySkill": "Access, VB 5.0" }
},
{ "student":
{ "name": "Adam Davidson", "legacySkill": "Cobol, MainFrame" }
},
{ "student":
{ "name": "Charles Boyer", "legacySkill": "HTML, XML" }
}
]}


The JSON object in the above listing is shown as a JSON array in Listing 2. Each array element is a JSON Object.

LISTING 2: JSON Array displayed with the CDN files

[
{ "student":
{ "name": "Linda Jones", "legacySkill": "Access, VB 5.0" }
},
{ "student":
{ "name": "Adam Davidson", "legacySkill": "Cobol, MainFrame" }
},
{ "student":
{ "name": "Charles Boyer", "legacySkill": "HTML, XML" }
}
]


Displaying student array bound to Dataview template


The next listing shows a client web page displaying data bound to a dataview template object. The $create() method is called during page loading.

LISTING 3:

<!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> <title>Microsoft AJAX from CDN</title>
<style type="text/css"> .sys-template { display:none; } </style>
<!--source reference on the CDN-->
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js">
</script>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.debug.js">
</script>
<!-- -->


<script type="text/javascript">

function pageLoad() {
var webclass = [
{ "student":
{ "id":"1","name": "Linda Jones", "legacySkill": "Access, VB 5.0"}
},
{ "student":
{ "id": "2", "name": "Adam Davidson", "legacySkill": "Cobol, MainFrame" }
},
{ "student":
{ "id": "3", "name": "Charles Boyer", "legacySkill": "HTML, XML" }
}
];

$create(Sys.UI.DataView, { data: webclass }, null, null, $get('SList'));

}
</script>
</head>
<body xmlns:dataview="javascript:Sys.UI.DataView"
xmlns:sys="javascript:Sys">
<h1>Web Students</h1>

<table id="SList" class="sys-template"
border="1" style="background-color:Lime" >
<tr><td>{{student.id }}</td>
<td>{{student.name}}
</td><td>{{student.legacySkill}}</td></tr>
</table>

</body> </html>

Although this page was created using VS 2008 you could also do it with a text editor. With Visual Studio you get javascript support for intellisense which is a big win.

The two files from the CDN are shown at the very beginning in blue between <head/> which should be used exactly as shown. In the PageLoad() event you will be assigning the data to a variable[webclass] which is used as one of the arguments (data) of the create$() method. The $get() method takes this data to the component in the DOM given by its 'id' property, namely the table. The parsed array elements are now placed in the table cells within {{}} braces.
When you browse to this page in IE 8, the web page gets displayed as shown here.



The web page rendered uniformly across all the browsers on which it was tested [IE8.0, Firefox 3.0, Safari 3.2, Google Chrome 3.0 and Opera 9.1].

Bringing other CDN files into the page


You may reference another CDN to embellish your page or add another feature. For example, you can add custom style to the page using the jQuery library. There are several sources and several versions of jQuery including one on the Microsoft CDN. Although jQuery is also cross-browser, IE8 renders it differently than others.

Consider the next listing which adds some custom styling to one of the table cells using the jQuery selector. In this listing only the added elements are shown.

LISTING 4: Styling with jQuery

1. Add the following between <head/> of Listing 4

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myCell").css("border", "1px solid red");
});
</script>

2. Modify the cell property of the table in Listing 4 as:

<table id="SList" class="sys-template"
border="1" style="background-color:Lime" >
<tr><td>{{student.id }}</td>
<td id="myCell" >{{student.name}}
</td><td>{{student.legacySkill}}</td></tr>
</table>

The cell (with student name) will have the CSS style selected in the script. This is a basic script (case sensitive) used to apply CSS style to an 'id' in the page. Only in IE 8.0, the web page with the above modification gets rendered as shown.



In all other browsers tested the page gets rendered as shown in the following (one shown is in Opera browser) figure.



Summary

The article describes in detail creating a web page with the Microsoft ASP.NET AJAX client library which went on Microsoft’s CDN recently. Using jQuery library from another source the web page was embellished with custom styling.

By Jayaram Krishnaswamy   Popularity  (4070 Views)