開發AJAX Enabled WebPart

 

      上一篇闡述了在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部件一文中有詳細說明，懇請讀者自行參閱

最終效果如下圖顯示（單擊日曆上的某個日期時可以看到整個頁面就下圖區域部分刷新，瀏覽器下方是沒有進度條顯示的）：

 

文章來源：>>http://www.cnblogs.com/chendianhong/archive/2009/04/13/1435008.html