Use of ASP. NET Ajax 4.0 templates
1. Introduction:
When Microsoft released its ASP. NET 3.0, it also released its Ajax platform, ASP. NET Ajax. But to be honest, compared with other Ajax platforms, it had no outstanding features. However, when I evaluated ASP. NET Ajax 4.0, I was shocked by its features. New features fully focus on browser technologies, such as XHTML and JavaScript. I really admire the ASP. NET Ajax team. 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 allows you to design Web UI styles and can add location tags to runtime data. In the following example, I designed a web page to display the product data of the adventureworks database through ADO. NET data service. The entire mode is as follows:
Service Code:
CopyCode The Code is as follows: public class awproductdataservice: dataservice
{
Public static void initializeservice (idataserviceconfiguration config)
{
Config. setentitysetaccessrule ("*", entitysetrights. All );
}
}
The ASPX page of the ASP. NET template is as follows:Copy codeThe Code is 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>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<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 ();
// -->
SYS: activate = "*">
name |
list price |
size |
weight |
dataview: dataprovider = "{datacontext }}" dataview: fetchoperation = "Products">
{binding name} |
{binding listprice} |
{binding size} |
{binding weight} |
I use a traditional HTML table to display data. You can see that the new attributes are in the <tbody> node, and the node that stores data <TD>. ASP. NET Ajax 4.0 has a good template driver to parse these new attributes. These new attributes are none in X (HT) ml or JavaScript. One of the highlights here is that all these are parsed by XHTML, so they are not the custom attributes of common HTML elements. The <tbody> class attribute is set to sys-template, which is a convention used to hide the initialization template obtained from the user. The. sys-template {display: None} field or attribute can be expressed by the {} symbol for display in the data display area.
3. datacontext:
The template needs data to fill its data display area as the context. Context data can be bound to any Javascript array or an object that can be used as a template. The most powerful aspect of Context data is its ability to interact with JSON/atom through Web Services. ASP. NET Ajax provides two data contexts in microsfotajaxadonet. JS:
SYS. Data. datacontext
SYS. Data. adonetdatacontext
Context data can automatically track all data changes through the new SYS. Observer object. Adonetdatacontext supports many additional features of the ADO. NET data service, such as authentication management, collaboration between links and entities. The following example describes how to use adonetdatacontext to interact with the ADO. NET data service of adventureworks.Copy codeThe Code is as follows: var datacontext = new SYS. Data. adonetdatacontext (); datacontext. set_serviceuri ("awproductdataservice. SVC"); datacontext. initialize ();
The set_serviceuri () method can be used to interact with the WCF Ajax or ADO. NET data service. The initialize () method is used to provide initialization.
4. Data View
Here is a basic component used to display data for the template, which is defined in system. UI. dataview. It is similar to a data source component that supports binding any JavaScript Object or data or ASP. NET Ajax components on the server side. It has a connection property for Data Binding:
Data-to bind a JavaScript array or object
Dataprovider-to bind to a WCF Service
If you need to run thisProgramYou need to add the Ajax libraries of the following clients.
Microsoftajax. js
Microsoftajaxtemplates
Microsoftajaxadonet
The following figure shows a general conceptual model using template programming:
The data is shown as follows: