Develop AJAX Enabled WebPart

The previous article explains how to configure the environment in MOSS2007 to support AJAX. In this article, I will use the configured environment to create a simple AJAX Enabled WebPart. After completing this example, in fact, you will find that this is the same as AJAX in ASP. there is no essential difference between applications in. NET, but there is only one more step to modify the event sending script in SharePoint.

Overview:

1. Create an ASP. Net AJAX-Enabled WebSite

2. Write the corresponding code

3. Deploy WebPart

Step 1:Create an ASP. Net AJAX-Enabled WebSite

Open Visual Studio 2005 and create an ASP. net ajax-Enabled website (requires the installation of ASP.. net ajax extension), type "AJAXEnabledWebPart" as the project name, and delete Default. on the aspx page, right-click the project and add a class named AjaxEnabledControl. cs

Step 2:Encoding

Reference related Assembly and add corresponding namespace

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;

Inherit the WebPart class under the Microsoft. SharePoint. WebPartPages namespace

Public class AjaxEnabledControl: WebPart

Define the web server-side controls to be used in the class. I use a calendar control and a tag control. You can define them according to your needs. Here we only want to achieve the function demonstration effect.

Private Calendar myCalendar;
Private Label lblShowDate;

Write a method to set the style of the calendar control (if you want to write it as a user control and then use QuickPart packaging, you do not need to define the style of the control and control in the background code)

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;
}

Write a method to modify the WSS3.0 script to ensure that the correct release is correct, because the changed ASP is submitted for JavaScript_doPostBack. NET Control, the whole page may be sent back, even if the page contains the ScriptManager control and UpdatePanel control, Windows SharePoint Services 3.0 and ASP. net ajax caches some form operations, which leads to SharePoint and ASP.. net ajax conflicts. To change this behavior, you must add code to the script running in 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 );
}
}

Add an event triggered by clicking a calendar

Private void myCalendar_SelectionChanged (object sender, EventArgs args)
{
LblShowDate. Text = myCalendar. SelectedDate. ToString ();
}

Override the method of creating a child control for the WebPart class

Protected override void CreateChildControls ()
{
Base. CreateChildControls ();
// Modify the wws3.0 script to change the doPostBack () function
// Ensure that the whole page is not returned
EnsurePanelFix ();

UpdatePanel myUpdatePanel = new UpdatePanel ();
ScriptManager myScriptManager = new ScriptManager ();
MyCalendar = new Calendar ();
SetCalendarStyle (myCalendar );
LblShowDate = new Label ();
// Set control attributes
MyCalendar. ID = "cldDateSelector ";
LblShowDate. ID = "lblShowDate ";
LblShowDate. Text = string. Empty;
MyScriptManager. ID = "scriptHandler ";
MyUpdatePanel. ID = "refleshScope ";
MyUpdatePanel. UpdateMode = UpdatePanelUpdateMode. Conditional;
MyUpdatePanel. ChildrenAsTriggers = true;
// Add calendar event processing
MyCalendar. SelectionChanged + = new EventHandler (myCalendar_SelectionChanged );
// Add the calendar control and label to UpdatePanel.
MyUpdatePanel. ContentTemplateContainer. Controls. Add (myCalendar );
MyUpdatePanel. ContentTemplateContainer. Controls. Add (lblShowDate );
// Register the UpdatePanel and ScriptManager controls on the page.
This. Controls. Add (myScriptManager );
This. Controls. Add (myUpdatePanel );
}

Step 3:Deploy WebPart

This part of content is described in detail in the author's custom search Web parts article.

The final result is displayed. (when you click a date on the calendar, you can see that the entire page is partially refreshed. No progress bar is displayed below the browser ):