快捷導(dǎo)航

ASP.NET AJAX 4.0的模版編程(Template Programming)介紹

更新時(shí)間：2009年07月01日 01:57:02 作者：

不過當(dāng)我評估ASP.NET AJAX 4.0的時(shí)候,我確實(shí)被它的特征給震住了。新的特征完全專注于瀏覽器技術(shù),比如XHTML和javascript。我非常欽佩ASP.NET AJAX小組。

ASP.NET AJAX 4.0 模版的使用

1. Introduction:

當(dāng)Microsoft發(fā)布了它的ASP.NET 3.0時(shí)也同時(shí)發(fā)布了它的AJAX平臺也就是ASP.NET AJAX。不過說實(shí)話,當(dāng)時(shí)相比其它的AJAX平臺,它沒有什么很突出的功能。不過當(dāng)我評估ASP.NET AJAX 4.0的時(shí)候,我確實(shí)被它的特征給震住了。新的特征完全專注于瀏覽器技術(shù),比如XHTML和javascript。我非常欽佩ASP.NET AJAX小組。試試看看AJAX4.0的新特征：

Template based client side programming
DataView and DataContext
Live Data Binding

2. Template Programming

模版形式提供了一個(gè)可以設(shè)計(jì)Web UI樣式的模式并且能夠給運(yùn)行時(shí)的數(shù)據(jù)添加位置標(biāo)記。下面這個(gè)例子中,我設(shè)計(jì)了一個(gè)web頁面來顯示AdventureWorks數(shù)據(jù)庫的產(chǎn)品數(shù)據(jù)通過ADO.NET data service. 整個(gè)模式如下:

Service的代碼：

復(fù)制代碼代碼如下:

public class AWProductDataService : DataService 
{ 
public static void InitializeService(IDataServiceConfiguration config) 
{ 
config.SetEntitySetAccessRule("*", EntitySetRights.All); 
} 
}

使用ASP.NET的模版的aspx頁面如下：

復(fù)制代碼代碼如下:

<%@ 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(); 

// --></script> 
</head> 
<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> 
</html>

我使用了傳統(tǒng)HTML table來顯示數(shù)據(jù)。你能夠看到新的屬性在<TBODY>節(jié)點(diǎn)中,還有存放數(shù)據(jù)的節(jié)點(diǎn)<TD>。ASP.NET AJAX 4.0有一個(gè)很好的模版驅(qū)動來解析這些新的屬性。而這些新的屬性在X(HT)ML和Javascript中都是沒有的。這里的一個(gè)亮點(diǎn)是這些全都是XHTML能夠解析的,所以它們不是常規(guī)的HTML元素的自定義屬性。<TBODY>的類屬性設(shè)置為sys-template,是一個(gè)約定用來隱藏從用戶那邊得到的初始化模版。 .sys-template {display:none} 字段或者是屬性能夠通過{}符號來表達(dá)以便顯示在數(shù)據(jù)展示區(qū)。

3. DataContext:

模版需要數(shù)據(jù)來填充它的數(shù)據(jù)展示區(qū)作為上下文。而上下文的數(shù)據(jù)可以綁定任何的Javascript數(shù)組或是可以作為模版的對象。上下文數(shù)據(jù)最強(qiáng)大的地方是它能夠通過web Services和JSON/ATOM交互。ASP.NET AJAX提供兩個(gè)數(shù)據(jù)上下文放在MicrosfotAjaxAdoNet.js中:

Sys.Data.DataContext
Sys.Data.AdoNetDataContext
上下文數(shù)據(jù)能夠自動跟蹤所有的數(shù)據(jù)變化通過new Sys.Observer對象。AdoNetDataContext支持ADO.NET數(shù)據(jù)服務(wù)很多額外的特性,比如認(rèn)證管理,鏈接和實(shí)體間的協(xié)作。下面這個(gè)例子描述了如何用AdoNetDataContext同AdventureWorks的產(chǎn)品的ADO.Net數(shù)據(jù)服務(wù)的交互。

復(fù)制代碼代碼如下:

var dataContext = new Sys.Data.AdoNetDataContext(); dataContext.set_serviceUri("AWProductDataService.svc"); dataContext.initialize(); 

這里的set_serviceUri()方法能夠用來和WCF AJAX或者是ADO.NET 數(shù)據(jù)服務(wù)交互。Initialize()方法用來提供初始化。

4. Data View

這里有個(gè)基本組件用來為模版展示數(shù)據(jù),它定義在System.UI.DataView中。它十分類似于服務(wù)器端的支持綁定任何Javascript對象或數(shù)據(jù)或是ASP.NET AJAX組件的數(shù)據(jù)源組件。它有連個(gè)屬性來進(jìn)行數(shù)據(jù)綁定:

data - To bind a JavaScript array or object
dataprovider - To bind to a WCF service
如果你需要運(yùn)行這個(gè)程序,你需要添加下面幾個(gè)客戶端的AJAX庫。

MicrosoftAjax.js
MicrosoftAjaxTemplates
MicrosoftAjaxAdoNet
下面這個(gè)圖展示了總體的一個(gè)使用模版編程的概念模型: