These days implementing AJAX in sharepoint has become a important request for share point applications.
Here i'm explaining how to create and deploy a AJnAX webpart in step by step manner...
Step 1:
Download and Install MS AJAX Extension for ASP.NET 2.0 from http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en .
Step 2: Modify web.config file as mentioned in Web.config Changes
Step 3: Download AJAX tool kit from http://www.asp.net/ajax/downloads and install the same
Step 4: Move AjaxControlToolkit.dll to GAC from downloaded file in step 3
Step 5: Create a folder called AjaxWebSerivce under "_/layouts" directory and create a .asmx web service where in we could interact with the MOSS site to add\update\delete Sharepoint data.
Your asmx code may look like below...below code reads the value of "Title" column from "AjaxDemoCustomList"
using System;
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ReadDataFromList : System.Web.Services.WebService
{
[WebMethod]
public string[] GetListData(string prefixText, int count)
{
try
{
string siteURL = "http://mosssvr-ranjith:8091/SiteDirectory/AJAXDemo/default.aspx";
string msListName = "AJAXDemoCustomList";
string sTitleColumn = "Title";
Microsoft.SharePoint.SPSite spSite = new Microsoft.SharePoint.SPSite(siteURL);
Microsoft.SharePoint.SPWeb spWeb = spSite.OpenWeb();
Microsoft.SharePoint.SPList spList = spWeb.Lists[msListName];
Microsoft.SharePoint.SPQuery spQuery = new Microsoft.SharePoint.SPQuery();
spQuery.Query = string.Format("
Microsoft.SharePoint.SPListItemCollection spItems = spList.GetItems(spQuery);
System.Collections.ArrayList items = new System.Collections.ArrayList(spItems.Count);
foreach (Microsoft.SharePoint.SPListItem spListItem in spItems)
items.Add(spListItem[sTitleColumn].ToString());
spWeb.Dispose();
spSite.Dispose();
return (string[])items.ToArray(typeof(string));
}
catch(Exception ex)
{
System.Collections.ArrayList items = new System.Collections.ArrayList(1);
items.Add(ex.Message);
return (string[])items.ToArray(typeof(string));
}
}
}
Note : You could replace your SiteURL, List Name and Column Name in above asmx file, like
string siteURL = "http://yoursite/AJAXDemo/default.aspx";
string msListName = "AJAXDemoCustomList";
string sTitleColumn = "ColumnName";
Step 6: Create a web part to read a list a show the data by using AJAX controls. This web part will interact with the above webservice through the AJAXToolKit ajax control. So All we need to do is just create a AJAXToolKit control , Map it with the above web service and display the data resultant data.
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;
using AjaxControlToolkit;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
using System.Configuration;
using System.Collections.Specialized;
using System.Web.UI.WebControls;
namespace AJAXAutoCompleteDemo
{
[Guid("e8b6db14-c3c3-48f5-8301-b6f2e3fe0583")]
public class AJAXAutoCompleteDemo : System.Web.UI.WebControls.WebParts.WebPart
{
Exception meExp = null;
TextBox oTextBox = null;
AutoCompleteExtender oAutoCompleteExtender = null;
ScriptManager oScriptManager = null;
private string msAJAXWebServicePath = "_layouts/AjaxWebSerivce/ReadDataFromList.asmx";
private string msWebServiceMethodName = "GetListData";
public AJAXAutoCompleteDemo()
{
EnsureChildControls();
this.Title = "AJAXAutoCompleteDemo";
this.ExportMode = WebPartExportMode.All;
}
protected override void CreateChildControls()
{
try
{
base.CreateChildControls();
//
oScriptManager = new ScriptManager();
oScriptManager.ID = "oScriptManagerId";
oScriptManager.EnablePageMethods = true;
this.Controls.Add(oScriptManager);
//
oTextBox = new TextBox();
oTextBox.ID = "IdTestTextBox";
oTextBox.Width = new Unit("250px");
oTextBox.AutoCompleteType = AutoCompleteType.Disabled;
this.Controls.Add(oTextBox);
}
catch (Exception ex)
{
meExp = ex;
}
}
protected override void OnPreRender(EventArgs e)
{
try
{
oAutoCompleteExtender = new AutoCompleteExtender();
oAutoCompleteExtender.ID = "oAutoCompleteExtenderId";
oAutoCompleteExtender.TargetControlID = "IdTestTextBox";
oAutoCompleteExtender.ServiceMethod = msWebServiceMethodName;
oAutoCompleteExtender.ServicePath = msAJAXWebServicePath;
oAutoCompleteExtender.MinimumPrefixLength = 1;
oAutoCompleteExtender.EnableCaching = true;
oAutoCompleteExtender.CompletionSetCount = 12;
oAutoCompleteExtender.CompletionInterval = 2000;
this.Controls.Add(oAutoCompleteExtender);
}
catch (Exception ex)
{
meExp = ex;
}
}
protected override void Render(System.Web.UI.HtmlTextWriter output)
{
try
{
if (meExp != null)
{
renderException(output, meExp);
return;
}
//
EnsureChildControls();
output.Write("
}
catch (Exception ex)
{
renderException(output, ex);
}
}
private void renderException(HtmlTextWriter output, Exception e)
{
output.Write(string.Format("Message: {0}
Source: {1}
Stack Trace: {2}", e.Message, e.Source, e.StackTrace));
}
}
}
You web part should also have script manager control (if its no there in the master page), like below...
oScriptManager = new ScriptManager();
oScriptManager.ID = "oScriptManagerId";
oScriptManager.EnablePageMethods = true;
this.Controls.Add(oScriptManager);
Step 7: Deploy the webpart and Do iisreset
Now your web part will show the auto complete drop down with ajax interface.
If you type a first letter of field column value that you gave in the Step 6, it will fetch the all record for that first letter and will populate in auto complete drop down box.
For example in your list if you have stored all 49 states and if you type “N” in the text box, it will populate auto complete dropdown with “NewYork”,”NewJersey”, etc
Note: Please don’t forget to replace your sitename, listname and column name as mentioned in step 5.
