上一篇阐述了在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.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebPartPages;
继承 Microsoft.SharePoint.WebPartPages命名空间下的WebPart类
在类中定义需要使用到的web服务器端控件,笔者用到一个日历控件一个标签控件,您可以根据自己的需求定义,这里只为达到功能演示效果
private Label lblShowDate;
写一个方法用于设置日历控件的样式(如果想写成用户控件,然后用QuickPart包装则不需要在后台代码中定义控件和控件的样式)
{
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 中运行的脚本添加代码。
{
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);
}
}
添加单击日历时触发的事件
{
lblShowDate.Text = myCalendar.SelectedDate.ToString();
}
重写WebPart类的创建子控件方法
{
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部件一文中有详细说明,恳请读者自行参阅
最终效果如下图显示(单击日历上的某个日期时可以看到整个页面就下图区域部分刷新,浏览器下方是没有进度条显示的):