A base SharePoint web part for AJAX in ASP.NET 3.5

Introduction

This article describe an abstract web part class developed for the SharePoint 2007 (WSS 3.0 or MOSS 2007) platform. The web part contains the logic to address some known conflicts between SharePoint and ASP.NET AJAX and is designed as the base class for all AJAX enabled SharePoint web parts.

Background

With SharePoint (WSS 3.0 or MOSS 2007) SP1, AJAX is officially supported. However, there are still lots of manual configuration needs to be performed for AJAX to work in the SharePoint environment. Basically you can create an ASP.NET web application targeting .NET framework 3.5 and merge the AJAX related entries into the web.config of your SharePoint application. However, this is not enough. In the MSDN article titled Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Part, a technique is introduced to fix the conflict between SharePoint and the ASP.NET AJAX UpdatePanel. This article provides a good starting point for developing AJAX enabled SharePoint web part. However, the technique described in the article had its limitations as well. I will go over these limitations below and explained how they can be addressed.

Using the code

ASP.NET AJAX requires one instance, and only one instance of the ScriptManager on any page. There are several ways to include the ScriptManager in a SharePoint web part page. One thing you can do is to modify the master page. Another common technique is to detect if an instance of the ScriptManager already exist, and create one on demand if it does not exist. I like the later approach as it is more flexible than modifying the master page, which affects all pages regardless if AJAX is used in the page. After all, there are 3rd party AJAX libraries that are not currently compatible with ASP.NET AJAX, and you may not have full control on all the contents that appears on a portal.

After reviewing the life cycles of an ASP.NET page one more time, I decided to place the logic that creates an instance of the ScriptManager inside the OnInit event, and that seems to work pretty well.

Another issue comes with the “EnsurePanelFix” logic, as it too, should not be registered more than once. By creating a common base class for AJAX enabled web part, and register the script using the type of the base web part, the problem can be solved. This is especially good as not only the base web part promotes code reuse, it also fixes problems!

The full code for the web part is included below:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.ComponentModel;
using System.Xml.Serialization;
using System.Web.UI.WebControls;
    public abstract class AjaxBaseWebPart : System.Web.UI.WebControls.WebParts.WebPart
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            // Register the ScriptManager
            ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
            if (scriptManager == null)
            {
                scriptManager = new ScriptManager();
                scriptManager.ID = “ScriptManager1″;
                scriptManager.EnablePartialRendering = true;
                Controls.AddAt(0, scriptManager);
            }
        }

        protected override void CreateChildControls()
        {
            // Add fix according to http://msdn2.microsoft.com/en-us/library/bb861877.aspx
            EnsurePanelFix();
        }

        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(AjaxBaseWebPart), “UpdatePanelFixup”,
                  fixupScript, true);
            }
        }
    }

Points of Interest

Despite the official support of AJAX in SP1 of SharePoint 2007, it still take lots of effort to start using AJAX in the SharePoint environment. Maybe the next service patch for Visual Studio 2008 will provide the same support for SharePoint development as the support we get for ASP.NET 3.5 AJAX? Let’s keep our fingers crossed.

ASP.NET AJAX and Web Parts in Windows SharePoint Services 3.0

You can now extend Microsoft ASP.NET 2.0 by using Microsoft ASP.NET 2.0 AJAX Extensions 1.0, which is a new Microsoft Web development technology that integrates cross-browser script libraries with the ASP.NET 2.0 Web application framework. ASP.NET AJAX allows you to quickly create pages with sophisticated, responsive user interfaces and more efficient client-server communication, simply by adding a few server controls to your Web pages.

This topic introduces Microsoft ASP.NET AJAX Extensions 1.0 technology in the context of Windows SharePoint Services 3.0. It also provides an overview of the server controls provided with ASP.NET AJAX. For a comprehensive look at the technology behind ASP.NET AJAX, see About ASP.NET AJAX.

Microsoft ASP.NET AJAX

ASP.NET AJAX enables you to create Web pages that use partial-page updates to create a dynamic user experience. ASP.NET AJAX includes AJAX Extensions 1.0, which is the server-side control framework, and the Microsoft AJAX Library, which is the set of client-side browser scripts.

The Microsoft AJAX Library can be installed without the .NET Framework. It can also be used in environments that are not Windows-based, to create Web applications for browsers that support JavaScript. See ASP.NET AJAX Downloads to download the ASP.NET 2.0 AJAX Extensions 1.0, the Microsoft AJAX Library, and other ASP.NET AJAX components.

Server Controls in Microsoft ASP.NET AJAX

ASP.NET 2.0 AJAX Extensions include server-side controls that are used for partial-page updates, as well as progress bars, timers, and script management components. A brief overview of the server-side controls is included here.

ScriptManager

The ScriptManager control manages all client script for ASP.NET AJAX. The ScriptManger automatically registers the script for ASP.NET AJAX when you add it to the Web page. You must add this as the first item in the page controls collection. The ScriptManager controls partial-page rendering in a browser when a page contains one or more UpdatePanel controls.

UpdatePanel

The UpdatePanel control stores other controls and allows partial-page updates. The UpdatePanel control allows you to request partial-page updates without writing any client script. You can, however, add custom client-side script if you want to enhance the client user experience. The UpdatePanel and associated triggers are tracked by the ScriptManager control.

UpdateProgress

The UpdateProgress control provides status information on partial-page updates in UpdatePanel controls. By default, a div element is created and displayed while an update is in progress. You can customize the default display of the div control by using the ProgressTemplate property.

Timer

The Timer control fires a postback at defined intervals. You can also use the Timer control to post the whole page rather than partial-page updates. Timer controls can be used inside or outside of an UpdatePanel control. If you want the Timer control to trigger an update, you must add a trigger attribute to the UpdatePanel control declaration.