Calling ASP.NET Webservice using JavaScript on Regular Interval of Time

Praveen Chandran

Rate me:

3.67/5 (3 votes)

5 Sep 2013CPOL3 min read

42.2K

This tip describes how to call a webservice using JavaScript and also calling that webservice in a regular interval of time without doing a postback in the page.

Download source - 50 KB

Introduction

This tip describes how to call a webservice using JavaScript and also calling that webservice in a regular interval of time without doing a postback in the page.

Here it uses simple JavaScript, JQuery, and ASP.NET Webservice.

The webservice is calling in a regular interval of time without doing a page postback.

Background

You should have basic knowledge about ASP.NET, JavaScript and webservice. This can be applied to SharePoint page as well, by editing the page and put the JavaScript code using SharePoint designer. Currently, it will work only in Internet Explorer 8, not with Internet Explorer 9.

Using the Code

Core Steps

Create an ASP.NET webservice
Create an ASP.NET web site

Steps in Details

1. Create an ASP.NET Webservice

Create a new project 'ASP.NET Web Service Application' in Visual Studio.

Open the 'Service1.asmx.cs' file and uncomment the following line from the attribute section of the class 'Service1. This change is for allowing the webservice to be called from script.

[System.Web.Script.Services.ScriptService]

By default, you will have a method "HelloWorld" in the class 'Service1'.

Make the class like below. This method will return the current time in the server.

[WebMethod]
        public string HelloWorld()
        {
            TimeSpan time = DateTime.Now.TimeOfDay;
            return time.ToString();
        }

Build the webservice project and we will add this webservice in the ASP.NET website project to check whether the webservice is available to use. I will describe this below.

Now, the webservice is ready.

2. Create an ASP.NET Web Site

In the same project (WebService Project), add 'New Project -> New Web Site' and choose 'ASP.NET Web Forms Site' and choose 'File System' as the web location.

Test the Web Service Created in the Above Step

Once you create the new website project, then we can test our web service (created in the first step).

Right click on the website project.
Add Service Reference.
Click on 'Discover' button. It will show the webservice in the window. You can use that webservice URL for accessing the service.
In the browser, access that URL and check whether your webservice is showing 'HelloWorld' method in the browser.

Now, we can go to the implementation of calling webservice using JavaScript in the page 'Default.aspx'.

Steps

Download 'webservice.htc' file from the Microsoft site and put this file in the same place where 'Default.aspx' is residing in the project. Calling webservice using this method 'webservice.htc', is one of the methods, we can have other methods also for calling the webservice using JavaScript.

Open the 'Default.aspx' file and put the following controls in the <form> tag.

HTML

<div id="myWebService" style="behavior:url('webservice.htc')" onresult="getResult()"></div>
        <asp:Label ID="Result" runat="server">Result will be here.</asp:Label>
    </div>

Put the following JavaScript code in the <head> tag.

JavaScript

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        $(document).ready(function () {
            setInterval("CallWebService()", 2000);
        });
        function CallWebService() {
            var callID = 0;
            myWebService.useService(
                 "http://localhost:46668/Service1.asmx?wsdl", "Service1Soap");
            callID = myWebService.Service1Soap.callService("HelloWorld");
        }
        function getResult() {
            document.getElementById("Result").innerText = event.result.value;
        }
    </script>

Here replace the service URL (http://localhost:46668/Service1.asmx?wsdl[^]) with your webservice URL.

JavaScript Code Explanation

setInterval method is calling the method every 2000 milliseconds (2 seconds).
Method CallWebService is calling the webservice using JavaScript method.
Here 'myWebService' is the id of the div control.
In 'useService' method, the first argument is the webservice URL with ?wsdl in the ending, and the second argument is any name you like.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Praveen Chandran

Technical Lead Infosys Limited

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.