老鼠Atlas之旅（六）：Hands-On Lab 2第二個實驗，使用atlas宣告塊調用web服務

如果您沒有做第一個實驗請您先做下，這個實驗講的是如何使用atlas宣告塊來調用web服務而不要寫js指令碼，大家應該記得我們在第一個實驗裡是使用js 指令碼來調用web 服務裡的方法的，現在不要寫了那個js指令碼了，直接使用atlas宣告塊來調用web services，不知道為什麼，我私下認為這個方法還沒有上面的那個方法（使用js指令碼的方法）來的更簡單。
練習一：建立一個asp.net content 頁
     在實驗的這個部分，你將做一個和實驗1一樣具有相同的結果和控制項的asp.net content頁。
1，建立一個content頁，在解決方案管理器上個實驗裡我們建立的Default.master上右擊，選Add Content Page.且命名為 HelloWorldDeclarative.aspx。
2，切換到程式碼檢視，刪除那兩個ContentPlaceHolderId屬性值不是Main的元素。在<%@ Page指令行，設定他的Title屬性為“Atlas實驗2”
3，添加控制項到content頁面上。在元素裡面，添加下面的一些控制項標記。
 

<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

也就是我們在實驗1裡面建立的那個web 服務。<serviceMethod>元素也提供了將要調用的web服務的方法的名字以及關於這個方法的詳細資料。在他的<bindings>標記裡面，他指定了哪個控制項的值將被當做參數提交給遠程方法。在<completed>標記裡面，指定了當遠程方法完成之後將要做的事。他通過<method>屬性指定了一個本地的atlas方法evaluateIn來得到從伺服器端返回的值並且把得到的值賦給本機物件<label>,在這裡是通過target來指定的，同時<label>的targetElement屬性指定了和頁面控制項id值是results的span關聯起來。在<label>的子項目<bindings>指定了如何綁定從遠程方法的傳回值給頁面上的<span>元素。
好了，完成後的代碼如下：

<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Atlas實驗2" %>
<asp:Content ID="Content3" ContentPlaceHolderID="Main" Runat="Server">
   <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>
<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <references>
       <add src="ScriptLibrary/AtlasUI.js" />
       <add src="ScriptLibrary/AtlasControls.js" />
    </references>
    <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>
  </page>
</script>

</asp:Content>

 我們現在把他設定為起師頁，按F5運行下，天啊，滑鼠剛剛離開那個按鈕，結果就在下面顯示出來拉！！！

雖然這問狀搞完拉，但是心中還是鬱悶的，總發覺他沒有實驗1的方便易懂啊~~~~~~