發行項
09/30/2015

本文章是由機器翻譯。

技術最前線

ASP.NET AJAX 4.0 中的資料繫結

Dino Esposito

停止 beating 周圍，灌木：AJAX，仍只能與一個強式的 JavaScript 引擎，在用戶端瀏覽器中執行，並提供更進階的和非同步功能的基礎。目前併入 ASP.NET 3.5 Service Pack 1 JavaScript 程式庫是一個必要的但是不足，嘗試傳遞這類的程式庫。功能更強大的 ASP.NET AJAX 平台需要，它只被引入 ASP.NET AJAX 4.0 的一部分。

abstractly 說話的 AJAX 架構前端是展示層與的某些應用程式邏輯的實作結合豐富的 UI 功能。應用程式邏輯是基本上後面所設計與分析階段產生的所有使用案例圖表程式碼。應用程式邏輯表示應用程式和如何預期使用者會與整個系統互動的預期的行為。

有何的 AJAX 前端相當唯一，在相較於傳統的 Web 或智慧型用戶端前端，最少是按需要混合低階的程式設計工具有豐富的使用者經驗的項目。因為的 AJAX 前端執行在用戶端瀏覽器中，所以它可以信賴只在 HTML，以產生使用者介面和只 JavaScript 活躍上特殊效果、和拖、非同步資料擷取與部分更新視覺化項目。

若要符合期望，現今與有效的 AJAX 平台都必須提供兩個索引鍵的功能。第一次，它必須讓開發人員進行非同步呼叫到 HTTP 外貌的臨機操作伺服器模組。第二個，它必須讓開發人員將任何已接收的未經處理資料合併到現有的網頁文件物件模型 (DOM)。這兩個功能，但是，會遺失其本身的訴求範圍的如果不是，簡單又有效的方式實作。

在 ASP.NET 3.5 Service Pack 1 開發人員會發現一個功能強大且可靠的 API 非同步 HTTP 為主的 Web 服務的圖層連接。ASP.NET AJAX 3.5 讓它可能，方便整體，您可以從用戶端頁面參考 Web 服務。當您讓架構也會自動產生鏡射服務合約的 JavaScript Proxy 類別。現有 AJAX 架構在伺服器和用戶端，可保護開發人員的資料序列化的所有詳細資料。JavaScript 開發人員的觀點來看，遠端 Web 服務 (仍然限於已知的相同來源原則) 是像本機 JavaScript 物件公開透過方法的行為。

ASP.NET 3.5 Service Pack 1 並不會提供相同的優點就有關使用者介面的建置。會讓您很容易從伺服器，擷取未經處理的資料，但它並不會提供一個功能強大的介面，若要在使用者介面中顯示此未經處理的資料的方式。AJAX 支援 ASP.NET 3.5 Service Pack 1 中主要的缺點是缺乏有效的工具，用戶端資料繫結] 及 [HTML 範本。這就是為什麼的用戶端範本呈現引擎] 和 [made-to-measure 資料繫結語法是最具競爭力的功能，您在 ASP.NET AJAX 4.0 中找到。

此的文件中我會支援 ASP.NET AJAX 4.0 中，檢閱支柱的真實世界 AJAX 的開發。在執行這項作業，我通常會專注於用戶端範本和資料繫結，但不會略過其他 goodies，例如 ADO.NET 資料服務 Proxy 類別和程式設計功能。

真實世界 AJAX 開發的 pillars

真實世界 AJAX 開發是有關建置豐富的使用者介面，透過網路，而且它需要新的設計模式的應用程式和新的程式設計工具的工作。

一段很長的時間任何網頁使用者介面會表示整個步驟回溯方面使用性和回應，如果比較任何桌上型電腦的使用者介面。一段很長的時間 Web 開發人員只是略過 (因為它不與工作相關) UI 模式程式設計功能，包括預測擷取、快取，遠端工作]、 [即時線上] 和 [向下切入顯示]、 [subviews]、 [部分的 UI disablement，] 及 [強制回應性的監視數。

在傳統的 Web 開發過程中的使用者介面建置完全委派給伺服器端，而有效地實作 [使用伺服器端的資料繫結和臨機操作的控制項。問世的 AJAX 架構會加入這種模式，過時和 unappealing 增加應用程式的數字。

資料繫結，但是，是要忽略的 AJAX 程式設計模型中太強大功能。物件導向也難以拒絕的程式碼複雜度超過指定的臨界值時。在此同時 Web 應用程式會維持相當唯一蹤跡最重要的小幫手]、 [快取的下載項目] 和 [豐富的功能的組合。

在真實世界 AJAX 開發，JavaScript 程式庫會是只負擔的方式將程式設計的電源。您可以透過 JavaScript 的程式庫提供非 OOP 語言；物件導向的基礎您提供豐富且現成的使用者介面 Widget ；然後，您可以提供程式設計的工具來有效地完全在用戶端戶端繫結的程式碼資料。

沒有為用戶端資料繫結功能強大模型，您不能有功能強大的真實世界 AJAX 的開發平台。

用戶端資料繫結的需求

有兩種基本的模式實作資料繫結功能。HTML 訊息模式，而且另一個是瀏覽器端樣板模式。前者會使傳回 prearranged 的 HTML 標記的一個元件呼叫遠端服務供顯示。後者是設定下載未經處理的資料，並決定在用戶端上如何呈現出的機器。

HTML 訊息模式很類似的部分呈現，在於它不包含任何的檢視狀態也可以設定為自發的作業不繫結至同一個應用程式中發生任何其他回傳作業智慧表單。HTML 訊息模式的實作中, 所有項目發生伺服器；任何資料繫結是基本上是一種傳統的伺服器端資料，例如 DataGrid 和清單檢視和擷取資料的受管理的容器有關控制項繫結。

使用 ASP.NET 3.5 中可用的工具，可以輕鬆地實作 HTML 訊息模式。所有它需要在用戶端上的繫結傳回標記頁面 DOM.下列程式碼片段顯示什麼真的需要從程式碼的觀點來看：

grid.innerHTML = markup;

在範例中，格線表示 HTML 項目來包含標記，這通常是 DIV 標記。名為標記，變數另一方面，表示 HTML 取得做為回應來自服務方法呼叫的任何區塊。

不用說服務用來實作 HTML 訊息模式必須加入邏輯以擷取或計算資料，以傳回，以及格式化成 HTML 資料所需的任何邏輯。

在就一般 HTML 訊息模式為基礎的方案需要回應每個遠端方法呼叫的平均大小增加更多的頻寬。

瀏覽器端範本模式 (BST) 需要更多程式碼，您一邊，但也可以提供更好的結果，同時在大的彈性和頻寬最佳化方面。BST 模式是以您將遠端呼叫來擷取資料的概念為基礎。在用戶端可以操作與 JavaScript 的格式是再下載資料。最後，資料會與現有的網頁 DOM 合併，並產生您需要任何複雜的介面。

太就經常 AJAX 架構的錯誤地表示與以非同步方式更新使用者介面的小部份的可能性。它是一件事以非同步方式取得純量值 (假設目前的銀行帳戶餘額) 並插入，到現有網頁 DOM ；它是以非同步方式重新整理資料經常變更，且需要顯示一個 gridlike 基礎結構的陣列的相當另一個動作。

伺服器端很簡單的伺服器] 控制項如下：

Collection<StockInfo> stocks = GetLatestQuotes(...);
DataGrid1.DataSource = stocks;
DataGrid1.DataBind();

什麼會是相當於用戶端的這類程式碼？第一個部分可以輕易地對應到 ASP.NET 3.5 的功能。所有您是具現化，並使用用戶端 Proxy 遠端服務所能取得您最新的值如下：

var service = new Samples.Services.FinanceService();
var stocks = service.GetLatestQuotes(...);

股票變數是一個 JavaScript 陣列的物件，表示您收到的資料。如何會配合此區塊的未經處理的資料到一個現有的 HTML 配置?BST 模式是這裡幫助。它需要您定義下列項目：HTML 範本和相關的資料版面配置區；您自己語法實際資料繫結替代符號；您自己語法以取得範本和資料，並會產生的 HTML 工廠更新標記；然後黏貼它一起時佔提供一個可管理的程式設計介面的程式碼。

ASP.NET AJAX 4.0 提供現成的 BST 模式的實作。ASP.NET AJAX 範本在臨時平台是 MicrosoftAjaxTemplates.js 檔中定義。您需要參考此檔案透過 ScriptManager 控制項 (或 ScriptManagerProxy)，如果您使用主版頁面。如果您使用 ASP.NET MVC 或想要參考指令傳統 < 碼 > 透過指令碼檔案標記，然後您需要同時新增 MicrosoftAjax.js 初步的參考。

HTML 範本的語法

年的 ASP.NET 程式設計已證明超過任何合理的不確定 HTML 範本是從資料建立 Web 使用者介面的絕佳方式。HTML 範本是一種資料繫結包含常值、 ASP.NET 控制項和版面配置的 HTML。繫結至原始資料，且由臨機操作引擎處理，HTML 範本會 morphs 成純 HTML 瀏覽器來呈現。將資料繫結和產生的標記，以顯示；區塊的範本存在繫結之前範本是隱藏起來。

在儘管相當簡單的描述，HTML 範本是很難在真實世界的 AJAX 架構中實作。幾個嘗試已建立的原型 JS，例如的常用程式庫，以 formalize HTML 範本。雖然還有一個應該從 HTML 範本功能的一般協議，並不會存在通用模型定義的 HTML 範本在瀏覽器中。

範本必須要能夠呈現 XHTML 相容的標記。範本必須由基礎的轉譯引擎來處理儘快和應該讓使用者發現還有延遲的回應從應用程式之前，呈現高百分比的標記，引擎。範本必須繫結，很容易讀取時不被限制在簡單的情況下只支援一個非常簡單的語法。您應該要能夠混合標記和在範本中的程式碼。在理想的情況下，觸發程序範本的轉譯程式碼應該宣告式，而且不特別干擾。

讓我們來檢視 HTML 範本模型支援 ASP.NET AJAX 4.0 的特性。

在 ASP.NET AJAX 4.0 HTML 範本會是一個 DIV 標記或任何其他容器標記，裝飾有 sys 樣板的類別屬性，如下所示：

<div>
<ul id="MyItem" class="sys-template">
       <li>
         {{ Symbol }}, {{ Quote }}, {{ Change }}
       </li>
</ul>
</div>

sys 範本的 CSS 類別是慣例，將此的項目及其一開始不可見的內容標示成。請注意 sys 範本必須定義明確地在的主版頁面或每一頁中,，如下所示：

<style type="text/css">
.sys-template { display:none; visibility:hidden; }
</style>

指定當呈現，範本給資料內容並範本的主體可以裝載公用欄位和資料內容物件的屬性繫結。同樣地，在範本中的任何項目可以參考任何評估為字串的 JavaScript 運算式。

資料繫結語法

若要快速在範本中的預留位置] 和 [外部資料之間的繫結語法，如下所示為：

{{ expression }}

正如所提到的運算式可以是公用成員的資料物件或 JavaScript 運算式可傳回字串名稱。這種運算式可以出現在範本中的任何地方，也也用來將值指派給屬性，如下所示：

<div>
  <ul id="MyItem" class="sys-template">
     <li>
       <asp:Label runat="server"
            Text="{{CompanyName}}" />
     </li>
  </ul>
</div>

HTML 範本不一定要進行的一般 HTML 常值；您可以使用 ASP.NET 的標記以及。指定上述程式碼片段，如下 Label 控制項所發出的標記：

<span>{{ CompanyName }}</span>

如您見的伺服器控制項在網頁的原始程式碼中使用不會妨礙用戶端呈現的範本。

您可以在使用熟悉的 onXXX 語法範本內或透過 $ addHandler 函式中，定義用戶端事件，Microsoft AJAX Library。

DataView 控制項和範本具現化

若要顯示的資料，範本必須被執行個體化、繫結至資料和呈現容器內。Sys.UI.DataView 用戶端控制項可用來自動化，並簡化所有這些工作。

則 DataView] 控制項為基本上元件的某些輸入資料和要顯示在頁面中，ASP.NET AJAX 範本，並產生 HTML 標記。DataView 也會參考為「行為」元件。在就一般行為是一種指令碼為基礎元件，一次附加至 DOM 項目，變更的 HTML 項目在用戶端瀏覽器中的運作的方式。您可以使用兩種方法之一中的一個行為。您可以以宣告方式將行為附加至其目標 DOM 項目，或者您可以建立行為的執行個體，並以程式設計方式設定。在後者的情況下中行為與範本之間元關聯只是一部份的設定。讓我們先處理宣告式的方法。

我進一步之前先不過，讓我釐清 [DataView 是只有一個元件，可能的行為。任何您閱讀稍後有關宣告式的執行個體化，並且任何行為，您可能會執行在 ASP.NET AJAX 會套用於附件。

圖 1 動作的 DataView 行為

以宣告方式附加行為

若要將行為附加至 DOM 項目，使用 sys：附加自訂屬性。如您見屬性就會會與命名空間，讓它 XHTML 相容的 URI 相關聯。您宣告內 < > sys 前置詞項目：

<body xmlns:sys="javascript:Sys" ...>

sys 前置詞對應至 javascript:Sys 命名空間 URI，則 Microsoft AJAX Library中所定義。使用 sys：附加屬性做只建立一個現有的行為和 HTML 項目之間的關聯的目的。您仍然要具現化行為元件。您可以藉由定義另一個自訂 namespaced 屬性 < 主體 > 中完成這個動作項目。屬性的值會參考 JavaScript 物件具現化：

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView" ...>

屬性的名稱 — Dataview，在上述程式碼片段 — 是任意的且可以以任何其他您想要變更。但是，您的選取，任意名稱必須維護在程式碼來參考行為的其他部份。

載入網頁，且 DOM 項目取得處理時發生任何附加的指令碼行為的有效的執行個體化。瀏覽器載入網頁，可能不知道如何處理這類的程式庫定義行為關於任何項目。 ASP.NET AJAX 架構是最後負責執行個體化的自己的行為。不過，ASP.NET AJAX 架構需要您繼續進行的臨機操作指示。您想要開始在 DOM 剖析程序期間，並讓它看起來要負責處理任何 sys 的任何剖析項目內容中，架構中就特別：附加屬性。

圖 2 控制一個 DataView 物件以程式設計方式

<script type="text/javascript">

// Define a global instance of the DataView
var theDataView = null;

// This function can be called from anywhere in the page to
// fill the template with passed data and update the page.
function renderTemplate(dataSource) 
{
    // Ensure we have just one copy of the DataView.
    // The DataView's constructor gets a DOM reference to the template.
    if (theDataView === null)
        theDataView = new Sys.UI.DataView($get("MyTemplate"));

    // Bind data to the template associated with the DataView
    theDataView.set_data(dataSource);

    // Force the template to render 
    theDataView.refresh();
}

</script>

基於效能的理由 ASP.NET AJAX 架構不被設計來自動處理的任何瀏覽器遇到一路的 DOM 項目。它是因此最多您明確地指出的 DOM 項目需要掃描附加支援宣告式的執行個體化的行為。啟用 DOM 項目包含以宣告方式執行個體化的行為，藉由使用 sys：啟動屬性。您可以使用屬性本文 < >項目並將它設定為以逗點分隔的項目 ID 清單：

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="customerList">

上述程式碼會指示自動在任何的行為可能會附加至 customerList DOM 項目具現化架構。

如果您想要啟動整份文件，您也可以使用萬用字元符號 (1)。使用此選項小心，特別是在大型的網頁上使用，因為它可能會引入呈現延遲。以完整設定本文 < > DataView 方式項目，所有要保持為全新資料繫結至範本：

<div id="customerList">
    <ul class="sys-template"
        sys:attach="dataview"
        dataview:data="{{ theCustomers }}">
        <li>
            <span ><b>{{ ID }}</b></span>
            <asp:label runat="server"
                 Text="{{ CompanyName }}"></asp:label>
        </li>
    </ul>
</div>

DataView 元件有一個豐富的程式設計介面，在其他方面，包含的資料屬性。資料屬性表示資料繫結範本的內容。您可以設定 [資料] 屬性，以宣告方式和程式設計的方式。下列程式碼片段，在 [資料] 屬性以宣告方式設為命名 theCustomers 成為全域陣列的內容：

<ul class="sys-template"
    sys:attach="dataview"
    dataview:data="{{ theCustomers }}">
...
</ul>

在就一般您可以設定 [資料] 屬性為任何 JavaScript 運算式評估為一個可繫結的物件或物件的陣列。當您想要將範本繫結至一些通用的資料時您可以選擇宣告式的方法。

標題為 A 範例頁面使用宣告式結合這個程式碼下載範例會顯示範例頁面的完整清單。 [圖 1] 顯示作用中的範例頁面。

以程式設計方式繫結，您必須取得至 DataView 物件參考，並呼叫的資料屬性 setter 方法。您會擷取 [DataView，透過 $ 的執行個體找出在 Microsoft AJAX Library中定義的協助程式。 DataView 元件的識別碼符合它附加至 DOM 元素的 ID。請參考下列程式碼片段：

<ul class="sys-template"
    sys:attach="dataview"
    id="DataView1">
...
</ul>
<input type="button"
       value="Perform binding"
       onclick="bind()" />

您可以執行資料只時繫結使用者明確地按下 [] 按鈕。以下是您要放入繫結的 JavaScript 函式的程式碼：

<script type="text/javascript">
    function bind() {
        theDataView = $find("DataView1");
        theDataView.set_data(theCustomers);
    }
</script>

您第一次擷取 DataView 執行個體識別碼，並再將新的內容指派給它的 [資料] 屬性。

主版頁面的秘訣

當您使用 [主版頁面時通常讓 < 本文 >頁範本在母片中的標記。您就再需要您編輯主版頁面附加任何所需的行為。此外，您可以將放 < 主體 >標記內容版面配置區，並強制開發人員可以在任何內容頁面中明確設定。

< 主體 >標記是需要註冊可附加的行為例如 DataView，並讓辨識，並透過 sys 行為具現化的 DOM 元素：啟動屬性。

請注意另一種方法有編輯 < 主體 >標記。您可以在 [ScriptManager] 控制項上使用新的 ClientElementsToActivate 屬性，如下所示：

<asp:ScriptManager runat="server"
                   ID="ScriptManagerProxy1"
                   ClientElementsToActivate="*">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />           
    </Scripts>
    ...
</asp:ScriptManager>

請注意只有少數 ScriptManager 控制項上定義的屬性鏡像是要複寫 ScriptManager 功能於內容頁面中使用的包裝函式控制項的 [ScriptManagerProxy] 控制項上。在 ASP.NET 4.0，但是，[ClientElementsToActivate 是一些您可以存取這兩個控制項的屬性之間。

您可能會想知道 ClientElementsToActivate 類似的字串陣列屬性如何影響如 ASP.NET AJAX 架構的 JavaScript 架構的行為。當 ClientElementsToActivate 屬性設定時，指令碼管理員控制項就會發出指令碼，將一或多個項目加入至陣列內部 Sys.Application 物件 Microsoft AJAX Library中網頁內的額外的線條。

以程式設計方式使用 DataView 控制項

因此就目前我們已經檢查出 HTML 範本附加到混合在一起版面配置及資料到新的 HTML DataView 行為的一個案例。這並不是唯一可能的方法，用戶端資料繫結。

您也可以以程式設計方式建立 DataView 元件的執行個體，並將傳遞給它來做為引數使用的範本。圖 2 提供簡短，但說明之清單。

DataView 的建構函式會採用 DOM 參考到在內部使用的範本。資料屬性 setter 方法取得最新的資料繫結。最後，重新整理] 方法強制的 HTML 範本來顯示重新繫結的資料更新。

若要建立 [DataView 的執行個體，您可以也信，$ 建立 Helper 方法]，如下所示：

<script type="text/javascript">
function pageLoad() {
$create(
       Sys.UI.DataView,
       {},
       {},
       {},
       $get("MyTemplate")
);
}
</script>

由遠端的 Web 服務所提供的絕對填入複雜的 HTML 範本的資料為您的程式設計工作的平滑設定有非常常見的案例中的使用 DataView。讓我們來調查進一步這一點。

從 Web 服務擷取資料

DataView 元件功能的程式發展介面成員數特別設計來做分析藍本中的 [DataView 內容來自遠端的 URI。下載包含 Web 服務所使用的 [DataView 成員的清單。

標題的範例程式碼下載的內容為的自動擷取 DataView 使用的資料從遠端 URI 的附註不會完全了解整個 DataView 元件的 API。許多多個成員存在，做其他案例中，我將探討在未來的專欄的深度。

標題的自動擷取 DataView 使用的資料為從遠端的 URI 的下載程式碼範例顯示 JavaScript 程式碼建立 DataView，載入網頁時。DataView 設定為立即擷取資料，藉由放置指定的 Web 服務方法呼叫。

而在 fetchOperation 設定要叫用方法，則 [dataProvider] 屬性會指出資料來源。最後，fetchParameters 是包含方法的參數資訊的字典物件。將您設定它為 JavaScript 物件的每個屬性符合的方法定義上型式參數名稱的位置。在就特別在先前的範例方法 GetQuotesFromConfig 會有下列的原型：

[OperationContract(Name="GetQuotesFromConfig")]
StockInfo[] GetQuotes(bool isOffline);

DataView 接收 HTML 範本來填入 $ 透過建立 Helper 函式和資料擷取成功，一旦它填滿在範本中任何版面配置區。

圖 3 A 豐富型資料的繫結網頁使用 AJAX 和 jQuery

範例程式碼也包含一個定期重新整理 jQuery 動畫的一個位元範本的自訂計時器物件。當計時器刻度時，新的擷取作業排序使用任何目前的值，「離線」核取方塊。在「離線」核取方塊，指出是否 Web 服務被期待傳回假的股票及值，或連接到要抓取的則為 True 的股票報價真實世界財務服務。服務會從組態檔取得之財務服務的 URL] 和 [的股票清單。(如需詳細資訊，請參閱原始程式碼)。

下個月

圖 3] 顯示的豐富且動畫資料繫結 ASP.NET AJAX 網頁將未經處理的資料繫結至相當複雜的 HTML 範本會使用用戶端呈現。在 ASP.NET AJAX 4.0 中您會發現功能強大的程式設計工具，以便撰寫程式碼不會更難比執行傳統伺服器端的資料繫結這類頁面。

頁面顯示於 [圖 3] 是僅在第一個和簡單，長路徑的步驟。下一個的月份我將討論的豐富的範本，以及如何將邏輯放在 HTML 的範本的多個功能，並我將會瀏覽即時資料繫結。下次見！

Dino Esposito 是架構設計人員在 IDesign 和 co-author 的「 Microsoft.NET：企業的架構的應用程式"(Microsoft 按，2008年)。根據在義大利，Esposito 是經常在世界各地的產業活動演講者簡報。您可以造訪他的部落格，網址為：weblogs.asp.net/despos。