The use of ASP.net AJAX 4.0 templates
1. Introduction:
When Microsoft released its ASP.net 3.0, it also released its Ajax platform, which is ASP.net ajax. But to be honest, it didn't have any outstanding features compared to other AJAX platforms. But when I evaluated ASP.net AJAX 4.0, I was really shocked by its characteristics. The new features are completely focused on browser technologies, such as XHTML and JavaScript. I admire the ASP.net Ajax team very much. Try to see the new features of AJAX4.0:
Template based client side programming
DataView and DataContext
Live Data Binding
2. Template Programming
The template form provides a pattern that can design a Web UI style and can add a location tag to the data at run time. In the following example, I designed a Web page to display the product data of the AdventureWorks database through the Ado.net data service. The whole pattern is as follows:
Service's Code:
Copy Code code as follows:
public class Awproductdataservice:dataservice
{
public static void InitializeService (Idataserviceconfiguration config)
{
Config. Setentitysetaccessrule ("*", entitysetrights.all);
}
}
The ASPX pages that use the ASP.net template are as follows:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true"
Codebehind= "ClientTemplateAndDataViewDemo.aspx.cs"
inherits= "CoreEnhancements.AJAX.ClientTemplateAndDataViewDemo"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title>microsoft Tech.ed-client-side Templating Demo</title>
<style type= "Text/css" ><!--
. sys-template {Display:none}
--></style><style type= "Text/css" bogus= "1" > sys-template {display:none}
</style>
<script type= "Text/javascript" src= ". /scripts/microsoftajax.debug.js "src=" Scripts/microsoftajax.debug.js "></script>
<script type= "Text/javascript" src= ". /scripts/microsoftajaxtemplates.debug.js "src=" Scripts/microsoftajaxtemplates.debug.js "><!--
--></script>
<script type= "Text/javascript" src= ". /scripts/microsoftajaxadonet.debug.js "src=" Scripts/microsoftajaxadonet.debug.js "><!--
--></script>
<script type= "Text/javascript" ><!--
var dataContext = new Sys.Data.AdoNetDataContext ();
Datacontext.set_serviceuri ("Awproductdataservice.svc");
Datacontext.initialize ();
--></script>
<body xmlns:sys= "Javascript:sys" xmlns:dataview= "Javascript:Sys.UI.DataView"
Sys:activate= "*" >
<form id= "Form1" runat= "Server" >
<div>
<table border= "1" >
<thead>
<tr>
<td>Name</td>
<td>list price</td>
<td>Size</td>
<td>Weight</td>
</tr>
</thead>
<tbody class= "Sys-template" sys:attach= "DataView" Dataview:autofetch= "true"
Dataview:dataprovider= ' {{dataContext}} '
dataview:fetchoperation= "Products" >
<tr>
<td>{binding Name}</td>
<td>{binding listprice}</td>
<td>{binding size}</td>
<td>{binding weight}</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
I used a traditional HTML table to display the data. You can see the new attributes in the <TBODY> node, and the node <TD> that holds the data. asp.net AJAX 4.0 has a good template driver to parse these new properties. These new properties are not in X (HT) ml and JavaScript. One bright spot here is that these are all XHTML capable of parsing, so they are not custom attributes of a regular HTML element. The <TBODY> class property is set to Sys-template, a convention used to hide the initialization template from the user side. sys-template {display:none} field or property can pass {} Symbols to be displayed in the data display area.
3. DataContext:
The stencil requires data to populate its data display area as a context. The data for the context can be bound to any JavaScript array or an object that can be used as a template. The most powerful part of context data is its ability to interact through Web services and Json/atom. asp.net Ajax provides two data contexts to be placed in Microsfotajaxadonet.js:
Sys.Data.DataContext
Sys.Data.AdoNetDataContext
Contextual data can automatically track all data changes through the new Sys.Observer object. Adonetdatacontext supports many additional features of ado.net data services, such as authentication management, links, and collaboration between entities. The following example describes how to use Adonetdatacontext to interact with the Ado.net data service of a AdventureWorks product.
Copy Code code as follows:
var dataContext = new Sys.Data.AdoNetDataContext (); Datacontext.set_serviceuri ("Awproductdataservice.svc"); Datacontext.initialize ();
The Set_serviceuri () method here can be used to interact with WCF Ajax or ado.net data services. The Initialize () method is used to provide initialization.
4. Data View
Here is a basic component to show the data for the template, which is defined in the System.UI.DataView. It is very similar to the server-side data source component that supports binding any JavaScript objects or data or asp.net ajax components. It has a link property for data binding:
Data-to bind a JavaScript array or object
Dataprovider-to bind to a WCF service
If you need to run this program, you need to add the following several client Ajax libraries.
MicrosoftAjax.js
Microsoftajaxtemplates
Microsoftajaxadonet
The following diagram shows a conceptual model for using template programming in general:
The final display of the data is as follows:
