The new AJAX 4 Version offers a new client side template engine. With this new engine it is possible to define data templates within HTML. The template engine offers three different ways to bind data. A good whitepaper and overview about all the new functionalities is available here.
I implemented a small example to demonstrate different technologies and the cooperation between the different tools. My example is using:
- Entity Framework / Entity Data Model
- ADO.NET Data Service
- AJAX 4 Preview
- JQuery + JQuery UI
I used the Northwind database and the employee data for my example.
To see how the application is working, click here
The below pictures explain the different parts and technologies.
GUI overview:
Application Architecture overview:
The example application contains a list of employee data. I used the client side data template from the AJAX 4 Preview Version to render the data table:
<table class="sys-template" border="0" width="100%" id="dataview" sys:attach="dv" dv:sys-key="master" dv:selecteditemclass="itemSelected" dv:oncommand="dataview_oncommand(sender,args)">
<tr class="sys-item-template" sys:command="Select">
<td sys:command="Select">{{ FirstName }}</td>
<td>{{ LastName }}</td>
<td>{{ Address }}</td>
<td>{{ City }}</td>
<td>{{ Region }}</td>
</tr>
</table>
The complete example application is using pure JavaScript, there is no need to have either a *.aspx or codebehind *.aspx.cs file.