然后，在ASP.NET中加入必须的标记，控件以及ItemView的模版。我们需要添加如下五部分的脚本：

    1,Atlas服务器端控件ScriptManager。所有的Atlas页面中都需要包含这个控件以装载Atlas所必须的JavaScript文件。
    2,id为detailsView的<div>，将被Atlas用来输出渲染后的内容。
    3,导航部分，用于在在客户端集合中导航，以显示集合中不同的记录。
    4,命令部分，用于修改，添加，删除记录（在客户端），并且提交到服务器。
    5,模版部分，用于指定相应的ItemView模版。所有的模版将被置于一个隐藏的div中，这样不会在页面上显示出来。

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />

<!-- Element for ItemView (container) -->
<div id="detailsView">
</div>

<!-- Navigators -->
<input type="button" id="previousButton" value="<" title="Go to previous row" />
<span id="rowIndexLabel"></span>
<input id="nextButton" type="button" value=">" title="Go to next row" />
|

<!-- Commands -->
<input type="button" id="addButton" value="New" title="Create a new row" />
<input type="button" id="delButton" value="Delete" title="Delete the current row" />
|
<input type="button" id="saveButton" value="Save" title="Save all pending changes" />
<input type="button" id="refreshButton" value="Refresh" title="Discard pending changes and get the latest data from the server" />

<!-- Templates -->
<div style="visibility: hidden; display: none">
<div id="detailsTemplate">
Name:
<input id="nameField" size="30" /><br />
Description:<br />
<textarea id="descriptionField" rows="4" cols="40"></textarea><br />
</div>
<div id="emptyTemplate">
Getting Data
</div>
</div>

    最后需要做的是在页面上添加Atlas脚本。

    下面是DataSource的脚本：

<dataSource id="dataSource" serviceURL="MyDataService.asmx" autoLoad="true" /> 

    下面是ItemView的脚本。我们将绑定上面的DataSource控件作为数据源，并且将ItemView的enabled属性绑定到DataSource的isReady属性上，以期在数据源没有装载完成前禁用ItemView。同样为ItemView定义了itemTemplate和emptyTemplate。

<itemView id="detailsView">
<bindings>
<binding dataContext="dataSource" dataPath="data" property="data"/>
<binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
</bindings>
<itemTemplate>
<template layoutElement="detailsTemplate">
<textBox id="nameField">
<bindings>
<binding dataPath="Name" property="text" direction="InOut"/>
</bindings>
</textBox>
<textBox id="descriptionField">
<bindings>
<binding dataPath="Description" property="text" direction="InOut"/>
</bindings>
</textBox>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="emptyTemplate" />
</emptyTemplate>
</itemView> 

    下面是导航部分的脚本。我们提供了一个label用来显示当前的记录编号（记录index加上1，使用了Atlas的Add transformer。关于Atlas transformer，您可以参考：在ASP.NET Atlas中创建自定义的Transformer ）。还提供了前后移动记录的导航按钮（通过使用Atlas的InvokeMethod action调用相应的ItemView的方法）。

<button id="previousButton">
<bindings>
<binding dataContext="detailsView" dataPath="canMovePrevious" property="enabled"/>
</bindings>
<click>
<invokeMethod target="detailsView" method="movePrevious" />
</click>
</button>

<label id="rowIndexLabel">
<bindings>
<binding dataContext="detailsView" dataPath="dataIndex" property="text" transform="Add" />
</bindings>
</label>

<button id="nextButton">
<bindings>
<binding dataContext="detailsView" dataPath="canMoveNext" property="enabled"/>
</bindings>
<click>
<invokeMethod target="detailsView" method="moveNext" />
</click>
</button> 

    下面是命令部分的脚本。这里我们能够在客户端添加/删除记录，并将改变提交给服务器或者放弃提交。

<button id="addButton">
<bindings>
<binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
</bindings>
<click>
<invokeMethod target="detailsView" method="addItem" />
</click>
</button>

<button id="delButton">
<bindings>
<binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
</bindings>
<click>
<invokeMethod target="detailsView" method="deleteCurrentItem" />
</click>
</button>

<button id="saveButton">
<bindings>
<binding dataContext="dataSource" dataPath="isDirtyAndReady" property="enabled"/>
</bindings>
<click>
<invokeMethod target="dataSource" method="save" />
</click>
</button>

<button id="refreshButton">
<bindings>
<binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
</bindings>
<click>
<invokeMethod target="dataSource" method="load" />
</click>
</button>

    大功告成，可以在浏览器中测试了。