ASP.NET 4.0, in combination with the .NET Framework 4.0 and Visual Studio 2010 promises to deliver some excellent features that will help you and add some real flashiness to your web pages. By taking advantage of some of the new features you should be able to make your client side coding easier and more maintainable. This will definitely be an all around better development experience on the client side.
The ASP.NET team wanted to focus on a few goals for AJAX:
- More ‘pure’ model (JSON in/JSON out rather than HTML form data)
- Simplicity
- Performance
- Standards (XHTML, if you choose)
- Familiar to ASP.NET server side developers
- JavaScript as the expression language (no new languages to learn)
This isn’t an exhaustive list of goals for ASP.NET AJAX, however these have caught my eye from the start and you can see some of them expressed in the code samples below.
AJAX Client Templates
AJAX 4.0 uses JavaScript as an expression language companion to HTML to provide two main features for AJAX development: client templates and live bindings. Client templates allow you to retrieve data through client side script and then access that data through a set of binding templates in the form of double curly braces “{{“ and “}}”. No ASP.NET server side pages or code are required, it can all be done using .htm files.
In the example below, the $create method is used to instantiate an AJAX DataView object and initialize it with data from an ADO.NET Data Service along with the <ul> element named productListView.the AJAX DataView component will be attached to the productListView element (productsListView is attached because it is passed in as an initializer).
<script type="text/javascript"> function pageLoad() { $create(Sys.UI.DataView, { dataSource: new Sys.Data.AdoNetDataSource(), serviceUri: "../AdventureWorksAdo.svc", query: "Product?$filter=ProductSubcategory/ProductSubcategoryID eq 1" }, {}, {}, $get("productListView")); } </script>
Once the above code is complete, we can then use the binding notation to reference the data (fields) returned to insert it into HTML or HTML attributes.
<h1>AdventureWorks</h1>
<ul id="productListView" class="float master sys-template"> <li> {{ Name }} {{ parseFloat(ListPrice).localeFormat("C") }} </li> </ul>
The above sample produces this output, which is nothing fancy, just the data bound <li> elements.
This syntax style can be thought of as the client side version of the Eval() method which should be familiar to most ASP.NET developers. The binding {{ <expression> }} syntax is used to bind fields from the AJAX Data View object just as you would in an .aspx page using server side binding notation. You can also add any valid JavaScript into the binding expression such as a parseFloat(), string concatenation, formulas, etc…
AJAX Declarative Controls & Live Bindings
Declarative controls on the client side will prove to be a huge benefit to many AJAX developers. The declarative controls from ASP.NET AJAX behave very similarly to the way that ASP.NET server side controls do, but with a slightly different syntax.
You can accomplish exactly the same thing using either client templates, declarative controls or a mix of the two, and all the code still stays on the client. If you aren’t sure which style to use, it all comes down to developer style/preference. Let’s take a look at the same productListView used in the example above, with code that produces the same results as above, but this time with declarative syntax.
First, we need to setup the XML Namespace and script information in the <body> tag
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
Then the declarative code
<h1>AdventureWorks</h1>
<ul id="productListView" class="float master sys-template" sys:attach="dataview" dataview:sys-key="master" dataview:datasource="{{ new Sys.Data.AdoNetDataSource() }}" dataview:serviceuri="../AdventureWorksAdo.svc" dataview:query="Product?$filter=ProductSubcategory/ProductSubcategoryID eq 1&$expand=ProductProductPhoto&$orderby=Name" dataview:selecteditemclass="myselected"> <li sys:command="select"> <span>{binding Name}</span> <span>{binding ListPrice, convert=formatCurrency}</span> <input type="button" sys:command="select" value="Select"/> </li> </ul>
Notice that the sys:attach=dataview, datasource and serviceurl attributes are defined in the above sample. Those lines instantiate and initialize the data view object just the same as the previous scripted sample did with object initializers in the constructor. The list item code is almost identical with the exception that it uses two way live bindings rather than standard one way bindings. Two way bindings allow you to see your changes automatically reflected in the data that is passed around the page as objects. To use live bindings, you can use the syntax { binding <fieldName> } - the difference is in using one set of brackets and the keyword ‘binding’. Live bindings are especially handy if you want to display master-detail records on the same page and allow changes to propagate between the page elements for both.
Summary
There are some exciting new features available in the AJAX previews and more to come in the final release. To get AJAX for yourself go to CodePlex.com/aspnet for the out of band releases of AJAX, until it is shipped with ASP.NET 4.0.
