Thursday, October 3, 2013

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.