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