H_J_H

<form action="">

  <div>

    Search for

    <input id="SearchKey" type="text" />

    <input id="SearchButton" type="button" value="Search" />

  </div>

</form>

<hr style="width: 300px" />

<div>

  <span id="Results"></span>

</div>
 在这个时候如果我们切换到设计视图，我们就会看到他的设计视图和我们在实验1里所做的那个页面一样。

练习二：创建个atlas宣告块调用web服务，在实验的这个部分，创建atlas宣告块标记，你将能够调用和实验一一样的web服务而不需要写js代码。
1，在代码视图里，在<asp:content>元素里面，紧跟你刚刚创建底</div>标记，写如下的代码：
  <script type="text/xml-script">

  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

    <references>

    </references>

    <components>

    </components>

  </page>

</script>
atlas宣告块使用了标准的xhtml  <script>标记，当然他的type属性值是text/xml-script,这个属性值也是唯一确定他是不是一个atlas宣告块的标识。atlas宣告块的根元素是<page>，他包含了atlas宣告块里面的其他所有元素，同时他也有自己的名字空间，关于这点，大家可以看看xml和xhtml的相关资料。接下来是<references>元素和<components>元素，他们涉及到atlas宣告块的两个主要部分：哪个js脚本文件将被使用（从atlas的js脚本库），哪些界面组件被联系起来。
2，在这个例子里面，在<references>元素里面需要添加下面的两个js文件：
  <add src="ScriptLibrary/AtlasUI.js" />

<add src="ScriptLibrary/AtlasControls.js" />
在<components>元素里面，添加个<textbox>元素，一个<serviceMethod>元素，一个<button>元素，一个<label>元素，代码如下：
 

<components>

<textBox id="SearchKey" />

<serviceMethod id="helloService" url="HelloWorldService.asmx"

  methodName="HelloWorld">

  <bindings>

    <binding dataContext="SearchKey" dataPath="text"

      property="parameters" propertyKey="query" />

  </bindings>

  <completed>

    <invokeMethod target="resultsBinding"

      method="evaluateIn" />

  </completed>

</serviceMethod>

<button targetElement="SearchButton">

  <click>

    <invokeMethod target="helloService" method="invoke" />

  </click>

</button>

<label targetElement="results">

  <bindings>

    <binding id="resultsBinding" dataContext="helloService"

      dataPath="response.object" property="text"

      automatic="false" />

  </bindings>

</label>

</components>

 atlas的UI元素被定义成<components>元素的子元素
使用id属性把<textbox>和页面上的我们在最先前写的 textbox控件联系起来了。
<button>标记确定页面上的哪个button按钮去调用远程的方法，targetElement="SearchButton"确定了页面上的id值是SearchButton的按钮去调用远程方法。他的<click>元素确定了页面上按钮的行为是单击事件。在他的<invokeMethod>子元素里面，他的target属性指定了我们刚刚在上面 定义的<serviceMethod>的id。
<serviceMethod>标记提供了将被调用的web 服务的url，他的文件名是：HelloWorldService.asmx