ASP.NET AJAX 4.0 模板编程 - 第一部分

M Sheik Uduman Ali

4.60/5 (6投票s)

2009 年 6 月 28 日

CPOL

3分钟阅读

48359

806

本文介绍使用 DataView 和 DataContext 进行 ASP.NET AJAX 4.0 模板编程

下载示例 - 200.83 KB

引言

当 Microsoft 发布其名为“ASP.NET AJAX”的 AJAX 框架作为 ASP.NET 3.0 预览版的一部分时，与其他 AJAX 框架相比，它并没有太大的竞争力。但是当我评估 ASP.NET AJAX 4.0 时，我确实受到了完全专注于您的浏览器技术（如 XHTML 和 JavaScript）的新功能的启发。我真的很佩服 ASP.NET AJAX 团队所做的努力。当您看到以下功能时，不会有任何其他意见：

基于模板的客户端编程
DataView 和 DataContext
实时数据绑定

模板编程

模板提供了一种设计 Web UI 表单的模式，并允许放置运行时数据的占位符。例如，我设计了一个网页，通过 ADO.NET 数据服务显示 AdventureWorks 数据库 Product 数据。实体模型 (edmx) 是

服务代码是

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

通过 ASP.NET 模板，页面如下所示：

<%@ 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>     
    <script type="text/javascript" src="../scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="../scripts/MicrosoftAjaxTemplates.debug.js">
    </script>
    <script type="text/javascript" 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>

我使用了典型的 HTML 表来显示数据。您可以在 <TBODY> 中看到一些新属性，并在 <TD> 中看到数据占位符。ASP.NET AJAX 4.0 有一个专用的模板引擎来解析这些新属性和数据占位符。ASP.NET AJAX 定义了一组丰富的属性和数据占位符模式，统称为表达式语言，它们无非是 X(HT)ML 和 JavaScript。这里值得注意的是它的 XHTML 兼容性，因此这些不是常规 HTML 元素中的自定义属性。 <TBODY> 的 class 属性设置为 sys-template，这是一种用于隐藏用户初始模板的约定。 .sys-template {display:none} 需要在数据占位符上呈现的数据项的字段或属性可以通过 {{ }} 或 { } 表示。

数据上下文 (DataContext)

模板需要数据作为其占位符的上下文。数据上下文允许将任何 JavaScript 数组或对象绑定到模板。数据上下文的真正强大之处在于与基于 JSON/ATOM 的 Web 服务交互。ASP.NET AJAX 在 MicrosoftAjaxAdoNet.js 中提供了两个数据上下文：

Sys.Data.DataContext
Sys.Data.AdoNetDataContext

数据上下文使用 new Sys.Observer 对象自动跟踪对数据的所有更改。 AdoNetDataContext 支持 ADO.NET 数据服务的其他功能，例如身份管理、链接以及实体集之间的关联。下面的代码示例描述了如何与 AdventureWorks Product 的 ADO.NET 数据服务交互：

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

set_serviceUri() 方法用于与 WCF AJAX 或 ADO.NET 数据服务交互。 initialize() 方法执行初始化或调用。

数据视图

这是模板显示在 System.UI.DataView 中定义的数据的基本组件。这类似于服务器端数据源组件，支持将任何 JavaScript 对象或数组或任何 ASP.NET AJAX 组件绑定到它。它有两个属性来绑定数据集：

data - 用于绑定 JavaScript 数组或对象
dataprovider - 用于绑定到 WCF 服务

fetchoperation 属性用于设置需要调用哪个方法来获取数据。在代码片段 1 中，我已将代码片段 2 中声明的 dataContext 设置为数据源。要运行此应用程序，请参考以下 ASP.NET AJAX 客户端库：

MicrosoftAjax.js
MicrosoftAjaxTemplates
MicrosoftAjaxAdoNet

xmlns:sys 为整个页面声明命名空间 Sys（代码 1. 第 2 行）。 xmlns:dataview 声明 DataView 控件。数据视图实例已使用 sys:attach 与 <TBODY> 关联。

下图显示了模板编程的概念模型：

代码的输出是：

第 2 部分将解释实时数据绑定以及主/细节显示，以及数据视图和数据上下文中的更多功能。

历史

2009年6月28日：初始发布