原文地址：http://sharethispoint.com/archive/2006/11/15/Build-web-parts-with-ajax.aspx
如何在開發(fā)Web部件時(shí)使用ajax呢？我們將以一個(gè)樣子類似MOSS 2007中KPI和BDC Web部件的WebPart為例來說明。如果你對(duì)ajax一點(diǎn)都不了解,推薦學(xué)習(xí)TerryLee的ajax入門系列。
ASP.net2.0有一個(gè)很酷的新特性叫作客戶端腳本回調(diào)。腳本回調(diào)主要使我們可以使用javascript調(diào)用服務(wù)器端程序中的方法，然后根據(jù)結(jié)果來做一些操作。這就使我們可以動(dòng)態(tài)更新頁面的某一部分內(nèi)容，正如將在我們下面的WebPart中看到的，而不必刷新整頁。關(guān)于在.net2.0中使用客戶端腳本回調(diào)，可以參考下面的文章地址(http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/)，其中做出了詳細(xì)的解釋。但是如何確切的將其使用與我們的代碼中，文章并沒有詳細(xì)介紹。事實(shí)上腳本回調(diào)特性是集成到.net中的，我們可以方便的拿來使用。
本示例中我們假設(shè)有這么一個(gè)WebPart，它需要很長的時(shí)間才能顯示出內(nèi)容。為了解決這個(gè)問題，給用戶更好的體驗(yàn)，我們決定讓render方法在WebPart剛剛載入時(shí)只輸出一個(gè)空的div標(biāo)簽，然后我們通過ajax來替換div的內(nèi)容，使其顯示出實(shí)際需要的內(nèi)容。這樣，用戶就可以在頁面載入后在我們的WebPart完成內(nèi)容載入前先看一看其他的內(nèi)容。

下面我們就開始。

首先我們先創(chuàng)建一個(gè)新的WebPart項(xiàng)目。在我們的WebPart類中添加下面的命名空間。

using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.WebControls.WebParts;
想要使.net知道我們的類要使用腳本回調(diào)，必須實(shí)現(xiàn)System.Web.UI.IcallbackEventHandler接口。

public?class?TreeViewRollUp:WebPart,ICallbackEventHandler
IcallBackEventHandler接口有兩個(gè)方法，public string GetCallbackResult()和 public void RaiseCallbackEvent(string eventArgs)，稍后將對(duì)其進(jìn)行介紹。
我們先定義兩個(gè)變量

private?string?datadiv;?//用于保存div標(biāo)簽名稱
private?string?ajaxdata;?//用于保存ajax返回的數(shù)據(jù)?
datadiv變量保存了html中的我們打算輸出內(nèi)容的div標(biāo)簽的id。這個(gè)div標(biāo)簽的名稱在一個(gè)WebPart實(shí)例中必須唯一。如果始終是一個(gè)固定名稱，那么當(dāng)我們在一個(gè)頁面中有兩個(gè)webpart的實(shí)例時(shí)它們有可能會(huì)替換對(duì)方的內(nèi)容。
在webpart的RenderContents方法中加入下面的代碼：

protected?override?void?RenderContents(HtmlTextWriter?writer)
{
?????this.datadiv?=?this.ClientID?+?"content";??//使用WebPart實(shí)例的客戶端id?加上一個(gè)給定的名稱
?????writer.Write("<div?id=\""?+?this.datadiv?+?"\"><img?src=\"/_layouts/images/GEARS_AN.GIF\"?width\"150\"></div>");
}
我們在最后一行的div標(biāo)簽中加了一個(gè)進(jìn)度條的小gif圖。這里直接用了WSSv3中的圖片。

在OnLoad中粘貼如下代碼：

protected?override?void?OnLoad(EventArgs?e)
{
????this.datadiv?=?this.ClientID?+?"content";
????string?js?=?Page.ClientScript.GetCallbackEventReference(this,?"'blah'",?"filldiv",?"'"?+?this.datadiv?+?"'",?true);
?????string?contentloader=?"var?ajaxcommands='';window.onload?=?ajaxloader;?function?ajaxloader()?{?eval(ajaxcommands);?}?function?filldiv(arg,?ctx){?var?mydiv?=?document.getElementById(ctx);?mydiv.innerHTML?=?arg;}";

??????if?(Page.ClientScript.IsClientScriptBlockRegistered("contentloader")?==?false)
????????????????Page.ClientScript.RegisterClientScriptBlock(Page.ClientScript.GetType(),?"contentloader",?contentloader,?true);
????????????
????????????Page.ClientScript.RegisterStartupScript(this.GetType(),?"myloader"+this.ClientID,?"?ajaxcommands?=?ajaxcommands?+?\""?+?js?+?";\";",?true);???//使用WebPart實(shí)例的客戶端id?加上一個(gè)給定的名稱作為腳本的Key
???????base.OnLoad(e);
}
在該方法中注冊有兩塊不同的javascript塊 。
第一個(gè)字符串js的值來源于GetCallbackEventReference。GetCallbackEventReference方法用于返回執(zhí)行回調(diào)服務(wù)器獲取數(shù)據(jù)的javascript。我們傳遞了：一個(gè)當(dāng)前控件（webpart）的引用；“Blah”，作為初始數(shù)據(jù)當(dāng)回調(diào)啟動(dòng)后將被傳遞到我們的服務(wù)器端組件；當(dāng)回調(diào)結(jié)束后調(diào)用的Javascript方法的名字；我們的標(biāo)記內(nèi)容的div標(biāo)簽的名字；異步開關(guān)設(shè)為true這些必要的參數(shù)。
通過該方法生成的javascript類似于下面的樣子：

WebForm_DoCallback('ctl00$m$g_a010b3bd_1a68_40f9_b46b_f87050cf516f','blah',filldiv,'ctl00_m_g_a010b3bd_1a68_40f9_b46b_f87050cf516fcontents',null,true);
我們可以將這段javascript用于一個(gè)button的OnClick事件來啟動(dòng)回調(diào)并填充div標(biāo)簽。
在本例中，我們不希望用戶還要點(diǎn)擊什么的才能繼續(xù)WebPart的載入。所以我們要在瀏覽器載入頁面時(shí)調(diào)用WebForm_DoCallback 方法。這是用contentloader字符串來實(shí)現(xiàn)的。Contentloader字符串定義了一個(gè)javascript變量, ajaxcommands,? 用來保存我們準(zhǔn)備執(zhí)行的一些命令。同時(shí)，我們設(shè)置window.onload事件使其執(zhí)行ajaxloader方法。當(dāng)ajaxloader方法運(yùn)行時(shí)將通過eval函數(shù)執(zhí)行所有存在ajaxcommands變量中的命令。
為什么這么寫呢？這是因?yàn)槿绻覀冊谝粋€(gè)頁面里有多于兩個(gè)的ajax webpart的實(shí)例時(shí)，每個(gè)實(shí)例都將會(huì)通過window.onload事件來載入數(shù)據(jù)，這樣問題就產(chǎn)生了。只有最后設(shè)定的事件處理(Event Handler)會(huì)被執(zhí)行，并不是所有的設(shè)定都執(zhí)行。為此，我們打了一個(gè)擦邊球。在window.onload里設(shè)定了一個(gè)command方法。每一個(gè)webpart僅僅擴(kuò)充其WebForm_DoCallback到ajaxcommands 變量。這樣，起碼解決了本例中的問題。應(yīng)該算得上一個(gè)好辦法吧。
最后，contentloader字符串也包括了filldiv方法，用于設(shè)定div中的回調(diào)所返回的html內(nèi)容。

最后一步，在我們的類的OnLoad 方法中將腳本注冊到頁面中。我們只需要在一個(gè)頁面里有一個(gè)contentloader javascript腳本。所以，我們在注冊前先判斷是否已經(jīng)被頁面中其他的WebPart通過腳本管理器注冊了。

剩下的事兒就是實(shí)現(xiàn)IcallbackEventHandler接口所需要的兩個(gè)方法。
string?ICallbackEventHandler.GetCallbackResult()
{
????return?this.ajaxdata;
}

void?ICallbackEventHandler.RaiseCallbackEvent(string?eventArgument)
{
????this.ajaxdata="Some?crazy?message?here!<BR>"+this.ClientID;
}
RaiseCallbackEvent當(dāng)客戶端回調(diào)啟動(dòng)時(shí)將被調(diào)用。它是一個(gè)無返回值的方法，僅用于將GetCallbackResult方法需要的數(shù)據(jù)準(zhǔn)備好。RaiseCallbackEvent方法是我們放置所有用于返回給webpart的render方法要顯示內(nèi)容的相關(guān)代碼的地方。本例中我們只發(fā)送一條簡單的信息給客戶端。為了區(qū)分不同的WebPart實(shí)例確實(shí)做了各自的工作，我們在信息后加上了各自的ClientID

趕快動(dòng)手實(shí)踐一下吧，希望大家對(duì)使用客戶端回調(diào)已經(jīng)入門了。

轉(zhuǎn)載于:https://www.cnblogs.com/xioxu/archive/2008/08/28/1279036.html

總結(jié)

以上是生活随笔為你收集整理的学习 ---AJAX如何用于Web部件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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