Integrating ASP.NET AJAX in SharePoint

Recently I have done some R&D that is how we can integrate ASP.NET AJAX in SharePoint, here are some steps to make it work

Adding Microsoft ASP.NET AJAX Technology to SharePoint Pages

To implement ASP.NET AJAX in SharePoint you will need to perform few steps.

First, you need to download and install ASP.NET AJAX on all front-end servers.
Second, you need to change web.config with some settings to enable AJAX functionality.
Third, you need to add the ASP.NET AJAX Script Manager control into your master page.

Creating AJAX based Web parts

You can implement AJAX by using Javascript but coordinating between server and client to update only specified parts of a Web page usually requires in-depth knowledge of ECMAScript (JavaScript). However, by using the UpdatePanel control, you can enable a Web page to participate in partial-page updates without writing any client script. When you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server.

When you send a request to the server only the particular UpdatPanel region will be sent to server. The entire page will not be refreshed.

The following code is sample code to create AJAX based web part, Here I have taken rating control from AJAX Control Tool Kit.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using AjaxControlToolkit;
namespace AjaxRatingControlPart
{
public class AjaxRatingControl : WebPart
{
Rating rating = null;
UpdatePanel upDatePanel = null;
Label lblresult = null;
Button btnSubmit = null;
public AjaxRatingControl()
{
}
protected override void CreateChildControls()
{
btnSubmit = new Button();
btnSubmit.ID = "btnSubmmit"; ;
btnSubmit.Text = "Submit";
btnSubmit.Click += new EventHandler(btnSubmit_Click);
lblresult = new Label();
upDatePanel = new UpdatePanel();
upDatePanel.ID = "UpdatePanel1";
upDatePanel.ChildrenAsTriggers = true;
upDatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
this.Controls.Add(upDatePanel);

rating = new Rating();
rating.CurrentRating = 2;
rating.MaxRating = 5;
rating.ID = "testRating";
rating.BehaviorID = "ratingId";
rating.RatingDirection = RatingDirection.RightToLeftBottomToTop;
rating.StarCssClass = "ratingStar";
rating.WaitingStarCssClass = "savedRatingStar";
rating.FilledStarCssClass = "filledRatingStar";
rating.EmptyStarCssClass = "emptyRatingStar";
rating.Changed += new RatingEventHandler(rating_Changed);
upDatePanel.ContentTemplateContainer.Controls.Add(rating);
this.Controls.Add(rating);
this.Controls.Add(lblresult);
this.Controls.Add(btnSubmit);
}

void btnSubmit_Click(object sender, EventArgs e)
{

lblresult.Text = "You have selected " + rating.CurrentRating + "."; ;
//throw new NotImplementedException();
}

void rating_Changed(object sender, RatingEventArgs e)
{
lblresult.Text = "You have selected " + rating.CurrentRating + "."; ;
}
protected override void RenderContents(HtmlTextWriter writer)
{
rating.RenderControl(writer);
upDatePanel.RenderControl(writer);
lblresult.RenderControl(writer);
btnSubmit.RenderControl(writer);
}

}
}


Installing AJAX on front-end servers

If you are using VS2005, You need to download and install <a href="http://www.asp.net/ajax/downloads/">http://www.asp.net/ajax/downloads/</a> from here

If you are using VS2008 no need to download ASP.NET AJAX. By default VS2008 has built in ASP.NET AJAX controls and libraries

Modifying web.config to enable AJAX functionality.

Open web.config under "D:\Inetpub\wwwroot\wss\VirtualDirectories\80" folder
Add <sectiongroup>element within <configsections></configsections>tag:

<sectiongroup type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="system.web.extensions">
<sectiongroup type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="scripting">
<section type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="scriptResourceHandler" requirepermission="false" allowdefinition="MachineToApplication">
<sectiongroup type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="webServices">
<section type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="jsonSerialization" requirepermission="false" allowdefinition="Everywhere">
<section type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="profileService" requirepermission="false" allowdefinition="MachineToApplication">
<section type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="authenticationService" requirepermission="false" allowdefinition="MachineToApplication">
<section type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="roleService" requirepermission="false" allowdefinition="MachineToApplication">
</sectiongroup>
</sectiongroup>
</sectiongroup>


Add <assemblies>within <assemblies></assemblies>tag:

<add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089">
<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">

Add <controls>with in <pages>tag:

<controls><add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.UI" tagprefix="asp">
<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.UI.WebControls" tagprefix="asp">
</controls>

Add <httphandlers>and <httpmodules>within <system.web>tag:

<httphandlers><remove path="*.asmx" verb="*">
<add type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" path="*.asmx" verb="*" validate="false">
<add type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" path="*_AppService.axd" verb="*" validate="false">
<add type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" path="ScriptResource.axd" verb="GET,HEAD" validate="false">
</httphandlers>
<httpmodules>
<add type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" name="ScriptModule">
</httpmodules>

Add <safecontrol>within <safecontrols>tag:
<safecontrol assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" typename="*" safe="True">

Then save the web.config file and reset IIS

Adding the ASP.NET AJAX Script Manager control into your master page

Open SharePoint Designer

Start -> Programs -> Microsoft Office -> Microsoft Office SharePoint Designer2007-> click on file menu -> Select site url and click on open button

Then expand Master Page Gallery under _catalogs folder -> open default.master page

and register the following assembly <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

Then add the following element with in <form> tag. make sure this should be top level element under <form> tag

<asp:ScriptManager id="scriptmanager1" runat="server" ></asp:ScriptManager> then publish master page and approve it

By using this approach you can integarte ASP.NET AJAX in sharepoint and also you can use AJAXControlToolKit controls in sharepoint2007 i have created AJAX rating control webpart for sharepoint using AJAXControlToolKit

Happy Coding...