First we have to create a custom SharePoint list that contains a default title, company name, contact person, city, and country fields(set
the column types of all columns to a single line of text) ,as it shows the figure below:
The idea behind the company contact web part is that if you type in the name of the company
and click the AutoFill button, the web part will call a web service that retrieves the rest of the form
information for you from the ContactInfo SharePoint list. The web service will return the data in
JSON format, so the client-side application needs to be able to deal with that.
In the next step, you will create the server side of the company contact application. Add a new
web service to the AskMe2 project; make sure the Place Code in Separate File check box is not
checked, and name the web service ContactService.asmx.
The ContactService web service returns a JSON message containing all contact information.
The ContactService web service will return a JSON message that looks like this:
{“ContactPerson”:”[value]”, “City”:”[value]”, “Country”:”[value]”}
The following listing shows the complete implementation of the ContactService web service. Make sure
to add a reference to the Microsoft.SharePoint assembly.
<%@ WebService Language=”C#” Class=”LoisAndClark.CompanyContact.ContactService”%>
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.SharePoint;
using System.Web.Script.Services;
namespace hichamveo{
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ContactService : System.Web.Services.WebService
{
public ContactService()
{
}
[WebMethod]
public string GetContactInfo(string strCompanyName)
{
string strResponse = “\”ContactPerson\”:\”{0}\”, \”City\”:\”{1}\”, \”Country\”:\”{2}\””;
string strUrl = “site's url”;
try
{
using(SPSite objSites=new SPSite(strUrl))
{
using(SPWeb objSite=objSites.OpenWeb())
{
SPList objContactList = objSite.Lists["ContactInfo"];
foreach(SPListItem objListItem in objContactList.Items)
{
string strName = objListItem["CompanyName"].ToString();
if(strName==strCompanyName)
{
string strContact=objListItem["ContactPerson"].ToString();
string strCity = objListItem["City"].ToString();
string strCountry = objListItem["Country"].ToString();
strResponse = "{" + string.Format(strResponse, strContact, strCity, strCountry) + "}";
break;
}
}
}
}
return strResponse;
}
catch(Exception)
{
throw;
}
}
Note1 The GetContactInfo() method returns a JSON message.
Note2 Attention to naming namespace, it should not be like "aaaa.bbbb" because when calling the web service, the javascript class proxy takes the form namespace.classeName.methodeName for calling the the web service's method.
So if you name your namespace "aaaa.bbbb ", the call will take the form:
"aaaa.bbbb.classename.methodename" which will generate an error
Now,we will add a single registration of a ScriptManager object to the master page
of a SharePoint site.
The following procedure shows how to use SharePoint Designer to add a single
ScriptManager registration to the default master page of a SharePoint site.
1. Open a browser and navigate to the SharePoint site that you want to add Ajax-enabled web
parts to.
2. Choose File ->Edit with Microsoft Office SharePoint Designer. This opens the SharePoint
site in SharePoint Designer.
3. Expand the _catalogs folder.
4. Expand the masterpage gallery.
5. Double-click default.master. This opens default.master in SharePoint Designer.
6. Switch to Code view.
7. Locate the registration for the web part manager. This looks like the following code fragment:
<WebPartPages:SPWebPartManager id=”m” runat=”Server” />
8. Add the following registration for a ScriptManager object to this page, right after the registration
for the web part manager:
<asp:ScriptManager ID=”theScriptManager” runat=”Server”/>
9. Save the page and close SharePoint Designer.
The complete code for the CompanyContactClient web part :
using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
namespace AjaxClient
{
[Guid("7b7b741e-3f5a-4df9-bf28-5b0ee77234d6")]
public class AjaxClient : System.Web.UI.WebControls.WebParts.WebPart
{
public AjaxClient()
{
PreRender += new EventHandler(PerformanceCounterWebPart_PreRender);
}
void PerformanceCounterWebPart_PreRender(object sender,EventArgs e)
{
if(!Page.ClientScript.IsClientScriptBlockRegistered("JSON"))
{
Page.ClientScript.RegisterClientScriptInclude("JSON", "/wpresources/json.js");
}
if (!Page.ClientScript.IsClientScriptBlockRegistered("AJAX"))
{
Page.ClientScript.RegisterClientScriptInclude("AJAX", "/wpresources/ajax2.js");
}
}
protected override void CreateChildControls()
{
try
{
string strPath = "http://web service's url/ContactService.asmx";//web service's url
ServiceReference objReference = new ServiceReference();
objReference.Path = strPath;
Control ctlManager=Page.Master.FindControl("theScriptManager");
ScriptManager objManager = ctlManager as ScriptManager;
objManager.Services.Add(objReference);
ScriptReference objScript=new ScriptReference("/wpresources/ajax2.js");
objManager.Scripts.Add(objScript);
string strCompanyName = "Name: <input id=\"CompanyName\" type=\"text\" />";
Controls.Add(new LiteralControl(strCompanyName));
string strAutoFill = "<input id=\"AutoFill\" type=\"button\" value=\"AutoFill...\" onclick=\"AutoFillRequest();\" /><br/>";
Controls.Add(new LiteralControl(strAutoFill));
string strContactPerson = "Contact: <input id=\"ContactPerson\" type=\"text\" /><br/>";
Controls.Add(new LiteralControl(strContactPerson));
string strCity = "City: <input id=\"City\" type=\"text\" /><br/>";
Controls.Add(new LiteralControl(strCity));
string strCountry = "Country: <input id=\"Country\" type=\"text\" /><br/>";
Controls.Add(new LiteralControl(strCountry));
}
catch(Exception ErrorWebPart)
{ Controls.Add(new LiteralControl(ErrorWebPart.Message)); }
}
}
}
The final part of the company contact ASP.NET Ajax solution is the content of the ajax.js
JavaScript library. It contains a function called AutoFillRequest() that calls the ContactService web
service. A callback function called OnAutoFillResponse() converts the web service response to a
JavaScript object and uses the object to set the values of the contact person, city, and country fields.
The content of the ajax.js JavaScript library looks like :
function AutoFillRequest()
{
var objCompanyName=document.getElementById("CompanyName");
hichamveo.ContactService.GetContactInfo(objCompanyName.value,OnAutoFillResponse);
}
function OnAutoFillResponse(strResult)
{
var objContact=eval('(' + strResult + ')');
var objContactPerson = document.getElementById("ContactPerson");
objContactPerson.value =objContact.ContactPerson;
var objCity = document.getElementById("City");
objCity.value = objContact.City;
var objCountry = document.getElementById("Country");
objCountry.value = objContact.Country;
}
The company contact web part:
