65.9K
CodeProject 正在变化。 阅读更多。
Home

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

M Sheik Uduman Ali
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (3投票s)

2009 年 7 月 2 日

CC (ASA 2.5)

3分钟阅读

viewsIcon

26813

本文描述了 ASP.NET AJAX 4.0 客户端模板编程中的实时数据绑定。

本文的源代码可从 http://udooz.net/index.php?option=com_docman&task=doc_download&gid=2&Itemid=5 下载。

本文是 ASP.NET AJAX 4.0 模板编程第一部分 的续篇。在本文中，我将解释 ASP.NET AJAX 4.0 模板中不同的数据绑定选项。简单回顾一下，我使用了 ADO.NET 数据服务来获取 AdventureWorks 的 Product 表记录。在本文中，我将解释如何从客户端更新/添加新记录。

绑定

模板支持以下绑定方式

  • 一次性 - 表达式仅在模板渲染时计算一次。
  • 单向实时绑定 - 如果数据源中的项发生更改，则计算表达式并更新值。
  • 双向实时绑定 - 如果数据源值发生更改，则更新表达式中的值。如果表达式中的值发生更改，它也会更新数据源。

下图描绘了绑定过程。

asp_live_binding_1.png

在上图中，红色虚线箭头表示一次性数据绑定。一旦 DataView 通过 AdoNetDataContext 获取了数据源中的数据。单向实时绑定显示为紫色阴影箭头。此阴影的目的是，无论何时数据源中的数据更新，都会通过 AdoNetDataContext 更新到 DataView。双向实时绑定显示为绿色阴影双向箭头。在这种情况下，数据上下文应了解数据源上的更新操作，并提供一个接口供 DataView 发送修改后的值。

通过这三种绑定方式，ASP.NET AJAX 提供了以下表达式约定：

  • {{ }} - 一次性（可用于任何 HTML 控件，例如 <p>{{ Name }}</p>）
  • { 绑定} - 单向，如果不是用户输入的 HTML 控件，例如 <td>{ binding Name } </td>
  • {binding} - 双向，如果是 INPUT HTML 控件，例如 <input type="text" sys:value="{{ binding Name }}" />
在这里，输入控件使用 sys:value 属性来绑定双向绑定中的值。在深入研究可更新的数据源之前，让我们先看看如何设计主从布局来显示产品名称和产品详细信息。

主从布局

<body xmlns:sys="javascript:Sys" 
xmlns:dataview="javascript:Sys.UI.DataView" 
sys:activate="*">
  <form id="form1" runat="server">
  <div>
      <!--Master View-->
      <ul sys:attach="dataview" class=" sys-template"
          dataview:autofetch="true"
          dataview:dataprovider="{{ dataContext }}"
          dataview:fetchoperation="Products"
          dataview:selecteditemclass="myselected"             
          dataview:fetchparameters="{{ {$top:'5'} }}"
          dataview:sys-key="master"             
      >
          <li sys:command="Select">{binding Name }</li>
      </ul>

      <!--Detail View-->
      <div class="sys-template" 
          sys:attach="dataview"
          dataview:autofetch="true"
          dataview:data="{binding selectedData, source={{master}} }">
          <fieldset>
            <legend>{binding Name}</legend>
            <label for="detailsListPrice">List Price:</label>
            <input type="text" id="detailsListPrice" 
                sys:value="{binding ListPrice}" />
            <br />
            <label for="detailsWeight">Weight:</label>
            <input type="text" id="detailsWeight" sys:value="{binding Weight}" />
            <br />              
          </fieldset>
          <button onclick="dataContext.saveChanges()">Save Changes</button>
      </div>
  </div>
  </form>
</body>

可选择且可编辑

无序列表显示了主从详情，此处为产品名称（第 15 行）。此行还表明列表项是可选择的，使用 sys:command="Select"。为了维护主从关系或可选择项，需要指定主键。DataView 的 sys-key 属性引用了主键。在此示例中，我将主键称为“master”（第 13 行）。此外，您还可以看到我使用 DataView 的 fetchparameter 属性传递了一个过滤器选项（第 12 行）。在此示例中，我使用其过滤器语法要求 ADO.NET 数据服务仅提供前五条记录。

当主列表中选择了一个项目时，详细信息视图需要被通知。详细信息视图的组件和绑定详细信息应使用常规的 sys:attach="dataview" 和 DataView 的 data 属性进行标识。在此示例中，dataview:data="{binding selectedData, source={{master}} }" 指定了与 sys-key 名称为“master”的 DataView 进行绑定。fieldset 用于显示产品的一组值。在此，可以编辑列表价格和重量。

一旦某个项目被编辑，就需要通过数据上下文通知数据源。标题为“保存更改”的按钮指定了每当单击此按钮时，都通过数据上下文的 saveChanges() 方法将详细信息视图中的项目保存到数据源。相应的数据源的更新选项应在数据上下文的 set_saveOperation() 上设置。以下 JavaScript 代码对此进行了说明。

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

ADO.NET Product 数据服务的 Products(id) 方法用于 set_saveOperation。当使用产品主键作为参数调用 ADO.NET 数据服务的 Product 服务时，可以更新一个项目。此处，我再次将主布局的“master” sys-key 引用为 Product 的主键。

上述代码的输出是

asp_live_binding_2.png

上面一个是主视图，其中 Sport-100 Helmet, Red 被选中，下面的页面显示了详细信息。您可以编辑和更新数据源。

DataView 的 selecteditemclass 属性用于以不同的样式显示选定的项目。

.myselected  {
        color: white;
        font-weight: bold;
        background-color: Silver;
      }
© . All rights reserved.