Consume SharePoint web service using JavaScript in custom Web Parts

This article will explain how to consume web services using JavaScript in SharePoint Web Part.

Problem: you have developed a custom web service; you need to consume this in client side for a web part.

The following article will explain how to consume it in ASP.Net. http://msdn.microsoft.com/en-us/library/bb398998(v=vs.90).aspx It uses <asp:ScriptManager>  control to call the service reference. You can’t use this in SharePoint custom web parts because ScriptManager is already included in SharePoint. You will get a runtime error.

I use bellow steps to consume the service.

Open the ascx file of the Visual Web Part. Add <asp:ScriptManagerProxy>  control and set the service reference path and the script reference path as follows:

<asp:ScriptManagerProxy runat="server" ID="scriptManager">

<Services>

<asp:ServiceReference path="/_vti_bin/MyServices/SuggestionService.asmx" />

       </Services>

       <Scripts>

              <asp:ScriptReference Path="/_layouts/MyServices/Suggestions.js" />

       </Scripts>

</asp:ScriptManagerProxy>

I have deployed the custom web service at the following location: /_vti_bin/MyServices/SuggestionService.asmx

And I have added required JavaScript methods at the following location: /_layouts/MyServices/Suggestions.js

I’m calling the web service method at the onkeyup event of the input control.

<input type="text" id="fname" onkeyup="GetCompletionList()">

<div id="Results"></div>

                                 

GetCompletionList()  is the JavaScript method added at the Suggestions.js file.

The result will be display at the div.

Below is the Suggestions.js file:

var myProxy;

// Initializes global and proxy default variables.

function pageLoad() {

    // Instantiate the service proxy.

    myProxy = new Search.SuggestionService(); 

    // Set the default call back functions.

    myProxy.set_defaultSucceededCallback(SucceededCallback);

    myProxy.set_defaultFailedCallback(FailedCallback);

}

// Processes at the onKeyUp and calls the service GetCompletionList method. 

function GetCompletionList() {

    var completionList = myProxy.GetCompletionList();

}

// Callback function that

// processes the service return value.

function SucceededCallback(result) {

    var RsltElem = document.getElementById("Results");

    RsltElem.innerHTML = result;

}

// Callback function invoked when a call to

// the service methods fails.

function FailedCallback(error, userContext, methodName) {

    if (error !== null) {

        var RsltElem = document.getElementById("Results");

        RsltElem.innerHTML = "An error occurred: " +

            error.get_message();

    }

}

new Search.SuggestionService()  is the name of the class where WebMethod is defined.

namespace Search

{

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [WebService(Namespace = "http://tempuri.org/")]

    [System.Web.Script.Services.ScriptService]

    public class SuggestionService : WebService

    {

[WebMethod]

        public string GetCompletionList()

        {

            return "Results";

        }

    }

}

Now on onkeyup event of the input control, the result will be displayed in the div control at the end.