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. 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">
<asp:ServiceReference path="/_vti_bin/MyServices/SuggestionService.asmx" />
              <asp:ScriptReference Path="/_layouts/MyServices/Suggestions.js" />

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.

// 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: " +

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

namespace Search
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [WebService(Namespace = "")]
    public class SuggestionService : WebService
        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.

No comments:

Post a Comment