使用ASP.NET Ajax库的母版-详细信息视图

使用ASP.NET Ajax库的母版-详细信息视图2010-12-08 MSDN Dino Esposito提到数据驱动的网页时，您往往会想到具有一些交叉相关数据的母版-详细信息视图。母版-详细信息视图非常适合呈现一对多的关系，此类关系在实际中相当普遍，但 Web 平台不适合这种功能，因为它不具有实现该功能的有效工具集。

ASP.NET Web 窗体始终提供强大的数据绑定支持和一组功能强大的数据源和数据绑定控件。在 Web 窗体中，服务器控件几乎可以使用网格、列表和下拉框的任意可能组合并支持多个级别的嵌套，从而能够出色地呈现数据的层次结构。

Web 窗体服务器控件生成的视图的缺陷并不在于呈现效果，而是静态这种情况。

用户在浏览母版-详细信息视图时，通常会在母版记录间切换并深入了解感兴趣的记录的详细信息。这种交互功能是母版-详细信息视图的精华所在。

在典型的 Web 窗体方案中，每个钻取操作都可能触发回发。现在，许多回发和后续页面重新加载操作令用户不满。

虽然存在替代方案，但也存在瑕疵。这种替代方案主要包括预加载用户可能希望查看的任何可能数据。随后，可以在标准页面中下载这些数据，并使用 CSS 样式对它们进行隐藏。同时，重新编写用户操作的任何处理程序，以公开隐藏的内容，而不是触发回发。您可以了解，这并非易事。

ASP.NET Ajax 库与 jQuery 协作提供了一个功能更为强大的工具集，能够编写可异步回发且仅在万不得已时才执行回发的流畅有效的母版-详细信息视图。

DataView 控件的隐藏功能

DataView 客户端控件是在 ASP.NET Ajax 库中构建母版-详细信息视图的基本工具。通过与 ASP.NET Ajax 库的 sys-attach 功能及实时绑定结合使用，就功能和布局而言，该控件提供了前所未有的灵活性。特别是，DataView 控件可用于生成母版和详细信息视图。

要使用 ASP.NET Ajax 库布置母版-详细信息视图，您需要执行三个基本步骤。首先，为母版和详细信息视图创建标记。其次，将 DataView 控件的实例作为行为附加到每个视图。最后，使用实时绑定（或仅使用普通的数据绑定表达式）向详细信息视图的可视布局部分填充新数据。请注意，可以采用代码声明和代码命令方式完成所有模板、绑定和组件的创建。让我们来举一个简单的示例，来帮助您熟悉可用的方法和工具。

构建简单的母版-详细信息视图

以下是母版-详细信息视图的简单布局。它主要由两个 DIV 标记构成。母版 DIV 包含无序的项目列表，而详细信息 DIV 包含子表：

<div id="masterView">
  <ul class="sys-template">
  ...
  </ul>
</div>
<div id="detailView">
  <table>
   <tr>
    <td> ... </td>
    <td> ... </td>
   </tr>
   ...
  </table>
</div>