New Features in ASP.NET AJAX 4

Note The documentation in this section concerns ASP.NET 4 AJAX Preview 4. A more recent preview release might be available at the URL above. If so, it will include updated documentation.

The new functionality in ASP.NET AJAX enables new client data scenarios for page and component developers that enable JSON data from the server to be rendered as HTML in a highly manageable and efficient way. To enable these scenarios, ASP.NET AJAX includes the following major features:

· Client-side template rendering.

· Declarative instantiation of client-side behaviors and controls.

· Live data binding.

· Use of the observer pattern with JavaScript types.

· An AdoNetServiceProxy class for client-side interaction with ADO.NET Data Services.

· A client-side DataView control for data-bound UI in the browser.

· DataContext and AdoNetDataContext classes for interaction with Web services.

· Refactored ASP.NET AJAX framework libraries.

· Support for the DOM Ready event.

· Using JSONP to retrieve cross-domain data.

Client Template Rendering

In client-based development, templates are the most manageable way of creating UI from data. ASP.NET AJAX 4 includes a new template engine for client development that meets the following requirements:

· Performance — The engine must be able to render a typical number of items using a reasonably complex template before users perceive an interruption in their interaction with the application.

· Simplicity — The template syntax must be very readable and must be optimized for the most common scenario, namely one-way/one-time binding.

· Expression language — Templates must support an expression language to go beyond the simplest cases. The expression language should use familiar syntax, ideally JavaScript syntax.

· Interspersed code and markup — It must be possible to perform conditional rendering or to loop over markup by using code that surrounds HTML.

· Components — When using the template syntax, the developer must be able to instantiate client-side controls and behaviors that attach to HTML elements in the page or within templates.

Template Example

The following example shows a typical client template that you can create using ASP.NET AJAX 4.

<ul id="myTemplate" class="sys-template"

sys:attach="dataview"

<li>

<div>{{ Description }}</div>

</li>

</ul>

The class attribute of the outer div element is set to sys-template, which is a convention that is used in order to hide the initial template from the user. You should define this class in your CSS style sheet as {display:none;}.

When the template is rendered, it has a data item as context. Fields or properties of that data item can be included in the template markup by using {{ }} expressions — for example, {{ Name }}, if the data item has a Name field. These expressions can be placed anywhere in text content, or you can use them as the value of an attribute. In addition to fields or properties, the expression blocks can also contain any JavaScript expression that can be evaluated as a string.

You can set up DOM events by using the $addHandler method. The DOM on* attributes of elements (for example, onclick=method) also work from within templates.

Instantiating a Template by Using the DataView Control

The most convenient way to use client templates in ASP.NET AJAX 4 is through the DataView control. The content of a DataView control is used as a template that renders the data item that is provided to the control. If you set the DataView control's data property to an array, the template is rendered once for each item in the array. The DataView control binds to live data, meaning that the control is automatically updated when the data changes, without the need to rebind. This provides a dynamic data-driven UI in the browser. The following example shows the declarative markup for a DataView control that binds to an array named imagesArray.

<body xmlns:sys="javascript:Sys"

xmlns:dataview="javascript:Sys.UI.DataView"

sys:activate="*">

<ul sys:attach="dataview" class="sys-template"

dataview:data="{{ imagesArray }}"

<li>

<div>{{ Description }}</div>

</li>

</ul>

</body>

Instantiating a Template by Using Code

You can also create a compiled template from code by using the Sys.UI.Template class, as shown in the following example:

var t = new Sys.UI.Template($get("myTemplate"));

The constructor takes the parent element of the template as its argument. You can then render a compiled template into the DOM by calling its instantiateIn method and specifying an HTML container element and a data item as context. The following example shows how to do this.

t.instantiateIn(

$get("targetContainer"),

{

Name: "Name",

Description: "Description"

}

);

Using Pseudo-Columns in a Template

In addition to providing access to fields and properties of the data item, the template rendering engine also provides access to pre-defined "pseudo-columns" such as $index and $dataItem. These pseudo-columns give you access to values from the rendering engine at render time. You can use pseudo-columns the way you use any JavaScript variable in the template instance. The first example applies a different CSS class to the div element for alternating items that are rendered by the dataView control. The second examples passes the pseudo-column $dataItem, which represents the data for the current row, to a custom function named nameConvert for processing.

<span>{{nameConvert($dataItem)}}</span>

Incorporating Code into a Template by Using the code:if, code:before, and code:after Attributes

You can add the new code:if, code:before, and code:after declarative attributes to any DOM element within a template in order to render the element conditionally (code:if) or to render arbitrary code before (code:before) or after (code:after) the element. The following example shows how to use the code:If attribute to render an hr element as a separator between items. The code:if attribute uses the value of the $index pseudo-column to ensure that the hr element is rendered only between items, and not before the first one or after the last one.

<li>

<div>{{ Description }}</div>

</li>

</ul>

Posted in: asp.net | Tags: asp.net asp.net 4.0 performance feature asp.net ajax ajax dataview adonetdatacontext datacontext rendering simplicity template example

New Features in ASP.NET AJAX 4, Part 3

The DataView Control

The DataView control can bind to any JavaScript object or array, or to any ASP.NET AJAX component.

Providing Data to the DataView Control

Data can be provided to the DataView control in a number of ways. One way is by setting the data property of the DataView control. The following example shows how to set the DataView control’s data property through declarative binding:

<ul sys:attach="dataview" class="sys-template"

dataview:data="{{ imagesArray }}"

<li>

<div>{{ Description }}</div>

</li>

</ul>

The following example shows how to set the DataView control’s data property through code:

function pageLoad() {

imagesService.GetImages(querySucceeded);

}

function querySucceeded(result) {

$find("imagesList").set_data(result);

}

</script>

<li>

<div>{{ Description }}</div>

</li>

</ul>

Another way to provide data is to specify a WCF or ASP.NET Web service directly in the dataProvider property of the DataView control, as shown in the following example:

<ul sys:attach="dataview" class="sys-template"

dataview:dataprovider="../Services/imagesService.svc"

dataview:fetchOperation="GetImages"

<li>

<div>{{ Description }}</div>

</li>

</ul>

When the DataView control’s dataProvider property is set, the DataView control will use the provider (in this case, the Web service) to fetch data by using the operation specified in the fetchOperation property. For other examples in which the dataProvider property is set to an instance of the DataContext class (used for read-write scenarios) see The DataContext and AdoNetDataContext Classes later in this document.

Additional Features of the DataView Control

The DataView control provides a number of features that are not shown in the previous examples, such as support for layout templates and external templates, built-in selection support for use in master-detail scenarios, command bubbling, and so on. The following example illustrates how to use some of these features to configure linked master-detail views, using two DataView controls that are linked through live binding.

<ul sys:attach="dataview" class=" sys-template"

dataview:dataprovider="../Services/ImageService.svc"

dataview:fetchOperation="GetImages"

dataview:selecteditemclass="myselected"

dataview:sys-key="master"

</ul>

<div class="sys-template"

sys:attach="dataview"

dataview:data="{binding selectedData, source={{master}} }"

<div>Description: <input type="text" value="{binding Description}"/></div>

</div>

The Select command in the master view template ensures that when the user clicks one of the items rendered by the master view, that item becomes the selected item. As a result, the CSS class specified in the selectedItemClass property of the master DataView control is applied to the markup for that item. In addition, the corresponding data item becomes the value that is returned by the selectedData property of the master DataView control.

The detail DataView control uses live binding so that its data item is dynamically set to the current selectedData value of the master DataView control. In the example, the detail view provides an edit template with two-way binding that lets users modify the fields of the data item.

Posted in: asp.net | Tags: asp.net asp.net 4.0 asp.net ajax ajax dataview providing data

ASP.NET AJAX 4.0 Preview 5

ASP.NET AJAX is a pure client-side JavaScript library that enables you to build Ajax applications that work with all modern web browsers. By taking advantage of ASP.NET AJAX client controls and templates, you can build database-driven web applications that execute entirely in the browser.
ASP.NET AJAX supports the following features:

Client templates that can be used to format database data in the browser
Client controls such as the DataView control
Client DataContext component that supports change tracking and identity management
ADO.NET Data Services support
WCF and ASMX Web service support
JSONP support
Observable pattern for plain JavaScript objects
Live Bindings
Command Bubbling
Support for managing complex links and associations between entities from multiple entity sets or tables

In Preview 5 of ASP.NET AJAX 4.0 we continue to improve the client-side data story introduced in previous previews of ASP.NET AJAX. In this release, we add support for the following features: