上一篇闡述了在MOSS2007中如何配置環境使之支援AJAX，在這一篇中，筆者將運用已經配置好的環境建立一個簡單的AJAX Enabled WebPart,做完這個例子後，其實您會發現這和AJAX在ASP.NET中的應用是沒有本質區別的，只是在SharePoint中多了一步修改事件回傳的指令碼而已。
本文內容概覽：
1.建立ASP.Net AJAX-Enabled WebSite
2.編寫相應的代碼
3.部署WebPart
步驟一：建立ASP.Net AJAX-Enabled WebSite
開啟Visual Studio 2005,建立一個ASP.NET AJAX-Enabled網站（需要安裝過ASP.NET AJAX擴充後才有該模版），鍵入"AJAXEnabledWebPart"作為項目的名稱，刪除Default.aspx頁面，右擊項目，添加一個類，取名為AjaxEnabledControl.cs
步驟二：編碼
引用相關的程式集以及添加對應的命名空間
System.Drawing.dll
System.Web.dll
System.Web.Extentions.dll
Microsoft.SharePoint.dll
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebPartPages;
繼承 Microsoft.SharePoint.WebPartPages命名空間下的WebPart類
public class AjaxEnabledControl : WebPart
在類中定義需要使用到的web伺服器端控制項，筆者用到一個日曆控制項一個標籤控制項，您可以根據自己的需求定義，這裡只為達到功能示範效果
private Calendar myCalendar;
private Label lblShowDate;
寫一個方法用於設定日曆控制項的樣式（如果想寫成使用者控制項，然後用QuickPart封裝則不需要在後台代碼中定義控制項和控制項的樣式）
void SetCalendarStyle(Calendar myCalendar)
{
myCalendar.BackColor = Color.White;
myCalendar.BorderColor = Color.FromName("#999999");
myCalendar.CellPadding = 4;
myCalendar.DayNameFormat = DayNameFormat.Shortest;
myCalendar.Font.Name = "Verdana";
myCalendar.Font.Size = FontUnit.Point(8);
myCalendar.ForeColor = Color.Black;
myCalendar.Height = Unit.Pixel(180);
myCalendar.Width = Unit.Pixel(200);
myCalendar.SelectedDayStyle.BackColor = Color.FromName("#666666");
myCalendar.SelectedDayStyle.Font.Bold = true;
myCalendar.SelectedDayStyle.ForeColor = Color.White;
myCalendar.TodayDayStyle.BackColor = Color.FromName("#CCCCCC");
myCalendar.TodayDayStyle.ForeColor = Color.Black;
myCalendar.SelectorStyle.BackColor = Color.FromName("#CCCCCC");
myCalendar.WeekendDayStyle.BackColor = Color.FromName("#FFFFCC");
myCalendar.OtherMonthDayStyle.ForeColor = Color.FromName("#808080");
myCalendar.NextPrevStyle.VerticalAlign = VerticalAlign.Bottom;
myCalendar.DayHeaderStyle.BackColor = Color.FromName("#CCCCCC");
myCalendar.DayHeaderStyle.Font.Bold = true;
myCalendar.DayHeaderStyle.Font.Size = FontUnit.Point(7);
myCalendar.TitleStyle.BackColor = Color.FromName("#999999");
myCalendar.TitleStyle.BorderColor = Color.Black;
myCalendar.TitleStyle.Font.Bold = true;
}
編寫一個方法用於修改WSS3.0的指令碼以確保正確的回傳行為，因為對於JavaScript_doPostBack()提交更改的ASP.NET控制項，可能會發生整個頁面的回傳事件，即使在該頁面上有ScriptManager控制項和UpdatePanel控制項，Windows SharePoint Services 3.0 和 ASP.NET AJAX 會對某些表單操作進行緩衝，這會導致 SharePoint 和 ASP.NET AJAX 之間發生衝突。若要更改此行為，則必須向 Windows SharePoint Services 3.0 中啟動並執行指令碼添加代碼。
private void EnsurePanelFix()
{
if (this.Page.Form != null)
{
String fixupScript = @"_spBodyOnLoadFunctionNames.push(""_initFormActionAjax"");
function _initFormActionAjax()
{
if (_spEscapedFormAction == document.forms[0].action)
{
document.forms[0]._initialAction = document.forms[0].action;
}
}
var RestoreToOriginalFormActionCore = RestoreToOriginalFormAction;
RestoreToOriginalFormAction = function()
{
if (_spOriginalFormAction != null)
{
RestoreToOriginalFormActionCore();
document.forms[0]._initialAction = document.forms[0].action;
}
}";
ScriptManager.RegisterStartupScript(this,typeof(AjaxEnabledControl), "UpdatePanelFixup",fixupScript, true);
}
}
添加單擊日曆時觸發的事件
private void myCalendar_SelectionChanged(object sender, EventArgs args)
{
lblShowDate.Text = myCalendar.SelectedDate.ToString();
}
重寫WebPart類的建立子控制項方法
protected override void CreateChildControls()
{
base.CreateChildControls();
//修改wws3.0指令碼更改doPostBack() 函數
//保證不會發生整個頁面回傳事件
EnsurePanelFix();
UpdatePanel myUpdatePanel = new UpdatePanel();
ScriptManager myScriptManager = new ScriptManager();
myCalendar = new Calendar();
SetCalendarStyle(myCalendar);
lblShowDate = new Label();
//設定控制項的屬性
myCalendar.ID = "cldDateSelector";
lblShowDate.ID = "lblShowDate";
lblShowDate.Text = string.Empty;
myScriptManager.ID = "scriptHandler";
myUpdatePanel.ID = "refleshScope";
myUpdatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
myUpdatePanel.ChildrenAsTriggers = true;
//添加日曆的事件處理
myCalendar.SelectionChanged += new EventHandler(myCalendar_SelectionChanged);
//把日曆控制項和標籤添加到UpdatePanel中
myUpdatePanel.ContentTemplateContainer.Controls.Add(myCalendar);
myUpdatePanel.ContentTemplateContainer.Controls.Add(lblShowDate);
//在頁面上註冊UpdatePanel和ScriptManager控制項
this.Controls.Add(myScriptManager);
this.Controls.Add(myUpdatePanel);
}
步驟三：部署WebPart
這一部分內容，在筆者的自訂搜尋Web組件一文中有詳細說明，懇請讀者自行參閱
最終效果如顯示（單擊日曆上的某個日期時可以看到整個頁面就地區部分重新整理，瀏覽器下方是沒有進度條顯示的）：
