WCF Data Services是SharePoint 2010中一個(gè)極具吸引力的新特性。然而，因?yàn)樗膹?qiáng)大，直接對(duì)其進(jìn)行編程仍然會(huì)有點(diǎn)痛苦。幸運(yùn)的是，一個(gè)新的相關(guān)技術(shù) —— ASP.Net AJAX模板 – 可以完美的與WCF Data Service進(jìn)行集成，并允許我們快速構(gòu)建優(yōu)雅的，可維護(hù)的和反應(yīng)迅速的AJAX應(yīng)用程序。?

在本文中，我將詳細(xì)描述ASP.Net AJAX模板，并在Visual Studio 2010中一步一步的構(gòu)建一個(gè)非常簡(jiǎn)單的應(yīng)用程序頁(yè)面。接著使用ASP.Net AJAX模板來(lái)顯示SharePoint 2010中通過(guò)WCF Data Services發(fā)布的JSON格式的列表數(shù)據(jù)。?

什么不是模板？?

單純從技術(shù)層面解釋什么是ASP.Net AJAX模板可能并不容易。不妨先假設(shè)沒(méi)有這項(xiàng)技術(shù)，看看傳統(tǒng)方式是如何解決問(wèn)題的。如果SharePoint傳遞給你一個(gè)JavaScript中的JSON對(duì)象的數(shù)組，現(xiàn)在的你會(huì)如何將其轉(zhuǎn)換成HTML？?

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

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

這種類型的解決方案的問(wèn)題，或者說(shuō)任何沒(méi)有使用模板引擎的解決方案，事實(shí)上都無(wú)法清楚的分離數(shù)據(jù)訪問(wèn)邏輯和界面展現(xiàn)。事實(shí)上，這種情形很像回到了經(jīng)典的Active Server Pages風(fēng)格，可維護(hù)性很差，代碼一塌糊涂。隨著我們不斷的從SharePoint獲取數(shù)據(jù)，整個(gè)代碼會(huì)變得更加雜亂。?

模板的目標(biāo)是使你不必編寫上面那樣的代碼，使用模板后的代碼應(yīng)該像下面這樣：：?

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

整潔，漂亮。理想狀態(tài)下模板應(yīng)提供這樣一個(gè)的解決方案：?

• 最大限度地減少管道（plumbing）代碼?
• 清晰的分離數(shù)據(jù)訪問(wèn)邏輯和界面展示?
• 簡(jiǎn)化存回服務(wù)器端的數(shù)據(jù)?
• 并且沒(méi)有ViewState！??

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

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

Visual Studio 2010和SharePoint 2010?

在進(jìn)入模板學(xué)習(xí)前，讓我們先來(lái)快速看一下如何在Visual Studio 2010中構(gòu)建一個(gè)應(yīng)用程序頁(yè)面。這是我們將來(lái)編寫代碼的基礎(chǔ)。當(dāng)然你可以把所有代碼都放在一個(gè)內(nèi)容編輯器Web部件里，但是Visual Studio提供了更好的智能提示和調(diào)試的支持，因此我們選擇在應(yīng)用程序頁(yè)中運(yùn)行。

為了在Visual Studio 2010中建立一個(gè)簡(jiǎn)單的應(yīng)用程序頁(yè)面，先選擇“新建項(xiàng)目”，然后導(dǎo)航到SharePoint 2010模板分類，選擇“空白SharePoint項(xiàng)目”

點(diǎn)擊確定后，Visual Studio會(huì)彈出SharePoint自定義向?qū)?#xff1a;

該窗口要求你選擇一個(gè)站點(diǎn)用于調(diào)試。當(dāng)你按F5鍵（開(kāi)始調(diào)試）時(shí)，Visual Studio 2010會(huì)進(jìn)行wsp文件打包，然后將其部署到這里你填寫的URL對(duì)應(yīng)的站點(diǎn)上，同時(shí)附加上對(duì)應(yīng)的w3wp進(jìn)程，并打開(kāi)一個(gè)瀏覽器顯示該sharepoint站點(diǎn)。這樣，你就立即擁有一個(gè)調(diào)試環(huán)境了。

如果你對(duì)這一過(guò)程印象不深刻，那么你可能沒(méi)有做過(guò)多少WSS 3.0的開(kāi)發(fā)——但請(qǐng)相信我，這個(gè)改進(jìn)大大節(jié)省了我們的時(shí)間。盡管在本例中我們不會(huì)寫任何服務(wù)器端代碼，但仍舊可以體會(huì)到微軟在SharePoint 2010上傾注了不少的心力。?

當(dāng)Visual Studio完成項(xiàng)目初始化后，選擇項(xiàng)目->添加新項(xiàng)，然后選擇應(yīng)用程序頁(yè)。?

Visual Studio接下來(lái)會(huì)自動(dòng)生成一個(gè)完全套用SharePoint母版頁(yè)并包含內(nèi)容控件的頁(yè)面。

代碼 <%@?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">
應(yīng)用程序頁(yè)
</asp:Content>
<asp:Content?ID="PageTitleInTitleArea"?ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"?runat="server"?>
我的應(yīng)用程序頁(yè)
</asp:Content>

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

很震撼吧！你真的應(yīng)該如此。我們沒(méi)有編寫冗長(zhǎng)的，重復(fù)的代碼，或者容易出錯(cuò)的CAML，沒(méi)有運(yùn)行任何DOS（或PowerShell）腳本，沒(méi)有手工部署到GAC，甚至沒(méi)有注意到后臺(tái)自動(dòng)生成的Feature.xml文件，然而，我們已經(jīng)部署完了。

安裝ASP.Net AJAX模板

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

從 AjaxControlToolkit.Source\SampleWebSites\AjaxClientWebSite\Scripts; 復(fù)制到

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

還有從?AjaxControlToolkit.Source\Client\MicrosoftAjax\Templates; 復(fù)制到

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

或者采用更符合標(biāo)準(zhǔn)的做法，將其復(fù)制到Visual Studio項(xiàng)目的layouts目錄中。

代碼

Javascript文件都就位后，我們就可以編寫最簡(jiǎn)單的模板頁(yè)代碼了：

<%@?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:?'標(biāo)題'?},
????????autoFetch:?"true"
????});

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

其中的UserStories是我的一個(gè)任務(wù)列表。我事先填充了一些示例數(shù)據(jù)。

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

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

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

真正的奇跡發(fā)生在Sys.onReady里，其功能是在DOM加載完成后執(zhí)行一次。首先它實(shí)例化了一個(gè)openDataServiceProxy對(duì)象，負(fù)責(zé)與一個(gè)oData端點(diǎn)進(jìn)行通訊，在我們的例子中是一個(gè)ADO.Net Data Services。

它做的第二件事情是實(shí)例化一個(gè)DataView對(duì)象，并將其關(guān)聯(lián)到userStoriesList元素。fetchOperation參數(shù)告訴它從哪個(gè)列表獲取ListItems（本例中為UserStories列表）。fetchParameters參數(shù)告訴它如何對(duì)數(shù)據(jù)進(jìn)行排序，篩選或分頁(yè)。

DataView實(shí)例化后（由于autoFetch被設(shè)為true） 會(huì)通過(guò)其dataProvider檢索JSON數(shù)據(jù)，并為每個(gè)返回的行重復(fù)所關(guān)聯(lián)的DOM元素的innerHTML，而且以實(shí)際的數(shù)據(jù)代替綁定語(yǔ)法。看起來(lái)似乎很簡(jiǎn)單，但在將來(lái)的博文中你會(huì)看到它很快會(huì)變得很復(fù)雜。

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

現(xiàn)在，如果你點(diǎn)擊生成->部署解決方案，就會(huì)看到如下的顯示：?

總結(jié)

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

?

參考資料

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/Sunmoonfire/archive/2010/07/22/1781936.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。