WCF Data Services是SharePoint 2010中一個極具吸引力的新特性。然而，因為它的強大，直接對其進行編程仍然會有點痛苦。幸運的是，一個新的相關技術 —— ASP.Net AJAX模板 – 可以完美的與WCF Data Service進行集成，并允許我們快速構建優雅的，可維護的和反應迅速的AJAX應用程序。?

在本文中，我將詳細描述ASP.Net AJAX模板，并在Visual Studio 2010中一步一步的構建一個非常簡單的應用程序頁面。接著使用ASP.Net AJAX模板來顯示SharePoint 2010中通過WCF Data Services發布的JSON格式的列表數據。?

什么不是模板？?

單純從技術層面解釋什么是ASP.Net AJAX模板可能并不容易。不妨先假設沒有這項技術，看看傳統方式是如何解決問題的。如果SharePoint傳遞給你一個JavaScript中的JSON對象的數組，現在的你會如何將其轉換成HTML？?

最常見的答案似乎就是JQuery的.append()語句了。代碼大致如下：

for?(var?i?=?0;?i?<?userStories.length;?i++)?{
$("#userStories").append("<div?class='userStoryCard'>"?+
userStories[i].Title?+?"</div>");
}

這種類型的解決方案的問題，或者說任何沒有使用模板引擎的解決方案，事實上都無法清楚的分離數據訪問邏輯和界面展現。事實上，這種情形很像回到了經典的Active Server Pages風格，可維護性很差，代碼一塌糊涂。隨著我們不斷的從SharePoint獲取數據，整個代碼會變得更加雜亂。?

模板的目標是使你不必編寫上面那樣的代碼，使用模板后的代碼應該像下面這樣：：?

<div?class="userStoryCard">{{?Title?}}</div>

整潔，漂亮。理想狀態下模板應提供這樣一個的解決方案：?

• 最大限度地減少管道（plumbing）代碼?
• 清晰的分離數據訪問邏輯和界面展示?
• 簡化存回服務器端的數據?
• 并且沒有ViewState！??

ASP.Net AJAX模板的昨天，今天和明天?

如果你讀過Scott Guthrie的博文jQuery templating engine ?，或者你曾非常不容易的看到過準確介紹jQuery模板的官方文檔，你就會驚訝于為什么ASP.Net AJAX模板與其如此之符合，這也正是微軟構建客戶端AJAX應用的愿景。? 首先，在ASP.Net AJAX項目還是beta階段時，模板就已經存在了。當ASP.Net AJAX 4.0從測試轉到正式發布后，模板JavaScript文件被納入到AJAX ControlTooklit CodePlex項目（語法稍作修改）。這就是為什么你會發現今天網上找到的大多數例子都稍微有些過時。 至于jQuery的 模板引擎，據Stephen Walther（ASP.Net MVC團隊的項目經理）所說，他們“未來不會投入過多精力到[ASP.Net AJAX的模板]”，因為他們將會把重點放在jQuery模板引擎。那么我們何必學習一門不會有所發展的技術呢？原因之一是jQuery模板引擎仍非常年輕（撰寫本文時還處于原型階段），而ASP.Net AJAX模板已正式發布，可以直接用于生產環境。另一方面，其語法很接近，想必將來升級也不會成為一個大工程（理論上如此）。?

Visual Studio 2010和SharePoint 2010?

在進入模板學習前，讓我們先來快速看一下如何在Visual Studio 2010中構建一個應用程序頁面。這是我們將來編寫代碼的基礎。當然你可以把所有代碼都放在一個內容編輯器Web部件里，但是Visual Studio提供了更好的智能提示和調試的支持，因此我們選擇在應用程序頁中運行。

為了在Visual Studio 2010中建立一個簡單的應用程序頁面，先選擇“新建項目”，然后導航到SharePoint 2010模板分類，選擇“空白SharePoint項目”

點擊確定后，Visual Studio會彈出SharePoint自定義向導：

該窗口要求你選擇一個站點用于調試。當你按F5鍵（開始調試）時，Visual Studio 2010會進行wsp文件打包，然后將其部署到這里你填寫的URL對應的站點上，同時附加上對應的w3wp進程，并打開一個瀏覽器顯示該sharepoint站點。這樣，你就立即擁有一個調試環境了。

如果你對這一過程印象不深刻，那么你可能沒有做過多少WSS 3.0的開發——但請相信我，這個改進大大節省了我們的時間。盡管在本例中我們不會寫任何服務器端代碼，但仍舊可以體會到微軟在SharePoint 2010上傾注了不少的心力。?

當Visual Studio完成項目初始化后，選擇項目->添加新項，然后選擇應用程序頁。?

Visual Studio接下來會自動生成一個完全套用SharePoint母版頁并包含內容控件的頁面。

代碼 <%@?Assembly?Name="$SharePoint.Project.AssemblyFullName$"?%>
<%@?Import?Namespace="Microsoft.SharePoint.ApplicationPages"?%>
<%@?Register?Tagprefix="SharePoint"?Namespace="Microsoft.SharePoint.WebControls"?Assembly="Microsoft.SharePoint,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Register?Tagprefix="Utilities"?Namespace="Microsoft.SharePoint.Utilities"?Assembly="Microsoft.SharePoint,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Register?Tagprefix="asp"?Namespace="System.Web.UI"?Assembly="System.Web.Extensions,?Version=3.5.0.0,?Culture=neutral,?PublicKeyToken=31bf3856ad364e35"?%>
<%@?Import?Namespace="Microsoft.SharePoint"?%>
<%@?Assembly?Name="Microsoft.Web.CommandUI,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="UserStories.aspx.cs"?Inherits="PreDemo.Layouts.PreDemo.UserStories"?DynamicMasterPageFile="~masterurl/default.master"?%>
<asp:Content?ID="PageHead"?ContentPlaceHolderID="PlaceHolderAdditionalPageHead"?runat="server">
</asp:Content>
<asp:Content?ID="Main"?ContentPlaceHolderID="PlaceHolderMain"?runat="server">
Hello?World!
</asp:Content>
<asp:Content?ID="PageTitle"?ContentPlaceHolderID="PlaceHolderPageTitle"?runat="server">
應用程序頁
</asp:Content>
<asp:Content?ID="PageTitleInTitleArea"?ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"?runat="server"?>
我的應用程序頁
</asp:Content>

（“Hello World!”是我寫的）。現在如果你按F5鍵或者點擊生成->部署解決方案，則Visual Studio會打包該應用程序頁到一個wsp文件并將其部署到SharePoint。如果你導航到該應用程序頁的話（例如本例中為http://contoso14/_layouts/PreDemo/UserStories.aspx）則會看到如下的顯示：

很震撼吧！你真的應該如此。我們沒有編寫冗長的，重復的代碼，或者容易出錯的CAML，沒有運行任何DOS（或PowerShell）腳本，沒有手工部署到GAC，甚至沒有注意到后臺自動生成的Feature.xml文件，然而，我們已經部署完了。

安裝ASP.Net AJAX模板

ASP.Net AJAX模板的安裝比較棘手。為了得到它你需要先在CodePlex上下載最新推出的AJAX控件工具包源代碼（本例中下載下來的是AjaxControlToolkit-9c860ac12ae9.zip）。并在Visual Studio（它的項目中包含了Visual Studio 2008和2010兩個版本）中編譯（編譯時還需要安裝Microsoft Ajax Minifier 2.0）然后將Javascript文件復制到SharePoint的layouts目錄下。需要復制的目錄有：

從 AjaxControlToolkit.Source\SampleWebSites\AjaxClientWebSite\Scripts; 復制到

?? ?C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\ \14\TEMPLATE\LAYOUTS\Scripts

還有從?AjaxControlToolkit.Source\Client\MicrosoftAjax\Templates; 復制到

?? ?C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\ \14\TEMPLATE\LAYOUTS\Scripts

或者采用更符合標準的做法，將其復制到Visual Studio項目的layouts目錄中。

代碼

Javascript文件都就位后，我們就可以編寫最簡單的模板頁代碼了：

<%@?Assembly?Name="$SharePoint.Project.AssemblyFullName$"?%>
<%@?Import?Namespace="Microsoft.SharePoint.ApplicationPages"?%>
<%@?Register?Tagprefix="SharePoint"?Namespace="Microsoft.SharePoint.WebControls"?Assembly="Microsoft.SharePoint,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Register?Tagprefix="Utilities"?Namespace="Microsoft.SharePoint.Utilities"?Assembly="Microsoft.SharePoint,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Register?Tagprefix="asp"?Namespace="System.Web.UI"?Assembly="System.Web.Extensions,?Version=3.5.0.0,?Culture=neutral,?PublicKeyToken=31bf3856ad364e35"?%>
<%@?Import?Namespace="Microsoft.SharePoint"?%>
<%@?Assembly?Name="Microsoft.Web.CommandUI,?Version=14.0.0.0,?Culture=neutral,?PublicKeyToken=71e9bce111e9429c"?%>
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="UserStories.aspx.cs"?Inherits="PreDemo.Layouts.PreDemo.UserStories"?DynamicMasterPageFile="~masterurl/default.master"?%>

<asp:Content?ID="PageHead"?ContentPlaceHolderID="PlaceHolderAdditionalPageHead"?runat="server">
<style?type="text/css">
.sys-template?
{
????display:none;
}
</style>
<script?src="/_layouts/Scripts/MicrosoftAjax/Start.js"?type="text/javascript"></script>
<script?src=?"/_layouts/Scripts/MicrosoftAjax/MicrosoftAjax.js"?type="text/javascript"></script>
<script?type="text/javascript">
Sys.require([
Sys.components.dataView,
Sys.components.openDataServiceProxy,
Sys.scripts.jQuery
]);
Sys.onReady(function?()?{
????var?dataSource?=?Sys.create.openDataServiceProxy('/_vti_bin/ListData.svc');


????Sys.query("#userStoriesList").dataView({
????????dataProvider:?dataSource,
????????fetchOperation:?"UserStories",
????????feachParameters:?{?orderby:?'標題'?},
????????autoFetch:?"true"
????});

});
</script>
</asp:Content>
<asp:Content?ID="Main"?ContentPlaceHolderID="PlaceHolderMain"?runat="server">
Hello?World!
<ul?id="userStoriesList"?class="sys-template">
<li>{{?標題?}}</li>
</ul>
</asp:Content>
<asp:Content?ID="PageTitle"?ContentPlaceHolderID="PlaceHolderPageTitle"?runat="server">
應用程序頁
</asp:Content>
<asp:Content?ID="PageTitleInTitleArea"?ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"?runat="server"?>
我的應用程序頁
</asp:Content>

其中的UserStories是我的一個任務列表。我事先填充了一些示例數據。

跳過JavaScript部分，我們先來看Main content一節中名為userStoriesList的<ul>無序列表。 其中的<li>元素包圍著一個有趣的符號：{{?標題?}}。這樣就聲明了一個綁定到SharePoint中ListItem的標題字段。我們也可以改成任何其他的列，如“優先級”，或者在其中添加JavaScript，如{{ String.format("{0:yyyy-M-dd}", 修改時間) }}。

注意PageHead的腳本引用。引用MicrosoftAjax.js使得我們可以使用ASP.Net AJAX的核心功能。Start.js使得我們可以使用Sys.require功能，以便導入其他具有依賴關系的Javascript。

至此，我們還沒有導入足夠的JavaScript以提供我們需要的模板功能。這部分工作由Sys.require來完成。聲明了1.DataView對象，用于完成主要的模板工作；2.openDataServiceProxy，知道如何與SharePoint的ADO.Net Data Service進行通訊；3. jQuery。如果你用Firebug看的話就會發現Sys.require加載了哪些額外的.js文件，就像MicrosoftAjaxTemplates.js。而且是按照正確的順序加載到頁面上的。這種方式保證了頁面不會放上很多不需要的Javascript。?

真正的奇跡發生在Sys.onReady里，其功能是在DOM加載完成后執行一次。首先它實例化了一個openDataServiceProxy對象，負責與一個oData端點進行通訊，在我們的例子中是一個ADO.Net Data Services。

它做的第二件事情是實例化一個DataView對象，并將其關聯到userStoriesList元素。fetchOperation參數告訴它從哪個列表獲取ListItems（本例中為UserStories列表）。fetchParameters參數告訴它如何對數據進行排序，篩選或分頁。

DataView實例化后（由于autoFetch被設為true） 會通過其dataProvider檢索JSON數據，并為每個返回的行重復所關聯的DOM元素的innerHTML，而且以實際的數據代替綁定語法。看起來似乎很簡單，但在將來的博文中你會看到它很快會變得很復雜。

最后一個要注意的是sys-template類。這是一個在ASP.Net AJAX中預定義的CSS類，當完成渲染工作后，由ASP.Net AJAX將其設置為display:block。因此，我們需要為sys-template創建一個CSS類并設為display:none，這樣在頁面加載過程中最終用戶就看不到你的模板代碼了。

現在，如果你點擊生成->部署解決方案，就會看到如下的顯示：?

總結

當然，可能如果用服務器端代碼編寫這個功能的話實現起來更容易。這個話題先擱在這兒，我們的解決方案還有很多潛力可挖。例如，從哪個層面上與jQuery結合，可以使界面更美觀？如何將數據寫回到上下文服務器端？如何實現主-子關系？我們將在隨后的博文中一起來探討這些問題。

?

參考資料

Client Side AJAX Applications in SharePoint 2010-Part3:ASP.Net AJAX Templating 101?

ASP.NET AJAX: Client Postbacks cause a Sys.ArgumentTypeException?

?

轉載于:https://www.cnblogs.com/Sunmoonfire/archive/2010/07/22/1781936.html

總結

以上是生活随笔為你收集整理的SharePoint 2010中的客户端AJAX应用——ASP.NET AJAX模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。