SharePoint 2010中的用戶端AJAX應用——對話方塊顯示詳細資料頁

ASP.Net AJAX模板是一門全新的令人信服的用戶端技術，允許開發人員快速構建AJAX易於維護的互動式應用程式。由於ASP.Net AJAX模板和SharePoint 2010都支援oData協議，因此兩者結合在一起將是一個強大的組合。

SharePoint 2010 之所以可以帶給人們Web 2.0的外觀和感覺很大一部分要歸功於其彈出式強制回應對話方塊的使用。為了進一步豐富上一篇中的AJAX應用，我們在每張卡片上掛接一個操作，開啟一個對話方塊以便對該卡片做更細緻的處理。在之前的使用SharePoint 2010強制回應對話方塊一文中，我們學習了如何在強制回應對話方塊中開啟遠端的頁面，以及如何響應對話方塊確定或取消事件。本文中的強制回應對話方塊會更進一步，基於本地的HTML內容開啟對話方塊。

首先，我們在前文中做好的索引卡上添加一個編輯表徵圖。我們將在其上掛接開啟強制回應對話方塊的操作：

1　<div　class="userStoryTitle">
2　　　　　{{　標題　}}
3　　　　　<span　class="userStoryButtons">
4　　　　　　　　　<a　href="#"　onclick="javascript:openDialog();　return　false;">
5　　　　　　　　　　　　　<img　src="/_layouts/images/edititem.gif"　/>
6　　　　　　　　　</a>
7　　　　　</span>
8　</div>

為了先簡單測試一下開啟對話方塊的效果，同時也複習一下前面學習的強制回應對話方塊的使用，我們編寫如下的開啟對話方塊代碼：

1　function　openDialog()　{
2　　　　　var　options　=　{
3　　　　　　　　　url:　"http://www.cnblogs.com/Lists/UserStories/DispForm.aspx?Id=1",
4　　　　　　　　　width:　800,
5　　　　　　　　　height:　600,
6　　　　　　　　　title:　"User　Story",
7　　　　　};
8　　　　　SP.UI.ModalDialog.showModalDialog(options);
9　}

顯然硬式編碼URL中的參數id不是最佳做法，這裡只是作為示範。結果看起來像這樣：

這是一個非常有用的技術，允許我們在不離開現有的SharePoint網頁的情況下開啟一個對話方塊，使使用者可以直接瀏覽另一個網頁。然而，在這裡我們希望我們的應用程式中編輯的資訊是在瀏覽器的記憶體裡（通過ASP.Net AJAX模板儲存資料）。該showModalDialog()函數可以支援這一方案，但要稍微複雜一些。