Using Ajaxtoolkit 3.5 in SharePoint webpart and User control

This post will be a step-by-step tutorial about how to use ajaxtoolkit 3.5 in your sharePoint webpart or usercontrol. In the below example i am using a web user control that is loaded by a custom weboart created using vsewss( you can create wspbuilder or can create it manually).

Things to Note - All the modifications to enable ajax and use ajaxtoolkit are made in the webpart not usercontrol. This way you can use controls like Popupextender in your webpart's createchildcontrols or in your web user control.

Steps are :

1. Download AjaxToolKit 3.5

2. Drag and drop the Ajaxtoolkit.dll in GAC.

3. Make Changes in your SharePoint webapp's web.config. For changes see the Post Here. Follow Step 3 only.
(Side Note : Recycle the app pool after making Web.Config changes. If you have multiple WFE's do it on all the front ends).

4. After you have added the references in web.config its the time to make changes in your webpart. Add the following code in your webpart.

protected override void OnInit(EventArgs e)
{

base.OnInit(e);
if (this.Page.Form.FindControl("scriptManager1") == null){

if (AjaxControlToolkit.ToolkitScriptManager.GetCurrent(Page) == null)
{
AjaxControlToolkit.ToolkitScriptManager toolkitScriptManager = new AjaxControlToolkit.ToolkitScriptManager();

toolkitScriptManager.ID = "scriptManager1";

this.Page.Form.Controls.AddAt(0, toolkitScriptManager);
}}
}

and the following method to fix the updatepanel postbacks

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;
}}";
AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript(this,
typeof(YOUR WEBPART NAME), "UpdatePanelFixup", fixupScript, true);
}}

now make call to EnsurePanelFix in your CreateChildControls method like below

protected override void CreateChildControls()
{

base.CreateChildControls();

EnsurePanelFix();

// Since i am loading a user control in my webpart i am using below to add it.
userControl = (UserControl)Page.LoadControl(@"/_controltemplates/MyCustomUserControl.ascx");

Controls.Add(userControl);
}

At this point you should be all set to use your ajaxtoolkit controls in your webparts CreateChildControls(like any other control). In my case all my Ajax controls were used in my Web User Control.

5. (Optional) Add the following references in the ascx file of your Web user control.

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit, Version=3.5.40412.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

don't forget to add the references for ajaxtoolkit assembly in your webpart and user control.
Happy SharePointing!

1 comments:

  1. Hi,Today I'd like to speak to those of you out there who are just getting started with websites and are looking for software for Web Design Cochin. It can be a daunting task.thanks.....

    ReplyDelete

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer or anyone else. Should you have any questions or concerns please e-mail me at sharepointprogrammingblogger@gmail.com .

Copyright (c) 2010 @ myshaepointwork.blogspot.com. All rights are reserved.Do Not Copy.

@ Learning SharePoint.com